初识vue
一、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.类属性 实现所以对象共享