vue

  vue 的闪烁问题

    v-cloak 指令 便可解决  须在 <style> [v-cloak]{ display:none } </style>

  计算机内存可以理解为浏览器内存,且里面是有一个虚拟的dom,是存在文档碎片里面的

  1. vue 是一个 mvvm 框架,angular 是一个 mvc 框架,vm 是 vue 的一个实例,这个实例存在计算机内存中的,第一就是绑定数据,第二就是 dom 检测

  vue.js 是封装的一个类,参数是 options 对象,最常用的属性 el:"" 指定 vue 所操作的 dom 范围,属性值是节点

  data 就是 vue 的 model ,存放数据,属性值是一个对象,和函数(组件中)

  methods:vue 的事件方法,存在这里

  2. vue 的渲染指令:v-html v-text,采用 {{}} 插值运算,里面还可以写 js 代码

  3. 条件指令 v-if = "" ,后面的值,如果是 true 节点就添加,如果是 false 节点就删除

  4. 指令 v-show = "" ,后面的值是 true ,display:block  后面的值是 false:display:none 

  5. 循环语句:v-for 数组和对象 (item,index) in arr   // item 是元素  index 是索引

  6. 节点动态属性:

    v-bind:class="a"  简写    :class="a"

  7. 节点上绑定的事件,v-on:事件名="fn()"  简写  @事件名="fn()"

    案例:点击事件

        @click = "fn()"

  8. 组件化

    vue.component()  定义组件  component这个方法是 Vue 这个类的

    全局:

      <div id = "app">

        <name></name>

      </div>

      vue.component('name',{  // 定义了组件 名字 name

        template:"<h1> hello world </h1>"

      })

      挂载组件

      var vm = new Vue({

        el:"#app"

        components:{

          name

        }

      })

  注意:1. 组件在定义的时候,有且只有一个顶层标签,而且必须有

     2. 挂载完之后,如果是单标签使用组件,组件首字母必须大写,如果是双标签,大写,小写都行

     3. id = app 中的所有节点,都是 Vue 下面对应的实例,她两是响应的

  new Vue 实例要往 app 写一个东西,给实例,创键一个组件,要通过 实例去挂载,通过实例 往 id = app 添加东西,功能及数据

  id = app 实例,编译后的结果

  new Vue 实例,是编译的过程

  数据渲染的方式:对象方式

  上面 dom 和 下面的 Vue 实例 其实是一体的

  10. 实例中的生命周期

    <div id='app'></div>  从没有东西,到最后能够显示一张完整的页面,这个由 Vue 实例实现的,载计算机内存中实现的,从创建到最后删除的整个过程,就是这个实例的生命周期

    生命周期

      created 被创建完成之后

      mounted 初始化完成之后

      updated 更新完成之后

      destroyed 删除之后

    var vm = new Vue({

      created(){},

      mounted(){},

      updated(){},

      destroyed(){}

    })

  11. 事件修饰符,事件会有事件冒泡和事件的默认行为

    vue 是阻止冒泡,在事件名后面上对应单词

    stop  阻止冒泡

    prevent  阻止默认行为

  12. 计算属性

    有时候,我们需要在模板中写一些表达式,但是这对模板来说,大多表达式,会让模板很重,性能很差,不易维护

    vue 可以通过计算属性来实现

    原理:在每次使用对象. 属性的时候,其实就是调用 get() 方法

    使用方法:  

      var vm = new Vue({

        el:"#app",

        data:{

          num:2000,

          pric:12

        },

        computed:{    // 计算属性 computed

          zongjia(){

            return this.num*this.pric

          }

        }

      })

    在 html 中调用 

    <p>{{zongjia}}</p>  // 就会得到这个数 24000 注意这里一定不能带小括号,否则就会报错

    优势:提高页面性能,使用一次之后,会自动缓存,下次使用这个属性,就不需要调用了

原文地址:https://www.cnblogs.com/shangjun6/p/11228588.html