shangrila-xiu

112
文章
101
分类
33
标签

Vue.js基础二

vue.js基础讲解（二）

vue.js的摘要，在主内容中仍然会显示，测试一下

vue.js的常用的指令：

1.v-model 通常在<input>中使用，是双向数据 绑定的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM双向绑定</title>
</head>
<body>
  <div id="box1">
  	<input v-model="myData"></input>
  	<br />
  	{{myData}}
  </div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#box1",
        data:{
           myData:welcome to learn vue   
        },
       
    });
</script>
</body>
</html>

2.v-for=”XX in Xx” 循环

3.v-on:click=”show()” 绑定事件

1
2
3
对上式的解释：绑定事件和点击事件：
      与click同样用法的还有：mouseover，       mousedown,mouseout,dblclick(双击有效)；
      show():是show方法，必须与methods一起用，且没有alert()

4.v-show=”true” 显示

​ v-show=”false” 隐藏

重点实例一：点击添加按钮后，添加一个tomato

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加一个数</title>
</head>
<body>
  <div id="box1">
    <ul>
        <li v-for="value in arr">
         	 {{value}}
        </li>
        
    </ul>
  	<button type="button" value="添加" v-on:click="add()"></button>
  </div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#box1",
        data:{
           arr: [apple,orange,pear]  
        },
        methods:{
          add:function(){
            this.arr.push('tomato');
          }  
        }
    });
</script>
</body>
</html>

angular 的常用指令:

ng-model (双向绑定)、ng-controller、ng-repeat（循环）、ng-click（点击事件）、ng-show（是否显示）
指令：扩展html标签功能，属性