实践Vue.js

Posted on | In | Visitors

实例

1
2
3
4
5
6
7
<div id="app"> 
</div>
<script>
  new Vue({
    el: '#app'
  })
</script>

数据

1
2
3
4
5
6
7
8
9
10
11
<div id="app"> 
	<h1>你好，</h1>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      name: 'Ray'
    }
  })
</script>

生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app"> 
	<h1>你好，</h1>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      name: 'Ray'
    },
    created: function(){
      console.log(this.name);
    },
    mounted: function(){
      console.log(this.$el);
    },
    beforeDestroy: function(){
      console.log(this.$el);
    }
  })
</script>

插值

1
1

过滤器

1
1

指令与事件

数据驱动DOM是Vue.js的核心理念

事件修饰符

stop

停止事件冒泡

capture

优先捕获事件

self

只要自己可以捕获事件，子元素无法捕获事件

once

仅捕获一次事件

prevent

阻止提交

v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div v-if="show"> 默认这一条是看得见的</div>

<div v-if="show"> 中了500万！</div>
<div v-else>谢谢惠顾！</div> 

<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>

v-for

1
2
3
4
5
6
7
8
9
10
<tr v-for="hero in heros">
	<td></td>
	<td></td>
</tr>	

<tr v-for="hero,index in heros">
    <td></td>
    <td></td>
    <td></td>
</tr>

v-html

v-pre

v-model

双向绑定

1
2
3
4
5
6
7
<input v-model="name" >
<!-- 延迟到失去焦点后绑定 -->
<input v-model.lazy="name" >

<input v-model.number="quatity" type="number">

<input v-model.trim="name" >

v-bind

绑定属性到数据

1
2
3
4
5
6
7
8
9
10
<a v-bind:href="page">http://12306.com</a>

<a :href="page">http://12306.com</a>

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

v-on

可以简写为@，例如

1
2
<button v-on:click="count">点击</button>
<button @click="count">点击</button>

click

submit

计算属性

基于computed会缓存结果，而基于method每次都会调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>$: </p>
<p>$: </p>
<p>$: </p>

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

监听属性

组件

局部组件

1
2
3
4
5
6
7
8
9
10
new Vue({
	el: '#div1',
	components:{
		'product':{
			template:'<div class="product" >abc</div>'
      	}
	}
 }

<product></product>

全局组件

1
2
3
4
5
Vue.component(
		'product':{
			template:'<div class="product" >abc</div>'
      	}
	)

属性

方法

相关书籍

《Vue.js实战》

相关网站

《Vue.js实战》源代码