VUE.JS学习笔记

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>