[vue] - Vue.js教程-基础

之前做过项目，一直没有总结过，现在重新看文档加深一遍~~

一、介绍

1、声明与渲染

  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2、指令

• v-if
  true是加载，false则不加载
• v-for
• v-on
  v-on:click @click
• v-model 双向数据绑定

3、vue组件

一个组件实质上也是一个vue实例
props: ['todo']

  

    //使用 v-bind 指令将 todo 传到每一个重复的组件中
    
  

--
Vue.component('todo-item', {
  //将数据从父作用域传到子组件,模板可渲染动态数据
  props: ['todo'],
  template: '
This is a todo
'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

二、Vue实例

1、构造函数创建实例

var vm = new Vue（{}）

2、属性，方法

data：{} 属性
method：{}定义方法

3、实例生命周期

• 数据检测，编译模板，挂载实例到DOM，数据变化时更新DOM
• 生命周期钩子
  created 在实例被创建之后被调用
  mounted
  updated
  destroyed 销毁实例时调用
• Vue.js没有构造器的概念
  4、生命周期图示

Paste_Image.png

三、模板语法

1、插值

1)、文本

{{}} 插值
v-once 一次性插值

This will never change: {{ msg }}

• 双大括号会将数据解释为纯文本，而非 HTML

2)、纯html

v-html 可以输出真正的 HTML

注：动态渲染的html容易导致XSS攻击，绝不要对用户提供的内容插值

3)、属性

{{}}不能在html属性中使用，得用v-bind

Button

4)、使用javascript表达式

{{ message.split('').reverse().join('') }}

注：表达式中可以访问Math、Date这样的全局变量，但不能访问用户自定义变量

2、指令

1)、参数

指令可以接受参数

2)、修饰符

. 用于指出一个指定应该以特殊方式绑定

3、Filters 过滤器

由管道符 | 表示，添加在{{}}尾部
{{ message | capitalize }}
注： Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。

过滤器函数总接受表达式的值作为第一个参数。
new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联：
{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可接受参数：
{{ message | filterA('arg1', arg2) }}
这里，字符串 'arg1' 将传给过滤器作为第二个参数， 
arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

4、缩写

v-on:click @click

四、计算属性

  
初始值: "{{ message }}"
  
计算之后的值: "{{ reversedMessage }}"


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //声明计算属性
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage 的值始终取决于 vm.message 的值

• 计算属性 和 Methods 比较
  计算属性是基于它的依赖缓存，只要message不发生改变，那计算属性必然也不会改变，计算属性不会总执行。
  相比而言，每当重新渲染的时候，method 调用总会执行函数
• 计算属性 和 Watched Property 比较
  $watch： 用于监听vue实例的数据变动
  
  {{ fullName }}

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: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {  // setter
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

• 观察watchers
  用途：在数据变化响应时，执行异步操作或开销较大的操作时
  watch示例
  使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。

五、具体指令详解

1、class

1)、对象语法

• 对象，可以多个属性

• 直接绑定data中的一个对象

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)、数组语法

v-bind:class="[activeClass, errorClass]"
v-bind:class="[isAc ? acClass : '', eClass]"

当有多个条件 class 时可以在数组语法中使用对象语法
 v-bind:class="[{ active: isActive }, errorClass]"

3)、用在组件上

Vue.component('my-co', {
  template: '
Hi
'
})
//这些类将被添加到根元素上面 

Paste_Image.png

2、style

1)、对象语法,数组语法

//绑定到一个样式对象通常更好

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

3、条件渲染（v-if /v-show）