zxhnext
zxhnext

vue入门

1. 生命周期

我们先来看下图：


image.png

我们来解释一下上图的各个阶段：

beforeCreate: vue实例进行基础初始化时
created：实例初始化完成时
beforeMount：模板与数据结合挂载到页面之前
beforeUpdate:数据发生改变，但并未渲染之前
updated:数据发生改变，并渲染之后
mounted：页面挂载之后
beforeDestroy：组件销毁之前
destroyed：销毁组件之后

activated: keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated：keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

2. computed计算属性

计算属性在computed:{}中声明，不需要在data中声明，当data中没有时会自动来计算属性中找。写法取下：

computer: {
  aaa: {
    get:function() {
        // 读取该方法内容时
    },
    set:function(value) {
        // 设置该方法时,即给该方法重新赋值时
    }
}

3. 侦听属性

来看下watch的作用，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。来看演示代码：


    Ask a yes/no question:
    



{{ answer }}


data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
},

4. 样式绑定

方法1: 对象形式

// 当isactive为true时存在active类名



// 传入多个class


data: {
  isActive: true,
  hasError: false
}

// 绑定的数据对象不必内联定义在模板里：




data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

// 也可以在这里绑定一个返回对象的计算属性。




data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

方法2: 数组形式


data{
    isactive:"active"
}

// 动态切换



// 在数组中加入对象语法

方法3: 绑定style样式


data{
    styleObj:{
        color:"black"
    }
}



data{
    styleObj:{
        color:"black"
    }
}

// 绑定多个值的数组，这样写只会渲染数组中最后一个被浏览器支持的值

5. 条件渲染

5.1 v-if


  A




  B




  C




  Not A/B/C

如果想切换多个元素，我们使用template包裹即可

vue会复用v-if中相同的组件，如果要避免，可设置key，如下：

5.2 v-show与v-if区别

  1. v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
  2. v-show 不支持