1.vue框架介绍
2.vue导读
3.挂载点
4.数据
5.过滤器
6.文本指令
7.事件指令
8.属性指令
9.交互修改脚本与样式
10.表单指令
一.vue框架介绍
1.vue框架 前台heml+css+js加框架，是不同于js与jq的数据驱动框架 指令 | 实例成员 | vue项目 2.drf框架 django的插件，完成前后台分离项目后台接口编写的框架 序列化组件 | 三大认证组件 | 分页，筛选，过滤，排序 | 请求，解析 ，响应 3.路飞项目 前台有vue完成，后台由drf完成的前后台分离项目 git | 短信认证 | celery异步任务 | 项目上线
二.vue导读
什么是vue框架： vue是前台框架：Angular，React，Vue vue：结合其他框架的优点，轻量级，中文API，数据驱动，双向绑定，MVVM设计模式，组件化开发，单页面应用 vue环境有俩种导入方式： 1.本地导入（下载vue） <script src="vue/vue.js"></script> 2.cdn导入，只有联网了才能用 <script src="https://cn.vuejs.js"></script> ps： vue是js渐进式框架 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目
接下来正式进入vue的学习：
三.实例成员 - 挂载点
1、vue渐进式框架：控制页面及项目的范围 2、vue的环境导入：本地、cdn 3、vue框架的优点：轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 4、vue如何与html页面结构建立关联：挂载点
ps：
1.html与body不能作为挂载点
2.一个vue对象挂载点对应一个匹配结果，所以一般挂载点用id标识
3.关键字 new Vue 然后一定不能忘记在 （{在这里面写}）
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="main"> 9 123 10 {{ }} 11 asd 12 </div> 13 <div class="wrap"> 14 {{ }} 15 16 </div> 17 </body> 18 <!--本地文件夹导入--> 19 <script src="vue/vue.js"></script> 20 <!--cdn导入--> 21 <!--<script src="https://cn.vuejs.js"></script>--> 22 <script> 23 new Vue({ 24 el:'.main' // el 代表挂载点 25 }); 26 new Vue({ 27 el:'.wrap' 28 }); 29 </script> 30 </html>
补充点：
js对象（字典）
let b = 20; let dic = { a: 10, // 字典本身就是对象，key都是字符串形式可以省略引号 b // 值为变量时，且与key同名，可以简写 也可以这么写b:b }; console.log(dic)
四.实例成员 - 数据
1.用实例成员data为vue环境提供数据，数据采用字典{}形式 2.在插值表达式{{}}中，直接书写数据的key来访问数据 3.在外部通过接受实例的变量app，访问实例成员（实例成员都用$开头），间接访问到数据 app.$data.info 4.在外部也可以通过实例变量app直接访问数据 （需要用let接收一下，才能在外面使用） app.info 5.在vue实例内部的方法methods中，使用变量，this.info（this其实就是等价于app） 关键字： app.$data.info app.info
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数据</title> 6 </head> 7 <body> 8 <div id="app"> 9 <!-- {{}}是插值表达式，中间出现的info是vue变量 --> 10 <p>{{ info }}</p> 11 <p>{{ info }}</p> 12 <p>{{ num }}</p> 13 <p>{{ arr }}</p> 14 <p>{{ dic }}</p> 15 </div> 16 </body> 17 <script src="js/vue.js"></script> 18 <script> 19 // 1) 用实例成员data为vue环境提供数据，数据采用字典{}形式 20 // 2) 在插值表达式{{}}中，直接书写数据的key来访问数据 21 // 3) 在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据 22 // app.$data.info 23 // 4) 在外部也可以通过实例变量app直接访问数据 24 // app.info 25 let app = new Vue({ 26 el: '#app', 27 data: { 28 info: 'message', 29 num: 100, 30 result: true, 31 arr: [1, 2, 3, 4, 5], 32 dic: { 33 name: 'Owen', 34 age: 17.5 35 } 36 } 37 }) 38 </script> 39 <script> 40 console.log(app); 41 console.log(app.$data.info); // 间接访问 42 console.log(app.info); // 直接访问 43 </script> 44 </html>
五.实例成员 - 过滤器
1.过滤器本身就是数据处理函数，可以将插值表达式中的数据作为参数进行处理，得到的函数返回值就是处理后的结果 2.过滤器使用法 {{ ...变量 | 过滤器（ ...变量）}} 3.过滤器在实例中用filters成员提供
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <!--插值表达式可以直接做一些简单的运算--> 10 <p>{{ num + 3.5 }}</p> 11 <p>{{ msg.split('')[4] }}</p> // 切片操作 12 <p>{{ num | f1 }}</p> 13 <p>{{ 10, 20, 30, 40 | f2 }}</p> 14 <p>{{ 10, 20 | f2(50, 80) }}</p> 15 <p>{{ 120 | f2 }}</p> 16 </div> 17 </body> 18 <script src="vue/vue.js"></script> 19 <script> 20 new Vue({ 21 el: '#app', 22 data: { 23 num: 100, 24 msg: 'message' 25 }, 26 filters:{ 27 f1: function (num) { 28 return num * 2 29 30 }, 31 // 总结：{{ a,b,c,d | f2 }} {{ a,b,c | f2(d) }} { a,b| f2(c,d) }} { a| f2(b,c,d) }} 32 f2: function (a,b,c,d) { 33 console.log(a,b,c,d); 34 return a+b+c+d 35 36 } 37 } 38 }) 39 </script> 40 </html>
六.文本指令
1.插值表达式，同 v-text指令，渲染普通文本 2.v-html指令可以渲染有html语法的文本，能够解析html语法 3.文本指令中可以渲染 变量 也可以渲染 常量
1. v-指令名='变量'，变量是需要data提供数据值的
2. v-指令名='常量'，常量采用常量基本语法，数字与布尔类型等可以直接书写的直接书写，字符串等需要特殊符号的需要添加符号
3. v-html可以解析html语法
代码：（文本指令）
1 <div id="app"> 2 <p>{{ info }}</p> 3 4 <!--1）v-指令名="变量"，变量是需要data提供数据值的 --> 5 <p v-text="info"></p> 6 <!--2）v-指令名="常量"，常量采用常量基本的语法，数字与布尔类型等可以直接书写的直接书写，字符串等需要特殊符号的需要添加符号--> 7 <p v-text="123"></p> 8 <p v-text="true"></p> 9 <p v-text="'abc' + info"></p> 10 <p v-text="[1, 2, 3]"></p> 11 12 <!--3）v-html可以解析html语法--> 13 <p v-html="`<b style='color:red'>好的</b>`"></p> 14 <p v-text="'<b>好的</b>'"></p> 15 </div> 16 <script src="js/vue.js"></script> 17 <script> 18 new Vue({ 19 el: '#app', 20 data: { 21 info: 'data提供的数据', 22 } 23 }) 24 </script>
代码：（反引号补充）
1 // 1) js多行字符串 反引号 `` 2 // 2) 反引号字符串中可以直接填充变量，语法为 `${变量名}` 3 let s1 = `第一行 4 第二行 5 结束行`; 6 console.log(s1); 7 8 let name = 'Owen'; 9 let age = 17.5; 10 let s2 = ` 11 name: ${name} 12 age: ${age} 13 `; 14 console.log(s2);
七.事件指令
1.语法：v-on：事件名='函数名（参数们）' 2.简写：@事件名='函数名（参数们）' 3.用methods实例成员提供 事件函数 的实现 4.事件参数：函数名 | 函数名（） | 函数名（自定义参数） | 函数名 （$event,自定义参数）
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 /*页面不允许选择*/ 9 user-select: none; 10 } 11 .low-num { 12 cursor:pointer; 13 } 14 .low-num:hover { 15 color: red; 16 } 17 18 </style> 19 </head> 20 <body> 21 <div id="app"> 22 <!-- 事件指令：v-on:事件名='事件函数名'--> 23 <p class="low-num" v-on:click="lowNum"> 24 <span>点击减一:</span> 25 <span>{{ num }}</span> 26 </p> 27 28 <p v-on:dblclick="dblAction">双击</p> 29 30 <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数" --> 31 <p @mouseover="overAction()">悬浮</p> 32 <p @mouseover="overAction(10)">悬浮1</p> 33 <p @mouseover="overAction(10, 20)">悬浮2</p> 34 <p @mouseover="overAction(10, 20, $event)">悬浮3</p> 35 36 <!-- 事件传参： 37 @事件='方法' 默认传入事件对象 $event 38 @事件='方法()' 不传递任何参数 39 @事件='方法(参数...)' 只传递自定义参数 40 @事件='方法($event, 参数...)' 自定义传参时传递事件对象 41 --> 42 43 </div> 44 </body> 45 <script src="vue/vue.js"></script> 46 <script> 47 let app = new Vue({ 48 el: '#app', 49 data:{ 50 num: 99 51 }, 52 methods:{ 53 lowNum:function () { 54 // 在vue实例内部的方法中，使用变量 55 // alert(this.num) 56 this.num -= 1; 57 }, 58 dblAction(ev){ 59 //alert('双击事件'); 60 console.log(ev) 61 }, 62 overAction(a,b,c){ 63 console.log(a,b,c) 64 } 65 } 66 }) 67 </script> 68 </html>
八.属性指令
1语法：v-bind:属性名="变量" 2 v-bind:属性名="变量" 简写 :属性名="变量" 3 单值属性绑定： :title="变量" | :id="变量" | :自定义属性="变量" 4 style属性绑定： :style="字典变量" | ：style="{css属性1:变量1, ..., css属性n:变量n}" 5 class属性绑定： :class="变量" | :class="[变量1, ..., 变量n]" | :calss="{类名:布尔变量}"
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 [index] { 8 color: orange; 9 } 10 11 .ccc{ 12 background-color: yellowgreen; 13 color: greenyellow; 14 border-radius: 50%; 15 } 16 .ccc1{ 17 background-color: yellowgreen; 18 } 19 .ccc2{ 20 color: greenyellow; 21 } 22 .ccc3{ 23 border-radius: 50%; 24 } 25 .ttt{ 26 background-color: gold; 27 color: orange; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="app"> 33 <!--1. 语法：v-bind:属性名='变量'--> 34 <p id="p1" class="p1" style="" title="" index="">属性指令1</p> 35 <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p> 36 37 <p v-bind:index="p1">自定义属性也可以被vue绑定1</p> 38 <!--2.v-bind:属性名='变量' 可以简写为：属性名='变量'--> 39 <p :index="p1">自定义属性也可以被vue绑定2</p> 40 <p :title="'文本提示'">悬浮文本提示</p> 41 42 <!--3.style样式属性绑定 2种方式 第一个写一个变量，第二个一个个拆开 --> 43 <p :style="myStyle">样式绑定1</p> 44 <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p> 45 46 <!--4.class类属性绑定--> 47 <p :class="myc1">样式绑定3</p> 48 <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p> 49 <p :class="{xxx:yyy}">样式绑定5</p> 50 51 <!--案例：点击切换类名是否起作用--> 52 <p @click="clickAction" :class="{ttt:yyy}">点击切换类</p> 53 </div> 54 </body> 55 <script src="vue/vue.js"></script> 56 <script> 57 new Vue({ 58 el: '#app', 59 data:{ 60 p1:'q1', 61 myStyle:{ 62 backgroundColor: 'pink', 63 color: 'deeppink', 64 'border-radius':'50%' 65 }, 66 c1:'cyan', 67 c2:'tan', 68 myc1: 'ccc ddd eee', 69 myc2: 'ccc1', 70 myc3: 'ccc2', 71 myc4: 'ccc3', 72 yyy: true, // false 73 }, 74 methods:{ 75 clickAction(){ 76 this.yyy = !this.yyy; 77 } 78 } 79 }) 80 </script> 81 </html>
九.交互修改脚本与样式
十.表单指令
1 语法：v-model="控制vaule值的变量" 2 :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量) 3 v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量) 4 单独复选框作为确认框时，v-model绑定的变量为布尔类型变量 5 多复选框，v-model绑定的变量值是一个列表(数组)，存放复选框选项值(谁被选中就存放了谁) 6 单选框，v-model绑定的变量值是某一个选项的值(值是哪个选项的值，那个选项就被选中)
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .p1 { 8 500px; 9 height: 21px; 10 background-color: orange; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="app"> 16 <form action=""> 17 <!--1) 对表单标签value进行绑定操作变量，不能时时检测绑定的变量--> 18 <input class="inp1" type="text" :value="info"> 19 <input class="inp2" type="text" :value="info"> 20 <p class="p1">{{ info }}</p> 21 <hr> 22 <!--2) 表单标签的值有 v-model="变量" 来绑定控制，操作的还是value，但是拥有时时变量值的检测 --> 23 <input class="inp1" type="text" v-model="info"> 24 <input class="inp2" type="text" v-model="info"> 25 <p class="p1">{{ info }}</p> 26 <hr> 27 <!-- 2) v-model操作单独复选框 - 确认框 --> 28 是否同意：<input type="checkbox" name="agree" v-model="isAgree"> 29 <!--是否同意：<input type="checkbox" name="agree" true-value="yes" false-value="no" v-model="isAgree">--> 30 <p>{{ isAgree }}</p> 31 32 <!-- 3) 单选框--> 33 性取向： 34 男 <input type="radio" name="sex" value="male" v-model="mysex"> 35 女 <input type="radio" name="sex" value="female" v-model="mysex"> 36 哇塞 <input type="radio" name="sex" value="others" v-model="mysex"> 37 <p>{{ mysex }}</p> 38 39 40 <!-- 4) 复选框--> 41 兴趣爱好： 42 男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies"> 43 女 <input type="checkbox" name="hobbies" value="female" v-model="myhobbies"> 44 哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies"> 45 <p>{{ myhobbies }}</p> 46 47 48 <hr> 49 <input type="submit"> 50 </form> 51 </div> 52 </body> 53 <script src="js/vue.js"></script> 54 <script> 55 new Vue({ 56 el: '#app', 57 data: { 58 info: '123', 59 isAgree: 0, 60 // isAgree: 'no', 61 mysex: 'others', 62 myhobbies: ['male', 'female'] 63 } 64 }) 65 </script> 66 </html>