前言：很久之前学过vue，如今开始复习，主要用于自己查看。
1.v-cloak,v-text,v-html,v-on,v-bind
<!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="./lib/vue-2.4.0.js"></script> <style> [v-cloak] { display: none; } </style></head><body> <!-- 表示vue控制id为app的部分 --> <div id="app"> <!-- 使用v-cloak解决插值表达式闪烁问题 --> <!-- 插值表达式是一个占位符，不会替换整个元素的内容 --> <p v-cloak>{{msg}}</p> <!-- v-text覆盖元素中原本的内容，没有闪烁问题 --> <h4 v-text="msg">000</h4> <!-- 渲染带有html内容，覆盖所有内容 --> <div v-html="msg2">00</div> <!-- 属性绑定指令v-bind，引号里面解析为js代码表达式,简写v-bind:为冒号：--> <input type="button" value="按钮v-bind" v-bind:title="mytitle+msg"> <!-- 事件绑定v-on --> <!-- 错误，alert是原生方法，没有在vue中定义 --> <!-- <input type="button" value="按钮v-on" v-on:click="alert('hello')"> --> <!-- 事件绑定指令v-on,简写v-on:为冒号@--> <input type="button" value="按钮v-on" @click="alert"> </div> <script> var vm = new Vue({ el: '#app',//表示new出来的vue实例，控制页面中的id名为app的html部分 data: { //data属性中，存放的是el属性用到的数据 msg: 'hello world!', msg2: '<h1>带标签的msg</h1>', mytitle: 'hello mytitle' }, methods: { alert: () => { alert('hello!') } }, }) </script></body></html>2.事件修饰符，stop,prevent,capture,self,once
<!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="./lib/vue-2.4.0.js"></script></head><body> <!-- 表示vue控制id为app的部分 --> <div id="app"> <!-- <div class="inner" @click="divclick"> --> <!-- 阻止冒泡 --> <!-- <input type="button" @click.stop="inputclick" value="input按钮"> --> <!-- </div> --> <!-- 阻止默认行为，不能跳转 --> <a href="http://www.baidu.com" @click.prevent="preventdefalut">去百度</a> <!-- 捕获触发事件，冒泡事件反过来 --> <!-- <div class="inner" @click.capture="divclick"> <input type="button" @click.stop="inputclick" value="input按钮"> </div> --> <!-- 实现点击当前元素才能触发，.self只会阻止自己身上的冒泡 --> <!-- <div class="inner" @click.self="divclick" style="width:150px;height:150px;background:pink"> <input type="button" @click="inputclick" value="input按钮"> </div> --> <!-- 只触发一次事件处理函数,意思说下面例子只能阻止默认行为一次，下次就会自动跳转 --> <a href="http://www.baidu.com" @click.prevent.once="preventdefalut">去百度</a> </div> <script> var vm = new Vue({ el: '#app',//表示new出来的vue实例，控制页面中的id名为app的html部分 data: { //data属性中，存放的是el属性用到的数据 }, methods: { divclick() { console.log('点击了div') }, inputclick() { console.log('点击了input') }, preventdefalut() { console.log('阻止默认行为') } }, }) </script></body></html>3.v-model数据双向绑定
<div id="app"> <!-- 只能应用于表单元素，实现表单中的元素和Model中的数据的双向绑定 --> <input type="text" style="width:100%" v-model="msg"> </div> <script> var vm = new Vue({ el: '#app',//表示new出来的vue实例，控制页面中的id名为app的html部分 data: { //data属性中，存放的是el属性用到的数据 msg: "这是v-model例子" }, methods: { } }) </script>4.v-on的属性绑定的使用--设置样式外联和内联
4.1绑定class属性
<!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="./lib/vue-2.4.0.js"></script> <style> .red { background-color: red; } .font-weight { font-weight: bold; } .active { font-size: 30px; } </style></head><body> <div id="app"> <!-- 1.使用数组，使用v-bind绑定，注意数组里面加上引号 --> <p :class="['red','font-weight']">这是class</p> <!-- 2.三元表达式，flag在data里面，不用加上引号 --> <p :class="['red','font-weight',flag?'active':'']">这是class</p> <!-- 3.使用对象来处理三元表达式的冗杂问题 --> <p :class="['red','font-weight',{'active':flag}]">这是我class</p> <!-- 4.直接使用对象来处理 --> <p :class="{red:flag,'font-weight':flag,active:flag}">这是对象的class</p> </div> <script> var vm = new Vue({ el: '#app',//表示new出来的vue实例，控制页面中的id名为app的html部分 data: { //data属性中，存放的是el属性用到的数据 flag: true, }, methods: { } }) </script></body></html>4.2绑定style属性
<!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="./lib/vue-2.4.0.js"></script> <style> </style></head><body> <div id="app"> <!-- 1.直接采用数组的形式 --> <p :style="msg1">这是绑定的style属性</p> <!--2.多个数组的形式 --> <p :style="[msg1,msg2]">这是绑定的style属性</p> </div> <script> var vm = new Vue({ el: '#app',//表示new出来的vue实例，控制页面中的id名为app的html部分 data: { //data属性中，存放的是el属性用到的数据 msg1: { color: 'red', 'font-weight': 800 }, msg2: { background: 'blue' } }, methods: { } }) </script></body></html>5.v-for
<body> <div id="app"> <!-- v-for普通数组 --> <!-- <p v-for="item in list">{{item}}</p> --> <!-- v-for对象数组 --> <p v-for="(item,i) in obj" :key="item.id">id是{{item.id}}---name是{{item.name}}--索引是{{i}}</p> <!-- v-for循环对象 --> <!-- <p v-for="(value,key,index) in user">value值{{value}}---key是{{key}}--索引{{index}}</p> --> </div> <script> var vm = new Vue({ el: '#app', data: { list: [0, 1, 2, 3, 4], obj: [ { id: 0, name: 'zs0' }, { id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' } ], user: { name: 'lisi', age: 23, gender: '男' } }, methods: { } }) </script></body>6.v-if和v-show
<body> <div id="app"> <input type="button" value="v-if和v-show" @click="toggle"> <!-- v-if每次都会重新删除和创建元素,较高的切换性能 --> <p v-if="flag">v-if控制元素</p> <!-- v-show不会重复进行dom操作，只会切换元素的display：none ，较高的初始渲染性能--> <p v-show="flag">v-show控制元素</p> <!-- 如果涉及到频繁的切换，不要使用v-if --> </div> <script> var vm = new Vue({ el: '#app', data: { flag: false }, methods: { toggle() { this.flag = !this.flag } } }) </script></body>