zoukankan      html  css  js  c++  java
  • 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属性
      必须在脚手架的情况下才能正常使用

  • 相关阅读:
    hdoj 4251 The Famous ICPC Team Again
    hdoj 1879 最小生成树之继续畅通工程
    并查集之Dragon Balls
    并查集之 Is It A Tree?
    hdoj 1874最短路之畅通工程续
    1040: Count
    hdoj 1874最短路之最短路径问题
    并查集之小希的迷宫
    并查集之食物链
    Ordered Fractions
  • 原文地址:https://www.cnblogs.com/blogzzy/p/12464680.html
Copyright © 2011-2022 走看看