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 width: 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>