[前端] VUE基础 (1) (模板语言、指令)
vue官方网站：https://cn.vuejs.org/v2/guide/#
一、vue.js介绍
1.MVVM
vue的核心是数据驱动视图，vue主要负责视图部分。
设计模式：MVVM Model-View-ViewModel。
2.导入vue.js
使用CDN：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
或者将vue.js的代码复制到本地vue.js中。
二、vue使用
1.初次使用vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> </head> <body> <div id="app"> {{ message }} </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
1）导入vue.js
2）创建一个Vue实例，注意参数是一个对象，el表示elements，表示绑定的DOM对象，data表示数据属性。
3）在被绑定的标签中使用{{message}}来表示被渲染的数据。（模板语言）
2.模板语言插值
除了1.中的插入data中的数据，还可以进行如下操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> </head> <body> <div id="app" style="background-color: lightblue"> <h3>{{ message }}</h3> <!--插入Vue data中的值--> <h3>{{ 'helloworld' }}</h3> <!--插入字符串--> <h3>{{ 1+5 }}</h3> <!--插入数学运算--> <h3>{{ {"name":"leo"} }}</h3> <!--插入对象--> <h3>{{ 1>2?'真的':'假的' }}</h3> <!--插入三元运算--> <h3>{{ message.split('').reverse().join('') }}</h3> <!--插入函数调用--> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
得到结果：
一般情况下，我们将data不直接写成一个对象，而是写成一个返回对象的方法，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> </head> <body> <div id="app" style="background-color: lightblue"> {{ msg }} </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data(){ return { msg: '<h2>Hello MSG</h2>' } } }) </script> </body> </html>
使用以下三种形式都可以：
data: function () { return { msg: '<h2>Hello MSG</h2>' } }, data() { return { msg: '<h2>Hello MSG</h2>' } }, data: () => { return { msg: '<h2>Hello MSG</h2>' } }
3.模板语言定义和调用函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> </head> <body> <div id="app" style="background-color: lightblue"> <div>{{ func1(5,6) }}</div> <div>{{ func2(5,6) }}</div> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { msg: '<h2>Hello MSG</h2>' } }, methods:{ func1(x,y){ return x+y; }, func2:function (x,y) { return x*y; } } }) </script> </body> </html>
我们在Vue的构造函数参数中，传入函数定义。并可以在{{}}中调用函数。
运行结果：
4.指令v-text和v-html
v-text指令：
v-text指令是将数据当做普通文本来处理。在标签属性中使用，相当于innerText。
v-html指令：
v-html指令是将数据当做html标签来处理。在标签属性中使用，相当于innerHtml。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> </head> <body> <div id="app" style="background-color: lightblue"> <div v-text="msg"></div> <!-- 将标签当做字符串输出 --> <div v-html="msg"></div> <!-- 解析标签输出 --> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { msg: '<h2>Hello MSG</h2>' } } }) </script> </body> </html>
得到结果：
4.指令v-show
v-show相当于标签css中的"display"。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> <style> .mdiv{ width: 200px; height: 200px; background-color: deepskyblue; } </style> </head> <body> <div id="app"> <div class="mdiv" v-show="is_show"></div> <input type="button" v-on:click="handlerClick" value="切换"> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { msg: '<h2>Hello MSG</h2>', is_show: true } }, methods:{ handlerClick(){ this.is_show = !this.is_show; } } }) </script> </body> </html>
1）在div块中，我们使用v-show指令来控制其是否显示（实际上就是控制的style='display:none'标签是否存在）。
2）提供一个button，使用 v-on:click="func_name" ，来绑定事件函数（该事件函数需要在Vue的methods中定义）。
3）点击button后，自动调用func_name方法，在其中控制is_show数据的值。
4）is_show的值被改变了，Vue根据数据驱动，会自动重新渲染标签。（这就是Vue的数据驱动视图的体现）
5.指令v-if
在4.中，我们使用了v-show，是用来控制标签是否显示。但是标签是一直存在的。
而v-if和v-show不一样，v-if用来控制标签是否存在（渲染），也就是说，当v-if="stat"中stat为false时，对应的标签会被删除。stat为true时，标签又会被添加进去。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> <style> .mdiv{ width: 200px; height: 200px; background-color: deepskyblue; } .mdiv2{ width: 200px; height: 200px; background-color: blueviolet; } </style> </head> <body> <div id="app"> <div class="mdiv" v-show="is_show"></div> <div class="mdiv2" v-if="is_show"></div> <input type="button" v-on:click="handlerClick" value="切换"> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { msg: '<h2>Hello MSG</h2>', is_show: true } }, methods:{ handlerClick(){ this.is_show = !this.is_show; } } }) </script> </body> </html>
这里，我们使用两个不同颜色div：
当我们点击切换按钮时，两个div都消失了，但我们使用浏览器F12来查看Elements：
可以看到，使用v-show的div，属性中多了style="display: none"。而使用v-if的div，直接被删除了，留下了一个空注释来占位（以后看到这个就说明可能有标签要动态的插入到这里）。
官方文档的解释：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
6.指令v-else
v-else是和v-if搭配只用的：
<div class="mdiv" v-if="Math.random() > 0.5"></div> <div class="mdiv2" v-else></div>
在指令中，我们也可以直接使用运算语句，这个{{}}中的语法一样。
当随机数大于0.5时，显示第一个div，否则显示第二个div。
7.指令v-bind和v-on
1）v-bind绑定<img>的src
v-bind用于绑定一个标签的属性，让其能够访问Vue中的数据：
<body> <div id="app"> <img v-bind:src="img_dir" v-bind:alt="img_msg"> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { img_dir: "static/xhr.png", img_msg: "小黄人" } } }) </script> </body>
可以看到，我们使用v-bind绑定了<img>中的src属性，并在其中使用img_dir的值作为图片路径。
2）v-bind绑定class属性
<body> <div id="app"> <input type="button" value="切换" v-on:click = "handlerChange"/> <div class="mdiv" v-bind:class="{active:isActive}"></div> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { img_dir: "static/xhr.png", img_msg: "小黄人", isActive: true } }, methods: { handlerChange() { this.isActive = !this.isActive; } } }) </script> </body>
使用v-bind绑定class属性的时候，值是一个对象，其中的每个键值对表示某个css类样式是否加入到class中。我们给按钮绑定一个事件函数来控制标签是否包含某个样式类。
3）v-on用于绑定事件
从2）中可以看到，我们绑定点击事件使用了v-on指令。其他事件也是通过该指令来绑定。
4）v-bind和v-on的简便写法
<body> <div id="app"> <input type="button" value="切换" @click = "handlerChange"/> <div class="mdiv" :class="{active:isActive}"></div> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { img_dir: "static/xhr.png", img_msg: "小黄人", isActive: true } }, methods: { handlerChange() { this.isActive = !this.isActive; } } }) </script> </body>
v-bind:class="{active:isActive}"可以省略"v-bind"，直接写成:class="{active:isActive}"。
v-on:click="handlerChange"可以简写为@click="handlerChange"。
8.指令v-for
1）v-for遍历列表
<body> <div id="app"> <ul v-if="data.status==='ok'"> <!-- 如果status是ok则渲染ul标签，否则表示获取数据错误 --> <li v-for = "(item,index) in data.users" :key="item.id"> {{ index }}===>{{ item.id }}--{{item.name}}--{{item.age}} </li> </ul> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { data:{ status:"ok", users:[ {id:1,name:'leo',age:18}, {id:2,name:'alex',age:56}, {id:3,name:'jone',age:24}, {id:4,name:'jack',age:32} ] } } }, methods: { } }) </script>
使用v-for="item in data.users"可以遍历data.users列表中的数据。然后给每一条<li>绑定了一个key，可以使用每条数据的id绑定，也可以使用index来绑定。
如果在一个标签中出现多个指令，则v-for的优先级是最高的，因为只有先循环，才能拿到具体的值，才能够去绑定key。
注意：使用v-for循环时，一定要给标签绑定一个key属性，这样当我们的数据变化时（例如data.users），v-for就不用重新计算了，而是直接根据key来修改对应的标签即可。否则，当数据变化是，标签可能会乱。
2）v-for遍历对象
<body> <div id="app"> <div v-for="(value,key) in person"> {{ key }}---{{ value }} </div> </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data() { return { person: { name: 'alex', age: 17 } } }, methods: {} }) </script> </body>
注意，在对象的遍历中，v-for="{(value,key) in person}"，这里的value和key的位置是反的，先取到的值是value，后取到的值是key。
666
