vue.js学习

Posted on | In |

how2j

1.简介及示例说明

  • 以前js/jquery取得数据 需要显式操作html dom 把数据显示上去
  • vue 直接建立元素的id与数据的关联 不用显式操作html dom
  • 以前
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="div1">

</div>

<script>

//准备数据
var gareen = {"name":"盖伦","hp":616};

//获取 html dom
var div1 = document.getElementById("div1");

//显示数据
div1.innerHTML= gareen.name;

</script>
  • 现在
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

  {{gareen.name}}

</div>

<script>

//准备数据
var gareen = {"name":"盖伦","hp":616};

//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#div1',
      data: {
        message: gareen
      }
    })

</script>

2.监听事件

2.1 v-on监听事件

  • eg:点击次数
  • el 对应关联id data id所在内部数据 method 方法 里面的count对应v-on:click=”count”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

  <div>一共点击了  {{clickNumber}}次</div>
  <button v-on:click="count">点击</button>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          clickNumber:0
      },
      methods:{
          count: function(){
              this.clickNumber++;
          }
      }
    })

</script>

2.2 v-on 缩写为 @

  • v-on:click=”count” ==@click=”count”

2.3 事件修饰符

  • .stop .prevent .capyure .self .once

2.4 冒泡这件事

  • 在content块中设置doc的点击事件 所点的块-> 到它的父块 事件都会响应
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
<div id="content">
    <div id="grandFather"  v-on:click="doc">
        grandFather
        <div id="father" v-on:click="doc">
            father
            <div id="me" v-on:click="doc">
                me
                <div id="son" v-on:click="doc">
                son
            </div>
            </div>
        </div>
    </div>

</div>

<script>
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

2.5 事件修饰符 阻止冒泡

  • 所点击的块 不会冒泡
    1
    <div id="me" v-on:click.stop="doc"></div>

2.6 事件修饰符 优先触发 .capture

  • 在content对doc监听 .capture 优先触发
1
<div id="father" v-on:click.capture="doc">

2.7 事件修饰符 只有自己能触发，子元素无法触发.self

  • 破坏冒泡
1
<div id="father" v-on:click.self="doc">

2.8 事件修饰符 只能提交一次 .once

  • 触发一次 冒泡结构仍在(点击第二次 其父块依然触发)
1
<div id="father" v-on:click.once="doc">

2.9 事件修饰符 阻止提交 .prevent

  • 只有超链和form这种会导致页面刷新的操作
  • 两种方式
1
2
<form @submit.prevent="jump" action="http://12306.com">
<form @submit.prevent action="http://12306.com">
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
34
35
36
37
38
39
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

  <a href="http://12306.com" @click="jump" >正常的链接 http://12306.com</a>

  <br>
  <a href="http://12306.com" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a>
  <br>
  <a href="http://12306.com" @click.prevent >纯prevent之后的链接 http://12306.com</a>

  <br>
  <br>
  <form @submit="jump" action="http://12306.com">
    <button type="submit">正常的form</button>
  </form>
  <form @submit.prevent="jump" action="http://12306.com">
    <button type="submit">prevent jump()之后的form</button>
  </form>
  <form @submit.prevent action="http://12306.com">
    <button type="submit">纯prevent之后的form</button>
  </form>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
      },
      methods:{
          jump:function(){
              alert("jump()函数被调用");
          }
      }
    })

</script>

3.条件语句

3.1 v-if

  • 通过v-if 语句，当show 是true的时候，显示当前元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

  <button v-on:click="toggle">切换隐藏显示</button>
  <div v-if="show"> 默认这一条是看得见的</div>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          show:true
      },
      methods:{
          toggle: function(){
              this.show=!this.show;
          }
      }
    })

</script>

3.2 v-else

  • v-if v-else 需同在 一个与vue关联的块内
1
2
<div v-if="show"> 中了500万！</div>
  <div v-else>谢谢惠顾！</div>
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

  <button v-on:click="moyiba"> 摸一把彩票 10%的几率，建议一边点击一边心里默数，多少次了,站长表示最多点了40次才中奖，妈蛋~ </button>
  <div v-if="show"> 中了500万！</div>
  <div v-else>谢谢惠顾！</div>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          show:false
      },
      methods:{
          moyiba: function(){
             this.show=Math.random()<0.1
          }
      }
    })

</script>
```  

### 3.3 v-else-if == else if
- v-if v-else 需同在 一个与vue关联的块内

```java
<div v-if="number>98"> 神仙</div>
  <div v-else-if="number>95"> 国家领导人</div>
  <div v-else-if="number>90"> 大富商</div>
  <div v-else-if="number>80"> 大企业主</div>
  <div v-else-if="number>70"> 演艺明星</div>
  <div v-else-if="number>60"> 小企业主</div>
  <div v-else-if="number>50"> 普通公务员</div>
  <div v-else-if="number>40"> 小个体户</div>
  <div v-else-if="number>30"> 血汗工厂工人</div>
  <div v-else-if="number>20"> 偏远山区农民</div>
  <div v-else> 流浪汉</div>
```  

```Java
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

  <button v-on:click="toutai"> 看看下辈子投胎是做什么的 </button>
  <div v-if="number>98"> 神仙</div>
  <div v-else-if="number>95"> 国家领导人</div>
  <div v-else-if="number>90"> 大富商</div>
  <div v-else-if="number>80"> 大企业主</div>
  <div v-else-if="number>70"> 演艺明星</div>
  <div v-else-if="number>60"> 小企业主</div>
  <div v-else-if="number>50"> 普通公务员</div>
  <div v-else-if="number>40"> 小个体户</div>
  <div v-else-if="number>30"> 血汗工厂工人</div>
  <div v-else-if="number>20"> 偏远山区农民</div>
  <div v-else> 流浪汉</div>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          number:0
      },
      methods:{
          toutai: function(){
             this.number=Math.random()*100
          }
      }
    })

</script>

4.循环语句

4.1 v-for

  • 遍历数据用的 
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
}
table{
    border-collapse:collapse;
    width:300px;
}
tr.firstLine{
    background-color: lightGray;
}
</style>

<div id="div1">

    <table align="center" >
        <tr class="firstLine">
            <td>name</td>
            <td>hp</td>
        </tr>

        <tr v-for="hero in heros">
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>

    </table>

</div>

<script>

var data = [
          {name:"盖伦",hp:341},
          {name:"提莫",hp:225},
          {name:"安妮",hp:427},
          {name:"死歌",hp:893}
    ];
new Vue({
      el: '#div1',
      data: {
          heros:data
      }
    })

</script>

4.2 index用法

  • 通过如下方式可以获取遍历下标

4.3 纯数字遍历

5.属性绑定

5.1 v-bind

  • 通过v-bind进行属性绑定 eg：绑定vue中的url数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">
    <a v-bind:href="page">http://12306.com</a>
</div>

<script>

new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })

</script>

5.2 v-bind:href 简写成 :href

6.双向绑定

6.1 v-model双向绑定

  • 把视图上的数据放到Vue对象上去
  • nput里面的值发生变化的时候，就会自动把变化后的值，绑定到Vue对象上去
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

    hero name: <input v-model="name" >
    <button @click="doClick" >提交数据</button>

</div>

<script>

new Vue({
      el: '#div1',
      data:{
        name:"teemo"
      },
      methods:{
          doClick:function(){
              alert(this.name);
          }
      }
    })

</script>

6.2 各种风格的数据绑定

6.3 修饰符

  • .lazy .number .trim

6.4 .lazy

  • 上面输入案例：输入元素，默认的行为方式是一旦有数据变化，马上进行绑定
  • 加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了
  • v-model.lazy=”数据对象”

6.4 .number

  • 拿到了数据需要进行数学运算， 为了保证运算结果，必须先把类型转换为number类型
  • v-model.number=”默认String对象”

6.5 .trim

  • 去掉前后空白？ 不懂
  • v-model.trim=”数据对象”

7.计算属性

7.1 computer

  • 不用computer 运算代码块杂乱 管理起来麻烦
  • computer就是把运算代码统一管理
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;

}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>

<div id="div1">

    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>      
        <tr>
            <td align="center" colspan="2">
            汇率： <input type="number" v-model.number="exchange" />
            </td>
        </tr>

        <tr>

            <td align="center">
                ￥: <input type="number" v-model.number = "rmb"  />
            </td>
            <td align="center">
                $: {{ rmb/exchange }}
            </td>
        </tr>
    </table>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0
      }
    })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
            <td align="center">
                $: {{ dollar }}</td>

<script>

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0
      },
      computed:{
          dollar:function() {
              return this.rmb / this.exchange;
          }
      }
    })

</script>

7.2 method 也能达到一样的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
            <td align="center">
                $: {{ getDollar() }}
            </td>
        </tr>
    </table>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0
      },
      methods:{
          getDollar:function() {
              return this.rmb / this.exchange;
          }
      }
    })

</script>