1.指令
2.实例成员
3.组件
4.项目开发
? 渐进式：可以控制一个页面的一个标签，也可以控制一系列的标签，也可以控制整个页面，甚至可以控制整个前台项目
? 有指令（分支结构，循环结构...） 复用页面结构等
? 有实例成员（过滤器，监听）， 可以对渲染的数据进行二次格式化
? 有组件（模板的复用或组合），快速搭建页面
?
? 虚拟dom：所有文件加载到内存中
? 数据的双向绑定
? 单页面应用
? 数据驱动
? 前台框架：Angular 庞大（facebook），React 移动端（gethub），vue 吸取前两者的优势，轻量级
? vue文档是中文
? 实现前后台分离开发，节约开发成本
ps：前后端分离与前后端不分离的区别
前后端分离：
? 后端只需要返回前端需要的数据即可，不再控制前端显示的效果，耦合度相对较低
? 优点：开发效率高，用户体验好 缺点：成本高，不利于SEO优化
前后端不分离：
? 前端页面看到的效果都是由后端控制的，由后端渲染页面或者重定向到其他页面，也就是后端需要控制前端的显示，这会导致前后端的耦合度很高
? 优点：节省资源，利于SEO优化 缺点：不利于维护，用户体验差
? 简单使用
<!-- cdn导入--> <script src="https://cn.vuejs.org/js/vue.js"></script><!-- 本地导入--> <script src="js/vue.js"></script>? el：挂载点
? 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）
? 2）挂载点挂在的页面标签严格简易用id属性进行匹配（一般习惯用app）
? 3）html标签与body标签不能作为挂载点
? 4）是否接收vue对象，是外界是否要有vue对象决定的app里面的东西，用app.$data.num
<div id="app"> <div class="d1"> abc {{num}} </div> <div class="d1"> bbc {{num}} </div></div> <div id="main"> {{n}} </div> <script src="js/vue.js"></script><script> var app = new Vue({ el:'#app', data:{ num:100 } }); new Vue({ el: '#main' , data: { n: app.num } }); console.log('12345'); console.log(app.$data.num)</script>? 1）空插值表达式：{{ }}
? 2）插值表达式中渲染的变量在data中可以初始化
? 3）插值表达式可以进行简单的运算和简单逻辑
? 4）插值表达式符号冲突解决，用delimiters自定义解决
<div id='app'> <p> {{}} </p> <p> {{num+10}} </p> <p> {{msg + num}} </p> <p> [{ num }] </p></div><script> new Vue({ el:'#app', data:{ num:10, msg:'message', }, delimiters:['[{','}]'], })</script>? 1）用实例成员filters来定义过滤器
? 2）在页面结构中，用 | 来表示使用过滤器
? 3）过滤方法的返回值就是过滤器过滤后的结果
? 4）过滤器可以对1-n个对象进行过滤，同时还可以传入辅助的变量，过滤器方法接收参数是按照传入的位置先后
<body> <div> <!-- 简单使用：过滤的对象会作为参数传给过滤器 --> <p> {{ num | add(20) }} </p> <!-- 串联使用：将第一个过滤器结果作为参数传给第二个参数--> <p> {{ num | add(100) | jump(2) }} </p> <!-- 终极使用 --> <p> {{ n1,n2 | fn(99,77) }} </p> <!-- 最终使用--> <p> {{ n1,n2 | fn(99,77),n1,n2 | fn(100) }} </p> </div></body><script> new Vue({ el:'#app', data:{ num:10, n1:66, n2:88 }, filters:{ add:function (a,b){ return a+b }, jump:function(a,b){ return a*b }, fn: function(a,b,c,d){ return a+b+c+d } } })</script>? 1）v-* 是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的）
? 2）v-text是原样输出渲染内容，渲染控制的标签自身的内容会被替换掉
<p v-text="num">123</p> 123会被num替换掉? 3）v-html可以解析渲染html语法的内容
? js中的基本数据类型：字符串，数字，布尔，undefined
这些类型可以直接展示
<body> <div id="app"> <p>{{ num | add(300) }}</p> <p v-text="num"></p> <p v-text="num">123</p> <p v-text="info"></p> <p v-html="info"></p> </div></body><script src="js/vue.js"></script><script> new Vue({ el: '#app', data: { num: 100, info: '<i style="color: red">info内容</i>' }, filters: { add: function (a, b) { return a + b; } } })</script>var dic_obj = {
? 属性： 值（数值，函数）
}
1) js没有字典类型，只有对象类型，对象可以完全替代字典来使用
2) js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
3）对象中属性值为函数时，称之为对象的方法，方法建议简写：
方法名（）｛
｝
4） 如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写{属性,}
var height = 180;var p = { height, name: 'Jerry', eat(){ }};console.log(p.name,p.height)5） js中声明类的方法
? 第一种：
class People{ constructor(name){ this.name = name } eat(){ console.log(this.name+ '在吃饭') }}let p1 = new People('Bob');let p2 = new People('Tom');console.log(p1.name, p2.name);p1.eat();? 第二种：在函数内部出现了this语法，该函数就是类，否则就是普通函数
function Teacher(name){ this.name = name; this.eat = function(){ console.log(this.name + '在吃饭') }}let t1 = new Teacher('Myself');t1.eat();6)类属性：
给类属性赋值，所有的对象都能访问
function Fn(){}let f1 = new Fn();let f2 = new Fn();赋值类的属性Fn.prototype.num = 100;console.log(f1.num);console.log(f2.num);类似于单例Vue.prototype.num = 1000;let v1 = new Vue();let v2 = new Vue();console.log(v1.num);console.log(v2.num)? 1）函数的形参与调用时传入的实参关系（你传你的，我接收我的）
? 传入和接收的参数个数不需要一致
? 但是一定按位进行赋值（没有关键字参数）
? 没有接收的实参会被遗弃，没有被赋值的形参为undefined
? 2）函数定义的演变
类似匿名函数let fn2 = function (a,b){ return a+b;}省略关键字的箭头函数let fn3 =(a,b) =>{ return a+b;}没有函数体，只有返回值的函数，可以省略作用域｛｝，由于只要返回值，所以return 也可以省略let fn4 = (a,b) => a+b;没有参数时let fn4 = ( ) => a+b;如果形参只有一个时，声明参数的（）也可以省略let fn5 = num => num*num弱语言console.log(10 + '5') '105'console.log(10 - '5') 5先优先进行字符串运算，不行再数值运算console.log(+'55555') 55555? 对比dom驱动：1.js选择器获取目标 2.为目标标签绑定事件 3.在事件中完成相应逻辑
? 1）操作是一个功能，使用需要一个方法来控制
? 2）方法名是变量，所以控制变量就可以控制该方法
? 1) 在实例成员methods中声明事件方法
? 2）标签通过事件指令绑定声明的方法：v-on: 事件名=“事件方法名”
eg: <button v-on:click="btnClick">按钮</button>? 3) 标签通过事件指令绑定声明的方法，且自定义传参：v-on:事件名=“事件方法名()”
eg: <button v-on:click="btnClick()">按钮</button>不传任何参数:
eg: <button v-on:click="btnClick($event)">按钮</button> 传入事件对象，同不写()案列：
<body> <div id="app"> <button v-on:click="btnClick">{{ btn1 }}</button> <button v-on:click="btnClick">{{ btn2 }}</button> <hr> <!-- 直接绑定事件名：系统会在触发事件时(点击时)调用事件方法(fn1)，传给事件方法一个参数(事件对象) --> <button v-on:click="fn1">按钮3</button> <!-- 绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入的参数全由用户自己决定 --> <button v-on:click="fn2($event, 10, 20)">按钮4</button> <hr> <button v-on:click="fn(btn1)">{{ btn1 }}</button> <button v-on:click="fn(btn2)">{{ btn2 }}</button> </div></body><script src="js/vue.js"></script><script> // 对比DOM驱动：1）js选择器获取目标标签 2）为目标标签绑定事件 3）在事件中完成相应逻辑 // var btn = document.getElementsByTagName('button')[0]; // btn.onclick = function () { // console.log(111111111111); // }; new Vue({ el: '#app', data: { btn1: '按钮1', btn2: '按钮2', }, methods: { btnClick () { console.log(666) }, fn1 (ev) { console.log(ev.clientX, ev.clientY); }, fn2(ev, n1, n2) { console.log(ev, n1, n2); console.log(ev.clientX, ev.clientY); }, fn (msg) { console.log(msg); } } })</script>
