目录
1.什么是Vue?
2.Vue快速入门
插值表达式：
常用指令
v-bind
v-model
v-on
v-if /v-show
v-for
案例：通过Vue完成表格数据的渲染展示
生命周期
1.什么是Vue?
Vue 是一套 前端框架 ，免除原生 JavaScript 中的 DOM 操作，简化书写。
基于 MVVM (Model-View- ViewModel ) 思想，实现数据的 双向绑定 ，将编程的关注点放在数据上。
官网： Vue.js
2.Vue快速入门
新建 HTML 页面，引入 Vue.js 文件
<script src="js/vue.js"></script>
在 JS 代码区域，创建 Vue 核心对象，定义数据模型
<script> new Vue({ el: "#app", data: { message: "Hello Vue!" } }) </script>
在创建vue对象时，有几个常用的属性：
- el: 用来指定哪儿些标签受 Vue 管理。 该属性取值
#app中的app需要是受管理的标签的id属性值- data: 用来定义数据模型
- methods: 用来定义函数。这个我们在后面就会用到
编写视图
<div id="app"> <input type="text" v-model="message"> {{ message }} </div>
插值表达式：
用来将vue对象中定义的model展示到页面上
形式： {{ 表达式 }} 。
内容可以是：
变量
三元运算符
函数调用
算术运算
常用指令
指令： HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同含义。例如： v-if ，v-for…
v-bind
为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<a v-bind:href="url">传智教育</a>
v-bind指令是可以省略的，但是:不能省略，所以第二个超链接的代码编写如下：
<a :href="url">传智教育</a><script> new Vue({ el: "#app", data: { url: "https://www.itcast.cn" } }) </script>
v-model
在表单元素上创建双向数据绑定。双向绑定的作用：可以获取表单的数据的值，然后提交给服务器
什么是双向？
- vue对象的data属性中的数据变化，视图展示会一起变化
- 视图数据发生变化，vue对象的data属性中的数据也会随着变化。
data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的
<input type="text" v-model="url">
通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
v-on
用来给html标签绑定事件的。需要注意的是如下2点：
- v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
- v-on语法绑定事件时，事件名相比较js中的事件名，没有on
<input v-on:click="demo()">我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数，代码如下： methods: { handle: function(){ alert("你点我了一下..."); } } 然后我们给第一个按钮，通过v-on指令绑定单击事件，代码如下： <input type="button" value="点我一下" v-on:click="handle()"> 同样，v-on也存在简写方式，即v-on: 可以替换成@，所以第二个按钮绑定单击事件的代码如下： <input type="button" value="点我一下" @click="handle()"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-on</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="点我一下" v-on:click="handle()"> <input type="button" value="点我一下" @click="handle()"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ }, methods: { handle: function(){ alert("你点我了一下..."); } } }) </script> </html>
v-if /v-show
v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-if与v-show</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 年龄<input type="text" v-model="age">经判定,为: <span v-if="age <= 35">年轻人(35及以下)</span> <span v-else-if="age > 35 && age < 60">中年人(35-60)</span> <span v-else>老年人(60及以上)</span> <br><br> 年龄<input type="text" v-model="age">经判定,为: <span v-show="age <= 35">年轻人(35及以下)</span> <span v-show="age > 35 && age < 60">中年人(35-60)</span> <span v-show="age >= 60">老年人(60及以上)</span> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ age: 20 }, methods: { } }) </script> </html>
v-for
从名字我们就能看出，这个指令是用来遍历的
v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下： <标签 v-for="变量名 in 集合模型数据"> {{变量名}} </标签> 需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。 有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下： <标签 v-for="(变量名,索引变量) in 集合模型数据"> <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1--> {{索引变量 + 1}} {{变量名}} </标签> 接下来，准备如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-for</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ addrs:["北京", "上海", "西安", "成都", "深圳"] }, methods: { } }) </script> </html> 然后分别编写2种遍历语法，来遍历数组，展示数据，代码如下： <div id="app"> <div v-for="addr in addrs">{{addr}}</div> <hr> <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div> </div>
案例：通过Vue完成表格数据的渲染展示
如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。
- 分析：
首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换- 步骤：
- 使用v-for的带索引方式添加到表格的<tr>标签上
- 使用{{}}插值表达式展示内容到单元格
- 使用索引+1来作为编号
- 使用v-if来判断，改变性别和等级这2列的值
- 代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-案例</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <tr align="center" v-for="(user,index) in users"> <td>{{index + 1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <span v-if="user.gender == 1">男</span> <span v-if="user.gender == 2">女</span> </td> <td>{{user.score}}</td> <td> <span v-if="user.score >= 85">优秀</span> <span v-else-if="user.score >= 60">及格</span> <span style="color: red;" v-else>不及格</span> </td> </tr> </table> </div> </body> <script> new Vue({ el: "#app", data: { users: [{ name: "Tom", age: 20, gender: 1, score: 78 },{ name: "Rose", age: 18, gender: 2, score: 86 },{ name: "Jerry", age: 26, gender: 1, score: 90 },{ name: "Tony", age: 30, gender: 1, score: 52 }] }, methods: { }, }) </script> </html>
生命周期
vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：
