vue基础

基础

指令

  • v-text
  • v-html
  • v-for
  • v-if
  • v-else
  • v-show
  • v-cloak
  • v-on
  • v-bind

这里就不多赘述了,可以上官网查看,下面有些例子会用到,有些不会用到。

计算属性(computed):

  • 会有缓存,不修改依赖的变量时不会进行重新计算,只有修改了依赖的变量才会重新计算,效率更高
  • 每一个计算属性有get和set两个方法

监听器(watch):

  • 类似计算属性,也会有缓存,但是语法和computed相比会复杂很多

动态绑定class和style

class:
  • 对象
    :class="{class名: boolean值}"
  • 数组
    :class="[data中的值, {class名: boolean值}, data中的值]"
style:

也有对象和数组的区分,都是根据data中数据进行渲染style

条件渲染

  • 如果重复修改的话使用v-show效率更高
  • v-if和v-else必须在一起
  • 如果有重复的input需要不同的渲染,可以添加key去进行区分

列表渲染

  • 给v-for循环添加key,增加效率
  • 改变数组内容指定的方法才有效,直接操作下标数据会变,但是不会重新渲染页面
    • push
    • pop
    • shift
    • unshift
    • splice
    • sort
    • reverse
  • 修改数据内容还可以直接修改数组的引用也可以直接改变数据的值

组件

非父子组件之间的传值

  • vuex
  • 观察者模式/发布订阅模式/bus/总线




    
    非父子组件之间的传值
    




    

插槽

  • slot
  • slot-scope
Vue.component('child', { data: function () { return { list: [{ id: 1, name: 'shi' }, { id: 2, name: 'yan' }, { id: 3, name: 'ping' }] } }, template: `
` }) var vm = new Vue({ el: "#container" })

动态组件与 v-once 指令

动态组件

v-once

只渲染一次,后续的从内存中取,可以有效的优化渲染性能





    
    动态组件与 v-once 指令
    




    

这些只是在自己学习中部分的案例和基础,官网的例子很好,有不懂的可以上官网上查看 vue官网

你可能感兴趣的:(vue基础)