安装
下载：https://cn.vuejs.org/v2/guide/installation.html
直接通过script在head标签里导入就可以了
<script src="../static/vue.min.js"></script>
或者通过CDN的方式直接引用
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
模版语法
大家都知道django里的模版语法是{{ }}，事情总是巧合的，Vue里的模版语法也是{{ }}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <!-- 引用vue--> <script src="../static/vue.min.js"></script> </head> <body> <div id="app"> <!-- 模版语法--> <h1>{{ msg }}</h1> </div> <script> // 实例化对象 new Vue({ el:"#app", // 固定写法el，查找的元素 data:{ // 固定写法，是个object，里面放的数据 msg:"hello vue" // 数据,前面的为模版里放的变量名，后面为对应的数据 } }) </script> </body> </html>
上面使用的是vue的方法查找id为app的属性，并将里面的文本替换为“hello vue”
指令
指令就是帮我们渲染数据的，语法：v-指令
上面的代码我们可以用指令v-text来实现
v-text
v-text相当于innerText，v-html相当于innerHTML，其实和上面的模版语法效果一样
data中是一个函数，函数中return一个对象，可以是空对象，但不能return
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <!-- 引用vue--> <script src="../static/vue.min.js"></script> </head> <body> <div id="app"> <!-- 模版语法--> <h1 v-text="msg"></h1> <!-- 写在标签里面--> </div> <script> // 实例化对象 new Vue({ el:"#app", // 固定写法el，查找的元素 data(){ return { msg:"<h2>hello vue</h2>" } } }) </script> </body> </html>
上面的将msg的内容原样显示在了页面上，没有当成标签渲染后显示，如果要渲染后显示在页面上，
就要用到v-html了
v-html
v-text相当于innerText，v-html相当于innerHTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <!-- 引用vue--> <script src="../static/vue.min.js"></script> </head> <body> <div id="app"> <!-- 模版语法--> <h1 v-html="msg"></h1> <!-- 写在标签里面--> </div> <script> // 实例化对象 new Vue({ el:"#app", // 固定写法el，查找的元素 data(){ <!--data中是一个函数，函数中return一个对象，可以是空对象，但不能return--> return { msg:"<h2>hello vue</h2>" } } }) </script> </body> </html>
v-for
v-for可以迭代数组和迭代对象
v-for迭代数组
- 语法：v-for="(alias,index) in array"
- 说明：alias是数组迭代的别名，index数组索引值，从0开始（可选，如果有就要加小括号）
v-for迭代对象的属性
- 语法： v-for=“(value,key,index) in object”
- 说明：value每个对象的属性值，key为属性名（可选），index为索引（可选）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h3>1.迭代数组</h3> <ul> <!-- e 代表的是emps数组的别名，index 数组下标，从0开始 的 注意：使用 key 特殊属性， 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素 可以使用of或者in作为分隔符 --> <li v-for="(e, index) of emps" :key="index"> 编号：{{index+1}}，姓名： {{e.name}} ， 工资 ：{{e.salary}} </li> </ul> <h3>2.迭代对象</h3> <ul> <!-- value对应是的对象的属性值，key就是对象的属性名，index索引值 --> <li v-for="(value, key, index) in person"> 第{{index+1}}个属性为：{{key}} = {{value}} </li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { emps: [ {name: '马云', salary: '20000'}, {name: '马化腾', salary: '18000'}, {name: '东哥', salary: '13000'} ], person: { name: '小梦', age: 18 } } }) </script> </body> </html>
结果：
列表
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <script src="../static/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="student in students">{{student}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ students: ["张三","李四","王五"] } }) </script> </body> </html>
字典
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <script src="../static/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="student in students">姓名：{{student.name}},年龄：{{student.age}},职业：{{student.job}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ students: [ { name:"张三", age: 25, job:"test" }, { name:"李四", age: 56, job:"IT" }, { name:"王五", age: 85, job:"dev" } ] }}) </script> </body> </html>
v-if
v-if是否渲染当前元素，v-show 与v-if类似，只是元素始终会被渲染并保留在DOM中，只是简单切换元素的CSS属性display来显示或隐藏
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <style> .box{ height: 200px; width: 200px; background: red; } </style> </head> <body> <div id="app"> <input v-model="seen" type="checkbox" name="" id="">勾选后显示红色小块 <div v-if="seen" class="box"> </div> <p v-else>红色小块隐藏了</p> </div> <script> new Vue({ el: "#app", data: { seen: false, } }) </script> </body> </html>
v-show
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <!-- 引用vue--> <script src="../static/vue.min.js"></script> <style> .box { width: 200px; height: 200px; background-color: red; } .box2 { width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div id="content"> <button v-on:click='handlerClick'>隐藏</button> <div class="box" v-show='isShow'></div> </div> <script> //数据驱动视图 new Vue({ el: '#content', data() { //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return return { msg: "<h2>alex</h2>", num: 1, isShow: true } }, methods: { handlerClick() { //数据驱动 console.log(this); this.isShow = !this.isShow; //取反 } } }) </script> </body> </html>
当第一次点击隐藏按钮的时候，isShow变为false，隐藏红色的框（加了个样式，display: none;）。当第二次点击的时候，因为isShow为fasle，所以取反之后变为true，显示红色的框
v-show要使用methods里的函数
当isshow为false的时候，页面的html是通过display:none，把内容隐藏了
切换性能：
v-show的切换性能高一些，display: none， v-if的切换是通过append
加载性能：
v-show的慢，v-if的快
