一、vue简介
1、定义：vue是JavaScript渐进式框架
渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，还可以控制整个页面，甚至可以控制整个前端项目
2、优点：
有指令（分支结构，循环结构...），复用页面结构等
有实例成员（过滤器，监听），可以对渲染的数据做二次格式化
有组件（模块的复用或组合），快速搭建页面
虚拟DOM
数据的双向绑定
单页面应用
数据驱动
3、为什么要学习vue?
目前主流的前端有三个框架：Angular(庞大)，React(精通移动端)，Vue（吸取两者优势，轻量级），
还有一个很重要的原因就是Vue是由中国人创造的（尤雨溪）所以第一手文档是中文，
初此之外vue还可以实现前后端分离开发，这样一来就大大节约开发成本。
二、vue环境简单搭建
1、通过cdn搭建
<script src="https://cn.vuejs.org/js/vue.js"></script>
2、本地导入
这个需要你自己去vue官网下载之后，放到你的项目中然后导入
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue导入</title> </head> <body> <div> abc {{num}} </div> <p class="pp"> opq {{num}} </p> </body> <!--<!–第一种导入方式cdn–>--> <!--<script src="https://cn.vuejs.org/js/vue.js"></script>--> <!--第二种导入方式：本地导入--> <script src="js/vue.js"></script> <script> new Vue({ el:'div', //el和页面结构进行绑定 data:{ num:10, //页面中的变量声明 } }); new Vue({ el: '.pp', data: { num:100 } }) </script> </html>
三、vue实例成员
1、挂载点el
1) 一个挂载点只能控制一个页面结构（优先匹配到的结构）
2）挂载点挂载的页面标签严格建议用id属性进行匹配（一般这个id名为app）
3）html标签与body标签不能作为挂载点（html标签和body标签不能被替换）
4）是否接受vue对象，是由外界是否只需要有vue对象的内容决定的
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>挂载点</title> </head> <body> <div id="app"> <div class="d1"> {{num}} </div> <div class="d1"> {{num}} </div> </div> <!--不在app里面就叫做外界接收--> <div id="main"> {{n}} </div> </body> <script src="js/vue.js"></script> <script> /** el:挂载点 * 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）所以想一个el控制两个需要再搞一个div包裹 * 2）挂载点挂载的页面标签严格建议用id属性进行匹配（一般习惯命名为app） * 3）html标签与body标签不能作为挂载点（html和body标签不可以被替换） * 4）是否接收vue对象，是由外界是否只需要vue对象的内容决定的 * */ var app = new Vue({ el:'#app', data:{ num:100 } }); new Vue({ el:'#main', data:{ n:app.num //在app的外面就叫做外界接收，可直接引用app.num } }); console.log('12345'); console.log(app.num);//可简写 console.log(app.$el);// 规定写法必须加$才可以获取到 console.log(app.$data.num); //本质写法 </script> </html>
为了美观我们还可以去vue.js中把两行广告给它去掉
2、插值表达式
插值表达式的作用：简单来说就是将vue控制的变量渲染到页面上去（即可以渲染数据）
1）空的插值表达式：{{ }} # 注意：当为空的时候一定要在里面加一个空格
2）插值表达式中渲染的变量在data中可以初始化
3）插值表达式可以进行简单运算与简单逻辑
4）插值表达式解决django与vue的{{}}冲突时可用delimiters自定义
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>插值表达式</title> </head> <body> <div id="app"> <p>{{ info }}</p> <p>{{ msg }}</p> <p>{{ }}</p> <p>{{num}}</p> <p>{{num + 10 * 2}}</p> <p>{{ msg.length + num }}</p> <p>{{ msg[4] }}</p> <p>{{ msg.split('')[4] }}</p> <p>[{ num }]</p> </div> </body> <script src="js/vue.js"></script> <script> /** 插值表达式的作用：将vue控制的变量渲染到页面上（即渲染数据） * 1）空插值表达式：{{ }} * 2）中渲染的变量在data中可以初始化 * 3）插值表达式可以进行简单运算与简单逻辑 * 4）插值表达式解决vue与django{{}}符号冲突问题，用delimiters自定义（了解） */ new Vue({ el: '#app', data: { info: '信息', msg: 'message', num: 10, }, // 控制vue插值表达式符号 delimiters: ['{{', '}}'], //['','']里面加什么符号表示让它在冲突时保留vue }) </script> </html>
3、过滤器
1）用实例成员filters来定义过滤器
2）在页面结构中，用 |来标识使用过滤器
3）过滤方法的返回值就是过滤器过滤后的结果
4）过滤器可以对1~n个变量进行过滤，同时还可传入辅助的变量比如add等
注意：过滤器方法接收参数是按照掺入的位置先后顺序
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>过滤器</title> </head> <body> <div id="app"> <!--简单使用：过滤的对象会作为参数传给过滤器--> <p>{{num | add(20)}}</p> <!--串联使用：将第一个过滤器结果作为参数传给第二个过滤器--> <p>{{num | add(100) | jump(2)}}</p> <!--终极使用--> <p>{{ n1, n2 | fn(100, 200) }}</p> <!--更牛皮使用--> <p>{{ n1, n2 | fn(100, 200), n1, n2 | fn(100)}}</p> </div> </body> <script src="js/vue.js"></script> <script> /**过滤器 * 1）用实例成员filters来定义过滤器 * 2）在页面结构中，用|来标识使用过滤器 * 3）过滤方法的返回值就是过滤器过滤的结果 * 4）过滤器可以对1~n个变量进行过滤，同时还可以传入辅助变量 * 注意：过滤器方法接收参数是按照传入位置的 先后顺序 */ new Vue({ el: '#app', data: { num:10, n1:30, n2:60, }, filters: { add: function (a,b) { console.log(a, b); return a + b; }, jump: function (a, b) { return a * b }, fn :function (a,b,c,d) { console.log(a,b,c,d); return a + b + c + d; } } }) </script> </html>
四、vue指令
1、文本指令
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文本指令</title> </head> <body> <div id="app"> <p>{{num | add(200)}}</p> <p v-text="num"></p> <p v-text="num">123</p> <!--v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉即不会出现123--> <p v-text="info"></p> <p v-html="info"></p> <!--v-html可以解析渲染html语法的内容--> <!--js基本数据类型：字符串，数字，布尔，undefined--> <p v-text="'abc' + num + 10"></p> <p>{{'abc' + num + 10}}</p> </div> </body> <script src="js/vue.js"></script> <script> /** * 1)v-*是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的 不可以自己去定义） * 2）v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉（<p v-text="num">123</p>会被num替换） * v-html可以解析渲染html语法的内容 */ new Vue({ el: '#app', data:{ num:100, info:'<i style="color: red">info内容</i>', a:10 }, filters: { add:function (a,b) { return a + b; } } }) </script> </html>
2、事件指令
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>事件指令</title> </head> <body> <div id="app"> <button v-on:click="btnClick">{{btn1}}</button> <button v-on:click="btnClick">{{btn2}}</button> <hr> <!--分割线--> <!--直接绑定事件名：系统会在触发事件时（比如点击时）调用事件方法， 传给事件方法一个参数（事件对象）--> <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); // }; /** * 一、数据驱动 * 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> 传入事件对象，同不写() * eg: <button v-on:click="btnClick(10)">按钮</button> 只传入自定义参数，当然也可以传入事件对象 */ 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> </html>
五、js对象补充
1、普通对象与对象简写
1）js中没有字典类型，只有对象类型，对象可以完全替代字典来使用
2）js中对象的属性名，都采用字符串类型，所有就可以省略字符串的引号标识
3）对象中属性值为函数时，称之为方法，方法建议简写为：方法名 （）{}
4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写{属性，}
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js对象补充</title> </head> <body> </body> <script src="js/vue.js"></script> <script> // 1）js没有字典类型，只有对象类型，对象可以完全替代字典来使用 // 2）js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识 // 3）对象中属性值为函数时，称之为方法，方法建议简写: 方法名(){} // 4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写：{属性,} var dic_obj = { //属性：值（值可以为数值，也可以为函数） 'name': 'Alen', 'eat': function () { console.log('在吃饭') } }; console.log(dic_obj.name, dic_obj['name']); dic_obj.eat(); dic_obj['eat'](); //所以说js中对象可以替代字典，字典有的方法它也可以使用 //属性省略简写，方法简写 var obj = { name: 'Alen', eat () { console.log('在吃饭...') } }; console.log(dic_obj.name, dic_obj['name']); dic_obj.eat(); dic_obj['eat'](); //属性变量简写 var height = 180; var p = { height, //height : 180 == height : height == height, name: 'Alen', eat() {} }; console.log(p.name, p.height); //js 中的类（了解） // 第一种声明类的方法 class People { constructor (name) { this.name = name } eat () { console.log(this.name + '在吃饭') } } let p1 = new People('Alen'); 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('Bob'); t1.eat(); //类属性：给类属性赋值，所有对象都能访问（掌握） function Fn() {} let f1 = new Fn(); let f2 = new Fn(); //赋值类属性 Fn.prototype.num = 100; console.log(f1.num); console.log(f1.num); //类似于单例 Vue.prototype.num = 1888; let v1 = new Vue(); let v2 = new Vue(); console.log(v1.num); console.log(v2.num); </script> </html>
六、js函数的补充
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js函数的补充</title> </head> <body> </body> <script> /**1）函数的形参与调用时传入的实参的关系（并没有强制要求，你传你的，我收我的） * 传入和接收的参数个数不需要一致 * 但是一定得按照位置进行赋值（没有关键字参数） * 没有接收的实参会被遗弃，没有被赋值的形参会被赋值为undefined */ function fn1(a,b) { console.log(a,b); return a + b; } let res = fn1(10, 20, 30); console.log(res); // 2）函数定义的演变 let fn2 = function (a, b) { return a + b; }; //3)省略关键字的箭头函数 let fn3 = (a, b) => { return a + b; }; //4)没有函数体，只有返回值的函数，可以省略作用域{}，由于只有返回值，所以return也可省略 let fn4 = (a, b) => a + b; console.log(fn4(11, 22)); //5)如果形参只有一个时，声明参数的()也可以省略 let fn5 = num => num * num; console.log(fn5(3)); //弱语言 console.log(10 + '5'); //105 console.log(10 - '5'); // 5 console.log(+'5555') ; //当只有一个类型时，用+可以变成5555 </script> </html>
七、总结
1、Vue框架的介绍
what：渐进式 javascript 框架
where：前后台分离项目的前台开发（pc、移动端）
why：有其他框架的优点、轻量、中文API（低学习成本）
how：在页面中导入vue环境，用变量控制挂载点，各种指令与实例成员配合
2、基础实例成员
1）挂载点el：id选择器唯一绑定
2）插值表达式：{{ 内部可以写基本类型与变量，还可以完成简单运算与逻辑 }}
3、标识符：delimiters修改插值表达式符号(了解)
4、过滤器：filters自定义过滤器，可以串联使用，可以一次性过滤多个变量
5、方法：methods自定义vue控制的方法，给事件指令绑定的
3、基础指令
1）v-text：基本同{{}}
2）v-html：可以解析html语法的内容
3）v-on：
v-on:事件="方法" => 系统传参，只默认传$event
v-on:事件="方法($event, ...)" => 完全自定义传参，可以手动传入$event
4、js对象补充：
1）对象就可以作为字典，属性名都是字符串，可以省略引号
2）属性值时变量同属性名，可以简写
3）{}中的属性值为函数，称之为方法，也可以简写
4）定义的函数，函数名大写，且函数内部有this，代表类
5）可以通过 类.prototype.类属性 实现所以对象共享