vue学习总结(一)

html部分:
  {{ xxx }} 插值表达式:存在闪烁问题,但不会覆盖元素中原本的内容
  v-cloak:解决插值表达式闪烁的问题
  v-text:没有闪烁问题且覆盖元素中原本的内容,内容当作字符串显示
  v-html:没有闪烁问题且覆盖元素中原本的内容,内容当作html显示
  v-bind:Vue提供的属性绑定机制  缩写是 :
  v-on: Vue提供的事件绑定机制  缩写是 @
  v-model:可以实现表单元素和 Model 中数据的双向绑定,只能运用再表单元素中

js部分:
  new Vue({ }):创建一个Vue实例
  el : '  '  :绑定Vue的使用范围DOM
  data : {  } :展示的数据
  methods : {  } :调用的方法
  this:如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名  或  this.方法名来进行访问,这里的this,就表示 我们 new 出来的 VM 实例对象
  filters : {  }:定义私有过滤器

Vue指令值v-for:
  迭代数组:<p v-for="(item, i) in list">{{ i }}----{{ item }}</p>
  迭代对象数组,i 为索引:<p v-for="(item, i) in list">{{ i }}----{{ item.id }}----{{ item.name }}</p>
  循环对象属性,将属性打印,i 为索引:<p v-for="(value, key, i) in user">{{ key }}----{{ value }}----{{ i }}</p>
  迭代数字,注意:如果使用v-for迭代数字的话,count从 1 开始:<p v-for="count in 10">这是第 {{ count }} 次循环</p>
  v-if:每次都会重新删除活创建元素,有较高的切换性能消耗

  v-show:每次不会重新进行DOM的删除和创建操作,只会切换元素的 display:none样式,有较高的初始渲染消耗

vue的其他属性:

  创建一个vue对象  var vm = new Vue({

    el:"#app",

    data:{},

})

vm.$el:挂载vue实例
vm.$nextTick :渲染完成以后执行

  vm.$nextTick(function(){
    console.log("渲染完成")
  })

vm.$mount :等同于实例中的el属性
  必须在脚手架的情况下才能正常使用

 

posted @ 2020-03-11 19:01  你可以这样称呼我  阅读(...)  评论(...编辑  收藏