一。简介
vue是一个渐进式的js框架。具体介绍查看官网：
https://cn.vuejs.org
在vue框架中，有两个文件，当在开发阶段时使用完整版vue，因为有报错信息，而在上市阶段可以使用min版本的vue。
vue不同于js和jquery的是，他是数据驱动框架而非事件驱动框架。也就是说其中是对数据进行实时监听的。
vue结合了其他框架的优点，轻巧，中文api，双向绑定，双向绑定意味着其中是mvvm模式。
vue的导入可以使用cdn：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
二。挂载点。
对于vue框架来说，vue的设计理念是钩子，他可以对class类进行挂钩，也可以对唯一的id进行挂钩：
<div id="wrap"> {{ }} <hr> <div class="main"> {{ }} </div> <hr> <div class="main"> {{ }} </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: ‘#wrap‘ // el表示挂载点 }) </script>
而使用类作为挂载点时，只会绑定第一个符合的元素。
三。数据。
用实例成员data为vue环境提供数据，数据采用字典{}形式。
在插值表达式{{}}中，直接书写数据的key来访问数据。
在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据。
app.$data.info。
在外部也可以通过实例变量app直接访问数据。
app.info。
在vue实例内部的方法methods中，使用变量，this.info (this其实就是等价于app)
所有的数据都可以通过键值对的形式写入data中。
而其中的key就是默认的字符串，不加双引号也行，
四。过滤器。
在django中的过滤器只能传入一个参数，会将|前面的数据作为参数传入filter。
而在vue中，过滤器可以定义多个参数，而且会将|前的多个参数传入后面的过滤器：
<p>{{ 10, 20, 30, 40 | f2 }}</p> f2: function (a, b, c, d) { console.log(a, b, c, d); return a + b + c + d }
而且，可以将这些参数分开进行传参，
<p>{{ 10, 20 | f2(50, 80) }}</p> f2: function (a, b, c, d) { console.log(a, b, c, d); return a + b + c + d }
其中，当过滤器的参数缺少时，会以unsigned的值进行传入。多参数则忽略。
vue中也支持一些粗劣计算和一些函数的处理：
<p>{{ num + 3.5 }}</p> <p>{{ msg.split(‘‘)[4] }}</p>
五，文本指令
首先，要在一个元素中显示一段字符串，可以调用data数据：
<p>{{ info }}</p>
而如果需要使用属性控制变量则需要使用关键字v-text：
<p v-text="info"></p>
v-text中值可以时数字，和布尔值，和变量，如果需要变成字符串，要再次加单引号：
<p v-text="123"></p> <p v-text="true"></p> <p v-text="‘abc‘ + info"></p> <p v-text="[1, 2, 3]"></p>
当然可以使用v-html进行html元素的传输：
<p v-html="`<b style=‘color:red‘>好的</b>`"></p>
其中需要注意的是需要使用反引号·将所有的语句括起来。使用v-text则不会有这样的效果。
六。事件指令：
1) 语法：v-on:事件名="函数名(参数们)"
2) 简写：@事件名="函数名(参数们)"
3) 用methods实例成员提供 事件函数 的实现
4) 事件传参：函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)
其中，on后的事件有：click，mouseover等事件。也可以简写成@mouseover。
函数可以使用function，也可以省略：
<p class="low-num" v-on:click="lowNum"> <span>点击减一：</span> <span>{{ num }}</span> </p> lowNum: function () { // 在vue实例内部的方法中，使用变量 // alert(this.num) this.num -= 1; }, dblAction (ev) { // alert(‘双击事件‘); console.log(ev) },
当事件函数未绑定值时，会有一个默认函数，该值就是点击事件的具体值。
当事件绑定参数时，想要获得事件，需要使用$event进行绑定传参。
<p @mouseover="overAction(10, 20, $event)">悬浮3</p> overAction(a, b, c) { console.log(a, b, c) }
七。属性指令
在vue框架的渲染下可以使用v-bind:属性名="变量"，进行绑定属性指令，也可以简写:属性名="变量"。
当属性时非v-bind时，他所拥有的值可以是任何值，而一旦以：加修饰之后，其值就必须是data中的变量，如果想要绑定非变量的字符串作为值，需要使用单引号：
<p v-bind:index="p1">自定义属性也可以被vue绑定1</p> <!--2) v-bind:属性名="变量" 简写 :属性名="变量" --> <p :index="p1">自定义属性也可以被vue绑定2</p> <p :title="‘文本提示‘">悬浮文本提示</p>
其中有两个属性需要拥有值才能被渲染：class和style
style中的变量可以是一个字典，字典中不支持-格式的语法，需要转换成驼峰法：
<p :style="myStyle">样式绑定1</p> <p :style="{backgroundColor: c1, color: c2,
‘border-radius‘: ‘50%‘}">样式绑定2</p> myStyle: { backgroundColor: ‘pink‘, color: ‘deeppink‘, ‘border-radius‘: ‘50%‘ }, c1: ‘cyan‘, c2: ‘tan‘,
也可以直接将字典作为值放入style中，其中的value是变量。
一般的，想要绑定一个样式，可以使用class进行绑定：
可以使用变量进绑定:
<p :class="myc1">样式绑定3</p> myc1: ‘ccc ddd eee‘,
也可以使用数组进行绑定：
<p :class="[myc2,myc3,myc4,‘bbb‘]">样式绑定4</p> myc2: ‘ccc1‘, myc3: ‘ccc2‘, myc4: ‘ccc3‘,
其中的区别在于数组中的值是互不相干的。而且也可以使用‘’的方式进行固定的类绑定。
也可以使用字典加布尔类型的方式进行绑定：
<p :class="{xxx:yyy}">样式绑定5</p> yyy: true, // false
如果yyy的值是true，那么就有xx这个属性。否则没有
其中数组的方法也可以这么用：
:class="[c1, {right:r, top:t, bottom:b}]"
八。表单指令。
在表单中，，所有的值都是通过value显示出来，而使用vue中的v-model操作value则会实时监听：
当text表单时：
<input class="inp1" type="text" v-model="info"> <input class="inp2" type="text" v-model="info">
其所有的值会映射给绑定的变量，包括{{}}中的值。
当是单独复选框时：
是否同意：<input type="checkbox" name="agree" v-model="isAgree"> <!--是否同意：<input type="checkbox" name="agree"
true-value="yes" false-value="no" v-model="isAgree">--> <p>{{ isAgree }}</p>
data: {
info: ‘123‘,
isAgree: 0,
// isAgree: ‘no‘,
mysex: ‘others‘,
myhobbies: [‘male‘, ‘female‘]
}
如果其中没有选择，则没有值，如果选择了，则isargee中的值是isagree中值（布尔值）。
这个值可以通过：true-value，false-value进行绑定，返回的值就是设置的值，而且下面的变量值也需要是这两个值中的一个。
当时单选框的时侯，所有的名字都是一样的：
性取向： 男 <input type="radio" name="sex" value="male" v-model="mysex"> 女 <input type="radio" name="sex" value="female" v-model="mysex"> 哇塞 <input type="radio" name="sex" value="others" v-model="mysex"> <p>{{ mysex }}</p> data: { info: ‘123‘, isAgree: 0, // isAgree: ‘no‘, mysex: ‘others‘, myhobbies: [‘male‘, ‘female‘] }
其中mysex就可以是该单选框的默认值，而这些选中的框也就是mysex的值。
多选框，所反阔的是列表：
兴趣爱好： 男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies"> 女 <input type="checkbox" name="hobbies" value="female" v-model="myhobbies"> 哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies"> <p>{{ myhobbies }}</p> data: { info: ‘123‘, isAgree: 0, // isAgree: ‘no‘, mysex: ‘others‘, myhobbies: [‘male‘, ‘female‘] }
这些都符合双向反馈。
补充：
1.js对象（字典补充）：
let b = 20;
let dic = {
a: 10, // 字典本身就是对象，key都是字符串形式可以省略引号
b // 值为变量时，且与key同名，可以简写
};
console.log(dic)
2。反引号补充：
// 1) js多行字符串 反引号 ``
// 2) 反引号字符串中可以直接填充变量，语法为 `${变量名}`
let s1 = `第一行
第二行
结束行`;
console.log(s1);
let name = ‘Owen‘;
let age = 17.5;
let s2 = `
name: ${name}
age: ${age}
`;
console.log(s2);
其中反引号中可以使用${}传入变量进行显示字符串。