vue学习
vue之helloword：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue学习</title> 6 <script src="js/vue2.6.js" type="text/javascript"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <input type="text" v-model="message"> 12 <br> 13 <span>{{message}}</span> 14 </div> 15 16 <script type="text/javascript"> 17 new Vue({ 18 el:'#app', 19 data:{ 20 message:'学习vue' 21 } 22 }); 23 </script> 24 </body> 25 </html>
vue模板语法：
v-once一次性插值
1 <span v-once>{{message}}</span>
原始html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue学习</title> 6 <script src="js/vue2.6.js" type="text/javascript"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <input type="text" v-model="message"> 12 <br> 13 <span>{{message}}</span> 14 <br> 15 <span v-html="message"></span> 16 </div> 17 18 <script type="text/javascript"> 19 new Vue({ 20 el:'#app', 21 data:{ 22 message:'<h1>学习vue</h1>' 23 } 24 }); 25 </script> 26 </body> 27 </html>
v-bind:id
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue学习</title> 6 <script src="js/vue2.6.js" type="text/javascript"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <input type="text" v-model="message"> 12 <br> 13 <span v-bind:id="testId">id是什么？</span> 14 </div> 15 16 <script type="text/javascript"> 17 new Vue({ 18 el:'#app', 19 data:{ 20 message:'<h1>学习vue</h1>', 21 testId:'id1101' 22 } 23 }); 24 </script> 25 </body> 26 </html>
v-bind:disabled
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue学习</title> 6 <script src="js/vue2.6.js" type="text/javascript"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <input type="text" v-model="message"> 12 <br> 13 <button v-bind:disabled="disabledFlag">disabled禁用按钮</button> 14 </div> 15 16 <script type="text/javascript"> 17 new Vue({ 18 el:'#app', 19 data:{ 20 message:'<h1>学习vue</h1>', 21 testId:'id1101', 22 disabledFlag:true 23 } 24 }); 25 </script> 26 </body> 27 </html>
js表达式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue学习</title> 6 <script src="js/vue2.6.js" type="text/javascript"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <span>{{num+1}}</span> 12 <br> 13 <span>{{age>=18? '已满18岁':'未满18岁'}}</span> 14 <br> 15 <span>{{msg.split('.').reverse().join('-')}}</span> 16 </div> 17 18 <script type="text/javascript"> 19 new Vue({ 20 el:'#app', 21 data:{ 22 num:12, 23 age:13, 24 msg:'192.168.1.1' 25 } 26 }); 27 </script> 28 </body> 29 </html>
v-bind:href
1 <div id="app"> 2 <a v-bind:href="testUrl">百度</a> 3 </div> 4 5 <script type="text/javascript"> 6 new Vue({ 7 el:'#app', 8 data:{ 9 testUrl:'http://www.baidu.com' 10 } 11 }); 12 </script>
v-on:click事件绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue学习</title> 6 <script src="js/vue2.6.js" type="text/javascript"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <a v-bind:href="testUrl">超链接</a> 12 <a :href="testUrl">超链接v-bind缩写</a> 13 <button v-on:click="testFun">事件绑定</button> 14 <button @click="testFun">事件绑定v-on缩写@</button> 15 </div> 16 17 <script type="text/javascript"> 18 new Vue({ 19 el:'#app', 20 data:{ 21 testUrl:'http://www.baidu.com' 22 }, 23 methods:{ 24 testFun:function(){ 25 alert(2333); 26 } 27 } 28 }); 29 </script> 30 </body> 31 </html>
条件渲染v-if
