2018-05-02 Vue入门

1. 安装

2. 介绍

1. 声明式渲染

• v-bind 、 简写 :（一个冒号）

  

    {{ message }}
  

  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  

这样{{ message }}就被替换成Hello Vue!

2. 条件与循环

• v-if
• v-for

  

    
现在你看到我了

    

      

        {{ todo.text }}  //页面会显示三个li
      
    
  

可以用app2.todos.push({ text: '新项目' })添加

3. 事件监听

• v-on: 、简写 @
• v-model

  
{{ message }}
  逆转消息
    //缩写 @click="......"

  
  //改input里的值同时可以改message

3.Vue实例

1. 创建vue实例

let vm = new Vue({})

2. 使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

  
{{ foo }}
  
  Change it

3. 钩子
   created:在一个实例被创建之后执行代码

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

   还有mouted,updated,destroyed，生命周期钩子的 this 上下文指向调用它的 Vue 实例。
   不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())，不然可能会导致this出错

4. 模版语法

1. v-once，一次性插值

这个将不会改变: {{ msg }}

但请留心这会影响到该节点上的其它数据绑定

2. v-html
   data.rawHtml === hi
   

   {{ rawHtml }}

   显示在页面中是hi。
   要加上
   ，页面才会显示html内容。
   但是你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。所以绝不要对用户提供的内容使用插值。

修饰符

...

意思就是event.preventDefault()

5. 组件

6. 计算属性

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

计算属性的功能也可以用methods代替，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，不会再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
watch:当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是 watch

{{ fullName }}

7. class与style绑定

//如果isActive为真，则class存在

2. v-bind:class也可以和普通class并存，而且也可以绑定一个对象

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

3. 更可以绑定一个返回对象的计算属性

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

4. 数组语法

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

5. 对象语法

8. 绑定内联样式

1. 对象语法

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

2. 数组语法

9. 条件渲染

• v-if
  若想一次性切换多个元素

  用一个template包裹，这样最终渲染结果不包含