vue

模板语法

Vue的使用需要先New一个Vue对象，对象内包括el，data，methods三个属性。

1
2
3
4
5
6
7
8
9
10
11
var vm = new Vue({
     el: 'body',
     data: {
      msg:'hello world',
         alexa: "10000"
     },
     methods: {
         details: function() {
             return  'Vue起步';
         }
     }

1.el：声明作用域，如body——只能作用于body的标签之内。
2.data：用于储存需要用到的数据。
3.methods：可在里面定义函数，可在html中调用此处的函数。

1
2
3
<body>
<div @click='details'>{{msg}}</div>
</body>

这个时候，div框内就会显示hello world，也就是msg变量的值（引用时需要用两个花括号符号包裹），而点击div时就会触发点击事件，调用details函数。

常用指令

v-model双向绑定数据

1
<input type="text" v-model="msg"/>   {{msg}}

此处的input用v-model绑定了msg这个变量，也就是说当input框内输入信息时，后面的msg处也会显示一样的信息。

v-for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="box">
    <ul>
         <li v-for="item in arr">
             <span>{{item.name}}</span>
             <span>{{item.age}}</span>
         </li>
     </ul>
 </div>
 <script type="text/javascript">
     new Vue({
         el:'#box',
        data(){
                arr:[
                    {"name":"xiaohong1","age":12},
                   {"name":"xiaohong2","age":12},
                     {"name":"xiaohong3","age":12},
                    {"name":"xiaohong4","age":12}
                ]
              }
   })

item为循环中的每一项，虽然html中只写了一个li标签，但是由于循环的数组中有四个元素，所以最终会有4个li标签。

v-if

v-if=”表达式”，根据表达式的结果来判断，是true则渲染元素，false则将元素注释掉

v-show显示与隐藏

v-show与v-if类似，true就渲染，但是false并不是注释掉，而是通过display:none;来将元素隐藏，如果需要来回切换，使用v-show更好。

v-once:不允许修改v-if数据

例如HTML中有如下三个标签：

1
2
3
4
5
<div id="app">
       <p v-once>{{msg}}</p>
       <p>{{msg}}</p>
       <input type="text" v-model="msg">
   </div>

在input框内输入内容后，会传到msg变量中，第二个p标签内显示的信息会随着msg发生变化，而第一个带有v-once的p标签则只会显示msg的初始值，不会随之变化。

v-text

向标签内注入数据，并且覆盖标签内的其他内容.

v-html

向标签内覆盖注入HTML内容作为其子元素。