Vue笔记

vue实例

var data = {a: 1}
var vm = new Vue({
  el: '#app',
  router,
  data: data,
  components: {App},
  template: ''
})
vm.a = 5
console.log(vm.a === data.a)

• 传进去的数值与外面的数值一直相等
• 在外面添加的属性不会随之改变
• 使用Object.freeze(obj)后在传进去的值不会被绑定
• 前面带有$的函数一般是vue的属性或方法
  vm.$data //传进去的data vm.$el //组件的根节点 vm.$watch('a', function (newValue, oldValue) {}) //数据a改变之后触发的回调函数，不要使用剪头函数

生命周期

• beforeCreate、created
• beforeMount、mounted
• beforeUpdate、updated
• beforeDestroy、destroyed

---

模板语法

• Message: {{ msg }}
• 只渲染一次{{ msg }}
• 输出html代码：

  Using v-html directive:

• v-bind可以使用简单表达式，也可以为元素指定属性，如...或...
• 也可以使用修饰符：
  ...
• 缩写： v-bind=>: , v-on=>@

---

计算属性

• 可以理解为一个内部的方法，可以随时改变传入的data值
• 计算属性写在computed方法中

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

• 计算属性使用缓存，方法不使用缓存，方法写在methods中
• 进行较大的开销的时候将函数写在watch中，可以理解为自动节流函数

---

class与style绑定

• 使用v-bind控制class，v-bind中可以是一个数组，在data中指定数据，经常与计算属性连用
• 会讲组件里面和外面的class属性一起添加
• 使用v-bind也可以绑定内联属性，会自动添加浏览器前缀

---

条件渲染

• 通过v-if控制元素是否显示，v-else必须紧跟在v-if的后面，也可以使用v-else-if
• 也可以使用v-show,他不会在DOM中删除元素，只是控制元素不显示
• v-for 具有比 v-if 更高的优先级。

---

列表渲染

• 用v-for渲染列表，需要使用v-for="item in [array]"语法
• 可以使用v-for="(item, index) in [array]"将数组的键名也加上
• 如果是对象的话，使用v-for=value in [object]
• 可以使用v-for="(value, key, index)in object"获取键名和序号
• 使用push, pop, shift, unshift, splice, sort, reverse方法更改数组时，vue会自动监测并重新渲染
• 使用索引直接设置和修改数组长度不会检测并渲染
• 使用对象时，vue不会检测对象属性的添加或删除，但是可以使用Vue.set(object, key, value)为对象添加属性
• 不使用计算属性更改数组，应该使用方法
• 截取一段范围的v-for:{{ n }}
• v-for 的优先级比 v-if 更高

---

事件处理

• 使用v-on监听DOM事件，事件的处理方法写在method中
• 可以将$event作为参数传给方法，方法中可以调用原声事件对象
• 使用修饰符达到一些目的：
  • .stop阻止单击事件继续传播
  • .prevent提交事件不再重载页面
  • .capture添加事件监听器时使用事件捕获模式
  • .self只处理自己触发的事件
  • .once处理事件只进行一次
  • .passive只要触发事件，立刻执行，不等事件完成
  • 使用的时候要注意顺序，可以串联使用
• 按键修饰符
  • 可以使用.+数字，还有一些常用的按键
  • .enter, tab, delete, esc, space, up, down, left, right
  • 可以通过config.keyCodes设置按键别名
  • and so on ...不太常用

---

表单输入绑定

• 使用model绑定表单元素，初始值为传入的data
• 多个复选框应该绑定到同一个数组中
• 多个单选按钮绑定到同一个变量中
• 下拉框应该加一个禁用的请选择，以兼容ios
• .lazy将每次都改变的model值设置为change
• .number将用户输入的值转为数值
• trim自动过滤首位空白字符

---

组件

• 全局注册组件Vue.component('my-component', {})
• 局部注册

var Child = {
  template: '
A custom component!
'
}

new Vue({
  // ...
  components: {
    //  将只在父组件模板中可用
    'my-component': Child
  }
})

• 组件的data必须是函数
• 在一些规定内部标签的标签中使用来使用组件
• 尽量使用字符串模板：
• 使用props接收父元素传入的数据，传入的数据可以是一个数组或者对象
• 父组件通过v-bind绑定传值，子组件不应该修改传入的props

Prop验证

props: {
    propA: Number, //基础类型检测
    required: true,  
    type: Object,
    default: 1,
    validator: function(value){} //自定义验证
}

• type的值可以是String,Number,Boolean,Function,Object,Array,Symbol,也可以用instanceof检测
• 先进行props检测，在进行组件注册

自定义事件

子组件给父组件传值

• 父组件在使用子组件的时候绑定触发函数，将这个触发函数写进自己的方法中，子组件也可以有自己的方法
• 父组件在调用子组件中写@[方法名]=[方法值],子元素触发在触发事件中写this.emit([方法名], '传递的数据')
• .native给组件的跟元素加原生事件

非父子组件的通信

• A组件：bus.$emit('id-selected', 1)
• B组件：bus.$on('id-selected', function (id) { // ... })

插槽分发内容

• 单个插槽

  如果父组件使用子组件，并在子组件中还加入了其他元素，那么应该在子元素中加入slot元素，如果父组件没有加入其他内容，那么将渲染slot中的html片段，如果加入了其他内容，则渲染其他内容。

• 具名插槽

  如果父组件添加了两个slot元素，父组件通过slot=[名]指定子组件渲染的位置。子组件通过name=[名]来确认渲染位置。

• 作用于插槽

  文档截图

动态组建

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

上述代码可以从当前代码选择一个子元素渲染，也可以直接用在组件对象上面

var Home = {
  template: '
Welcome home!
'
}

var vm = new Vue({
  el: '#example',
  data: {
    currentView: Home
  }
})

如果在外层家一个keep-alive元素，则在切换当前的子元素后，前一个子元素不会被清楚，而是放在内存中，可以保留他的状态或避免重新渲染。

杂项

• 写组件的时候想好以后要不要进行复用
• 进行使用v-bind和v-on的简写:和@
• 给子组件加ref属性后可以使用父组件.ref属性值来调用子组件，当ref和v-for一起使用时，获取到的将是一个数组