1.渲染
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>vue</title> 7 <script src="vue.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 {{message}} 13 </div> 14 </body> 15 16 <script> 17 var app = new Vue({ 18 el:'#app', 19 data:{ 20 message:'hello' 21 } 22 }) 23 </script> 24 25 </html>
2.绑定元素属性
v-bind:属性=
1 <body > 2 <div id="app" v-bind:title='title'> 3 {{message}} 4 </div> 5 </body> 6 7 <script> 8 var app = new Vue({ 9 el:'#app', 10 data:{ 11 message:'hello', 12 title:'hello' 13 } 14 })
3.条件渲染
v-if=’属性名‘ （ture/false
v-show （css隐藏
1 <body > 2 <div id="app" v-if='welcome'> 3 {{message}} 4 </div> 5 </body> 6 7 <script> 8 var app = new Vue({ 9 el:'#app', 10 data:{ 11 message:'hello', 12 welcome:false 13 } 14 }) 15 </script>
4.用户输入
1 <body > 2 <div id="app" v-if='welcome'> 3 {{message}} 4 <button v-on:click='logMessage'>按钮</button> 5 <input v-model='message' type="text"> 6 7 </div> 8 9 </body> 10 11 <script> 12 var app = new Vue({ 13 el:'#app', 14 methods:{ 15 16 logMessage(){ 17 console.log(this.message); 18 } 19 20 }, 21 data:{ 22 message:'hello', 23 welcome:true 24 } 25 }) 26 </script>
5.循环渲染
1 <body> 2 <div id="app"> 3 <ol> 4 <li v-for="comment in comments"> 5 {{comment.comment}} 6 </li> 7 </ol> 8 </div> 9 </body> 10 11 <script> 12 var app = new Vue({ 13 el:'#app', 14 data: { 15 comments:[ 16 { comment:'123'}, 17 { comment:'456'}, 18 { comment:'789'} 19 ] 20 } 21 }) 22 </script>
6组件
可以把应用的不同部分定义成组件，更好重复的使用
1 <body> 2 <div id="app"> 3 <ol> 4 <comment 5 v-for="comment in comments" 6 v-bind:comment="comment"> 7 </comment> 8 </ol> 9 </div> 10 </body> 11 12 <script> 13 //组件名 14 Vue.component('comment',{ 15 //该组件的属性 16 props:['comment'], 17 //模板 18 template:'<li>{{comment.content}}</li>' 19 }) 20 21 var app = new Vue({ 22 el:'#app', 23 data: { 24 comments:[ 25 { content:'123'}, 26 { content:'456'}, 27 { content:'789'} 28 ] 29 } 30 }) 31 </script>