一:vue实例
1.实例
新建项目:
2.程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <!-- 第一个vue示例 --> 12 <div id="app"> 13 <p>{{msg}}</p> 14 </div> 15 <script> 16 // 创建vue实例 17 var vm = new Vue({ 18 el: '#app', 19 data: { 20 msg: 'hello vue!' 21 } 22 }); 23 </script> 24 </body> 25 </html>
效果:
二:知识点
1.v-cloak解决插值闪烁问题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 [v-cloak] { 10 display: none; 11 } 12 </style> 13 14 </head> 15 <body> 16 <!-- 解决插值表达式闪烁问题 --> 17 <div id="app"> 18 <p v-cloak>{{msg}}</p> 19 </div> 20 21 <script src="./lib/vue-2.4.0.js"></script> 22 <script> 23 var vm = new Vue({ 24 el: '#app', 25 data: { 26 msg: 'hello vue!' 27 } 28 }); 29 </script> 30 </body> 31 </html>
2.v-text与插值表达式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <p v-text="msg"></p> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!' 25 } 26 }); 27 </script> 28 </body> 29 </html>
效果:
区别:
v-text默认没有闪烁问题的
插值表达式可以在前后放其他的内容
v-text会覆盖元素中原本的内容,插值表达式只会替换自己的占位符,不会把整个元素的内容进行清空
3.v-html渲染html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <p v-html="msg2"></p> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!', 25 msg2:'<h1>这是一个H标签</h1>' 26 } 27 }); 28 </script> 29 </body> 30 </html>
效果:
4.v-bind:绑定属性指令
其中,在v-bind后的mytitle被认为是一个变量,然后可以进行表达式运算
可以被简写为:title="mytitle"。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <input type="button" value="按钮" v-bind:title="mytitle"> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!', 25 mytitle:'自定义属性' 26 } 27 }); 28 </script> 29 </body> 30 </html>
效果:
5.v-on:事件机制
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <input type="button" value="按钮" v-on:click="show"> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!' 25 }, 26 methods:{ 27 show:function(){ 28 alert("hello on"); 29 } 30 } 31 }); 32 </script> 33 </body> 34 </html>