一 Vue导读
1.三大前端开源框架：
Angular（脸书）：更新过快开发跟不上脚步，有时候过于笨重。
React（github）：适合开发移动端
Vue：个人，结合前两者优点，单页面（针对手机）
2.什么是vue框架：前后端分离的 js渐进式（一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目） 前端框架。
3.vue特点：
1.先进的前端设计模式：MVVM 2.单页面web应用 3.数据驱动 3.数据的双向绑定 4.虚拟DOM vue：结合其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用
4.导入使用
""" 1.下载https://cn.vuejs.org/
源码：https://vuejs.org/js/vue.js 2.在要使用vue的html页面通过script标签引入 3.在html中书写挂载点的页面结构，用id表示 4.在自定义的script标签实例化Vue对象，传入一个大字典 5.在字典中通过 el与挂载点页面结构绑定，data为其通过数据 """
1.挂载点：el
"wrap"> {{ }}
class="main"> {{ }}
class="main"> {{ }}
注意：
#1..html与body不能作为挂载点
#2.一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识实例与页面挂载点一一对应，一般为id值
#3.一个页面中可以出现多个实例对应多个挂载点，实例只操作挂载点内部内容
let b = 20; let dic = { a: 10, // 字典本身就是对象，key都是字符串形式可以省略引号 b // 值为变量时，且与key同名，可以简写 }; console.log(dic)
// 1) 用实例成员data为vue环境提供数据，数据采用字典{}形式 // 2) 在插值表达式{{}}中，直接书写数据的key来访问数据 // 3) 在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据 // app.$data.info // 4) 在外部也可以通过实例变量app直接访问数据 // app.info // 5) 在vue实例内部的方法methods中，使用变量，this.info (this其实就是等价于app)
示例：
"zh"> "UTF-8">数据 "app">{{ info }}
{{ info }}
{{ num }}
{{ arr }}
{{ dic }}
// 1) 过滤器本身就是处理数据的函数，可以将插值表达式中的数据作为函数参数进行处理，得到的函数返回值就是处理后的结果 // 2) 过滤器使用语法 {{ ...变量 | 过滤器/函数名(...参数) }}与事件相似 // 3) 过滤器在实例中用filters成员提供，也是字典的形式
示例：
"zh"> "UTF-8">{{ num + 3.5 }}
{{ msg.split('')[4] }}
{{ num | f1 }}
{{ 10, 20, 30, 40 | f2 }}
{{ 10, 20 | f2(50, 80) }}
{{ 120 | f2 }}
// 1) 插值表达式 同 v-text指令，渲染普通文本,一般直接使用插值表达式：v-text="变量名/常量" // 2) v-html指令可以渲染有html语法的文本，能够解析html语法（别忘加反引号） // 3) 文本指令中可以渲染 变量 也可以渲染 常量
示例：
"app">{{ info }}
"info">
"123">
"true">
"'abc' + info">
"[1, 2, 3]">
"`好的`">
"'好的'">
// 1) 语法：v-on:事件名="函数名(参数们)" // 2) 简写：@事件名="函数名(参数们)" // 3) 用methods实例成员提供 事件函数 的实现:字典的形式与过滤器相似
mehods:{函数名：function(参数){代码块},
函数名(参数){代码块}
} // 4) 事件传参：函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)
函数名不加括号默认传事件参数；加括号没有值默认不传参；加括号有值传参数但事件需要手动传：$event
示例：
"zh"> "UTF-8">class="low-num" v-on:click="lowNum"> 点击减一： {{ num }}
"dblAction">双击
"overAction()">悬浮
"overAction(10)">悬浮1
"overAction(10, 20)">悬浮2
"overAction(10, 20, $event)">悬浮3
6.属性指令（注意class和style比较特别注意使用）：
// 1) 语法：v-bind:属性名="变量" // 2) v-bind:属性名="变量" 简写 :属性名="变量" // 3) 单值属性绑定： :title="变量" | :id="变量" | :自定义属性="变量" // 4) style属性绑定（2种方式）：
:style="字典变量"
：style="{css属性1:变量1, ..., css属性n:变量n}" // 5) class属性绑定（4中方式）： 单个： :class="变量" 多个： :class="[变量1, ..., 变量n]"
固定：:class="'类名'"
属性有无作用：:calss="{类名:布尔变量}"
示例：
"zh"> "UTF-8">属性指令 "app">"p1" class="p1" style="" title="" index="">属性指令1
"p2" v-bind:class="p1" style="" title="" index="">属性指令2
"p1">自定义属性也可以被vue绑定1
"p1">自定义属性也可以被vue绑定2
"'文本提示'">悬浮文本提示
"myStyle">样式绑定1
"{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2
class="myc1">样式绑定3
class="[myc2,myc3,myc4,'bbb']">样式绑定4
class="{xxx:yyy}">样式绑定5
"clickAction" :class="{ttt:yyy}">点击切换类
"zh"> "UTF-8">
// 1) 语法：v-model="控制vaule值的变量" // 2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量) // 3) v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量) // 4) 单独复选框作为确认框时，v-model绑定的变量为布尔类型变量 // 5) 多复选框，v-model绑定的变量值是一个列表(数组)，存放复选框选项值(谁被选中就存放了谁) // 6) 单选框，v-model绑定的变量值是某一个选项的值(值是哪个选项的值，那个选项就被选中)
示例
"zh"> "UTF-8">