- 目标：
了解Vue框架的技术特性 掌握Vue的语法基础应用
- Vue概述：
Vue 是一个用于构建用户界面的客户端框架 官方网址： https://cn.vuejs.org/
第一个案例：文本框内容重现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一个案例</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script> </head> <script> //Vue依靠响应式数据 window.onload = function() { const app = new Vue({ el: '#app', data: { num: ' ' }, }) } </script> <body> <div id="app"> <input type="text" v-model="num"> <span>{{num}}</span> </div> </body> </html> 技术特性： MVVM（Model-View-ViewModel）数据驱动+组件化的前端开发结构简单，轻量级的框架不兼容低版本的IE 技术要点： Vue基础语法实例对象和生命周期计算属性和侦听器自定义指令和动画服务器交互组件定义和通信路由和单页面应用vuex状态管理UI框架 安装和使用： 下载vue.js文件，并导入页面使用链接远程CDN，导入页面使用通过脚手架cli安装（单页面应用）- Vue语法基础
重点：
实例对象模板语法指令 实例对象 每个Vue应用都是从实例对象开始的 选项列表 (后面详细讲解) el (关联id)datamethodscomputedwatchcomponentsrouter… el 用于挂载页面中的DOM元素，起到类似于选择器的作用。 <body> <div id="app"> </div> </body> <script> var vm = new Vue({ el: '#app', //关联id是"app"的div }) </script> data是DOM元素绑定的数据对象，提供给DOM元素使用的数据属性。 var vm = new Vue({ el: '#app', data: { 属性名1： 变量值， 属性名2： 变量值 } }) methods是与DOM元素交互所使用的方法。 var vm = new Vue( { el: ‘#app’， //关联id是“app”的div data:{}， methods:{ 函数名1:function(){ 函数代码 }， 函数名2：function(){ } } }) 模板语法Vue使用模板语法实现DOM和实例对象的绑定。
绑定类型：
绑定DOM元素的内容绑定DOM元素的属性模板语法绑定元素内容（一）：
通过插值表达式，使用{{}}将js代码包裹，使js中的数据属性值进行展示，也称为Mustache语法。插值表达式中的内容类型： data中的属性名数字字符串布尔值对js的数据属性进行运算 <div id=“app”> <h1>姓名：{{name}}</h1> <p>年龄：{{100}}</p> <p>门派：{{“武当”}}</p> <p>党员：{{false}}</p> <p>杀伤力：{{damage+100}}</p> </div>例子：（1）
例子：（2）
模板语法绑定元素内容（二）：
通过v-html指令实现元素标签的解析， 适用于html标签代码的解析展示，会覆盖元素标签内容的内容。例子： （结果及过程）
模板语法绑定元素内容（三）：
双向绑定是指DOM和实例数据相互影响通过v-model指令，实现元素内容的双向绑定，适用于可编辑的表单元素（例如：上面第一个案例）
data:{ num：100 } <div id =“app”> <span>{{num}}</span> <input type=“text” v-model=“num”> </div>模板语法绑定元素属性：
通过v-bind指令，实现元素属性的绑定，可省略用" : "例子 （结果及过程）
指令概述：
指令是一种带有 "v- "前缀的特殊标签属性指令的类型 交互指令: v-on条件渲染指令: v-if 、 v-else循环指令: v-for交互指令：
v-on指令，结合实例对象的methods使用，实现交互功能，省略时使用" @ "例子：（一） （结果及过程）
例子：（二） 《结果（切换前后）及过程》 或者：
例子：（三） （结果及过程） *** 注意 ***：在methods（）中引用data（）中内容时，需要在内容前面添加“this”指定。
条件渲染指令（一）
条件渲染指令用于控制DOM元素是否展示v-if指令v-else指令v-else-if指令v-show指令例子：（v-if） （结果及过程） 例子：（v-else-if） （过程及结果）
条件渲染指令（二）
v-show指令v-show指令和v-if 指令的区别例子： （使用v-if、v-show同时都显示时，isshow：true，没有差别）
例子： （使用v-if、v-show同时不显示时，isshow：false，有差别） 区别：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；性能：
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。使用场景：
v-if适合运营条件不大可能改变；v-show适合频繁切换循环指令：
v-for指令用于对实例对象的数据源进行遍历循环数据源可以是数组或者对象例子：（v-for） （结果及过程）
例子：数组序号（index序号从0开始） （结果及过程）
循环数组：
循环遍历获取数组成员循环遍历获取数组例子： （结果及过程）
(未完待续…)
