快速入门--Vue基本知识

1声明周期:

created:实例创建完成后调用,这个阶段完成了数据监测等,但是还没有完成挂载,$el还不可以用,一般用来做数据初始化

mounted:$el挂载之后,一般我们第一个业务逻辑会从这里开始

beforeDestroy:实例销毁之前,主要是解绑一些监听事件

2 v-pre跳过这个元素和子元素不编译,例如:

<span v-pre>{{这里的内容是不会被编译的}}</span>

3 computed与methods的区别:

计算属性是基于它的依赖缓存的.一个计算属性所依赖的数据发生变化时,它才会重新取值,而methods在数据重新渲染的时候就会被调用

举个例子:

<div id="app">
  <!-- 每次点击时，显示的时间都不同 -->
  <button @click="showMethod">methodsNow</button>

  <!-- 每次点击时，显示的时间都相同 -->
  <button @click="showComputed">computedNow</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods:{
    methodsNow: function(){
      return new Date().toLocaleString();
    },
    showMethod: function() {
         alert(this.methodsNow());
    },
    showComputed: function() {
         alert(this.computedNow);
    }
  },
  computed:{
    computedNow: function(){
      return new Date().toLocaleString();
    }
  }
})

因为数据没有变化,所以计算属性没有重新执行,而点击按钮调用methods.使用计算属性还是方法取决于是否需要缓存,当遍历大数组时,一般用计算属性.

4 基本指令:

4.1v-cloak:

v-cloak是不需要表达式,它会在Vue实例结束编译的时候从绑定的HTML中移除,一般是和display:none一起使用,举个例子:

<div id='app' v-cloak>

    {{message}}

</div>

虽然已经加了v-cloak,但是当网速比较慢的时候,vue.js还没有加载完的时候,会在页面上显示{{message}},直到vue被编译结束时才会被替换,这个时候我们要和display:none一起使用:

[v-cloak]{

    display:none

}

4.2 v-if条件语句:

<div id='app'>

    <p v-if="status===1">当    status===1时这一行显示出来</p>

</div>

当有多行元素时,用<template>举个例子:

<div id='app'>

    <template v-if="status===1">

         <p>要显示的信息</p>

         <p>要显示的信息</p>

         <p>要显示的信息</p>

     </template>

</div>

v-show 当条件为真的时候显示:

<div id='app'>

    <p v-show="status===1">当    status===1时这一行显示出来</p>

</div>

v-show和v-if的区别

    首先v-show不允许用template

    其次,v-if当条件为真的时候才会编译,但是v-show无论条件是不是真,都会编译,只是不渲染,当频繁的切换条件的时候应该选择v-show,因为v-if切换的开销会更大