一、概述

1、简介

2、说明

• 声明式渲染：就是直接告诉需要怎么渲染什么，具体怎么渲染由框架的底层来实现，而命令式的话就是需要一步一步告知如何实现；
• 渐进式：简单理解就是比较自由，代码的侵入性比较小；
• 响应式：数据发生变化，视图自动更新；
• 可复用的组件系统：方便构建完整的大型应用；

二、Vue实例

1、创建一个 vue 实例

• 创建一个 vue 实例

  var vm  = new Vue({.....})

• vue组件的本质还是一个 vue的实例，一个 todo 应用的组件树可以是这样的：

  

  根实例
  └─ TodoList
     ├─ TodoItem
     │  ├─ DeleteTodoButton
     │  └─ EditTodoButton
     └─ TodoListFooter
        ├─ ClearTodosButton
        └─ TodoListStatistics

  

2、数据与方法

• vue 实例 data 对象的属性改变会触发视图的更新；
• 响应式只对创建实例时候加入的 data 属性有效，对后面添加的属性是无效的，对于后面可能用到属性但又不确定初始值的，最好创建实例的时候加入到data属性，赋值为空即可；
• Object.freeze()会阻止修改现有的属性，也意味着响应系统无法再追踪变化；
  

  var obj = {
    foo: ‘bar‘
  }
  Object.freeze(obj)
  new Vue({
    el: ‘#app‘,
    data: obj
  })

  

• vue 内置的实例属性和方法用 $ 符号标记；
  

  var data = { a: 1 }
  var vm = new Vue({
    el: ‘#example‘,
    data: data
  })
  
  vm.$data === data // => true
  vm.$el === document.getElementById(‘example‘) // => true
  
  // $watch 是一个实例方法
  vm.$watch(‘a‘, function (newValue, oldValue) {
    // 这个回调将在 `vm.a` 改变后调用
  })

  

3、生命周期钩子

• 每个 Vue 实例在被创建时都要经过设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等一系列的初始化过程；
• 同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，简单来说这个钩子就是在vue实例的生命周期到某一阶段的时候会触发一个函数；
• 常见的钩子有：created、mounted、updated、destroyed，具体的示例如下：
  

  new Vue({
    data: {
      a: 1
    },
    created: function () {
      // `this` 指向 vm 实例
      console.log(‘a is: ‘ + this.a)
    }
  })
  // => "a is: 1"

  

4、生命周期图示

 三、模版语法

1、插值

• 插入文本：使用 v-once 指令后只能执行一次性插值，后面这个值就不会变化了

  <span>Message: {{ msg }}</span>
  <span v-once>这个将不会改变: {{ msg }}</span>

• 插入原始 html：直接使用双重的花括号会把 html 直接当普通文本解析，要用 v-html 才能正确识别

  <p>Using mustaches: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>

• 插入特性：实现了一个动态的特性，将特性的值和data属性进行了绑定

  <div v-bind:id="dynamicId"></div>

• 使用简单 js 表达式：简单的意思就是最好只用来作计算，使用三元操作之类，同时只能是一个表达式，还有就是表达式中不要访问自定义全局变量
  

  {{ number + 1 }}
  
  {{ ok ? ‘YES‘ : ‘NO‘ }}
  
  {{ message.split(‘‘).reverse().join(‘‘) }}
  
  <div v-bind:id="‘list-‘ + id"></div>

  

2、指令

• 指令简介
  • 指令 (Directives) 是带有 v- 前缀的特殊属性
  • 指令特性的值预期是单个 JS 表达式 (v-for 是例外情况)
  • 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• 指令参数
  • v-bind：href 这个冒号后面的href 就是指令参数，用于指定指令的作用对象
  • v-bind：[attrName] 可以实现动态参数，这个参数的表达式比建议写的太复杂，复杂的话直接用计算属性更好，中括号里的字符串表达式最好都小写
• 指令修饰符：其作用就是指定以某种特殊的方式进行绑定，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

  <form v-on:submit.prevent="onSubmit">...</form>

• 指令缩写：v-bind缩写就是只留一个冒号即可，v-on使用@符号代替

  <a :href="url">...</a>
  <a @click="doSomething">...</a>

   

四、计算属性与侦听器

1、计算属性

• 什么时候用计算属性：模板内的表达式是用于简单运算的，对于任何复杂逻辑，应当使用计算属性

  <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>

  

  var vm = new Vue({
    el: ‘#example‘,
    data: {
      message: ‘Hello‘
    },
    computed: {
      // 计算属性的 getter
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split(‘‘).reverse().join(‘‘)
      }
    }
  })

  
• 计算属性和方法：二者的区别在于计算属性是有缓存的，源数据没有发生改变的情况下不会再次进行计算，直接使用缓存，但是 method 每次使用都会调用方法逻辑

  <p>Reversed message: "{{ reversedMessage() }}"</p>

  

  // 在组件中
  methods: {
    reversedMessage: function () {
      return this.message.split(‘‘).reverse().join(‘‘)
    }
  }
  computed: {
    now: function () {
      return Date.now()
    }
  }

  
• 计算属性和侦听属性：某些情况侦听属性会比计算属性有更加繁杂的代码和逻辑

  <div id="demo">{{ fullName }}</div>

  

  var vm = new Vue({
    el: ‘#demo‘,
    data: {
      firstName: ‘Foo‘,
      lastName: ‘Bar‘,
      fullName: ‘Foo Bar‘
    },
    watch: {
      firstName: function (val) {
        this.fullName = val + ‘ ‘ + this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName + ‘ ‘ + val
      }
    }
  })
  
  var vm = new Vue({
    el: ‘#demo‘,
    data: {
      firstName: ‘Foo‘,
      lastName: ‘Bar‘
    },
    computed: {
      fullName: function () {
        return this.firstName + ‘ ‘ + this.lastName
      }
    }
  })

  
• 计算属性的 setter：计算属性默认只有 getter ，需要时也可以提供一个 setter 
  

  // ...
  computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ‘ ‘ + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(‘ ‘)
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
  // ...

  

2、侦听器

• 侦听器 watch 选项提供了一个更通用的方法，来响应数据的变化
• 当需要在数据变化时执行异步或开销较大的操作时，使用 watch 比较好，示例代码

五、class 和 style 绑定

1、绑定 class

• 说明：二者的本质都是用 v-bind 绑定属性，不过鉴于特殊性，进行了增强，表达式结果的类型除了字符串之外，还可以是对象或数组
• 对象语法：和原有的 class 可以共存；绑定的数据对象不一定非要写在模板里，可以在 data 里定义或者用计算属性返回一个数据对象

  <div
    class="static"
    v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"
  ></div>

  

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

  

• 数组语法：数组语法支持三元表达式，支持对象语法嵌套

  <div v-bind:class="[activeClass, errorClass]"></div>
  ----------------------------------------------------
  <div v-bind:class="[isActive ? activeClass : ‘‘, errorClass]"></div>
  <div v-bind:class="[{ active: isActive }, errorClass]"></div>

  data: {
    activeClass: ‘active‘,
    errorClass: ‘text-danger‘
  }

• 用在组件上：模版中的 class 和元素中的 class 不会相互覆盖

  <my-component class="baz boo"></my-component>
  <my-component v-bind:class="{ active: isActive }"></my-component>

  Vue.component(‘my-component‘, {
    template: ‘<p class="foo bar">Hi</p>‘
  })

   

2、绑定 style

• 对象语法
• 数组语法
• 自动添加前缀
• 多重值

六、条件渲染

七、列表渲染

八、事件处理

九、表单输入绑定

十、组件基础

Vue基础

原文：https://www.cnblogs.com/stanwuc/p/10873774.html