前后端分离后 后端仅返回前端所需的数据，大部分业务逻辑都是通过前端进行校验
不再渲染HTML页面，不再控制前端的效果，页面由页面服务器请求返回
而具体的数据通过JS去应用服务器去数据库请求得到
优点:减少页面的请求，页面无需去后端请求，最多去静态文件服务器拿到
前后端分工清晰,大项目开发维护教简单
缺点: 小项目如果使用前后端分离 前后端沟通成本加大
1.Vue 一个渐进式JS框架 实现单页面开发
一个页面小到一个变量，一个变量代表一个页面，大到整个项目通过Vue来控制
2.页面的切换不再是请求url 而是组件的替换，替换一个组件就是替换一个页面
3.从数据角度考虑标签 而不是一个标签
挂载点一般定义成一个页面,一个el只对第一个 标签有效，所以挂载点一般为id
一个页面出现多个挂载点，但是一个Vue实例操作一个挂载点
所以一个el 指代一个挂载点
像{{}} 和 属性里 以 on-* 打头的都会被Vue拦截
<div id="app"> <!-- {{ vue变量 }} 插值表达式 --> <h1>{{ h1_msg }}</h1> <h2>{{ h2_msg }}</h2> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: ‘#app‘, // 挂载点 data: { // 为挂载点的页面结构提高数据 h1_msg: ‘h1的内容‘, h2_msg: ‘h2的内容‘, } }) </script>
Vue 会识别{{ name }} 里的name会被当作插值处, 去Date找到属性，替换成真正的内容
知识点：
this 可以拿到当前的 Vue对象 要拿到实例属性可以通过 this.$date.插值名
v-on:事件=“函数” 只要触发事件就会执行Vue实例的methods里的函数方法
v-once:被插值后 就无法改变
{{}} 相当于 v-text 文本
v-html 就是html 代码块
插值处可以通过索引 data[1] 拿到data 列表里具体的值
@事件 可以代替 v-on:事件
<div id="app"> <div v-on:click="pclick" >{{ msg }}}</div> </div> </body> <script src="Vue.js"></script> <script> let app =new Vue({ el:"#app", data:{ msg:"adas", }, methods:{ pclick:function () { alert(123); this.msg="hahahaha" } } }) </script>
这样就可以通过变量 驱动页面
所有click触发效果可以绑定到一个函数里，但是我们怎么区分那个按钮点击的呢 通过传参？
形参和实参数量可以不统一
实参如果是只有函数名的话 会把Event传过去 函数名()
<div id="app"> <button v-on:click="tanchukuang(1)" v-text="h1">{{ h1 }}</button> <button v-on:click="tanchukuang(2)" v-text="h2">{{ h2 }}</button> </div> </body> <script src="Vue.js"></script> <script> let app=new Vue({ el:"#app", data:{ h1:"弹出框1", h2:"弹出框2" }, methods:{ tanchukuang:function (xxx) { alert(xxx) } } }) </script>
知识点：
v-bind:属性 和 :属性一样 如果属性值还是键值对形式 那么插值形式可以为字典
多个类 可以通过元祖的形式 class="[a1,a2]" 来表示两个 两个类 style:”{fontsize:a1,color:a2}“
<div id="app"> <button v-on:click="tanchukuang(1)" :style="xxxx" >{{ h1 }}</button> <button v-on:click="tanchukuang(1)" style="color: yellow" >{{ h1 }}</button> </div> </body> <script src="Vue.js"></script> <script> let app=new Vue({ el:"#app", data:{ h1:"弹出框1", h2:"弹出框2", xxxx:"color:yellow" }, methods:{ tanchukuang:function (xxx) { alert(xxx) } } })
变为false 之后
原文：https://www.cnblogs.com/xzqpy/p/11091298.html