<h1 id="一什么是vue">一、什么是vue
<h3 id="是一个mvvm模型的js框架m---model-v---view">是一个mvvm模型的js框架（m--->model v--->view）
<h3 id="model本质上来说就是数据">model本质上来说就是数据
<h3 id="view就是视图及最终展现给客户的页面">view就是视图（及最终展现给客户的页面）

• mv model --->view(由数据驱动视图)
• vm view --->model(由视图通过事件更新数据)vue的初体验

• 1、简单上手容易
• 2、比较的轻量级（相对于AngularJs、ReatJs）

• 3、组件齐全，文档便于阅读

• 绑定标签的内容，如果变量中有特殊字符，会进行转义直接以字符串的形式输出到标签中

  

浏览器显示

• 绑定标签内容，变量中的内容不会进行转义

  

  浏览器展示

  

• v-if="value"
• value Boolean true/false
• 控制元素的显示与隐藏

  

• 控制元素的显示与隐藏

• v-if是动态的向DOM树内添加或者删除DOM元素；

• v-show是通过设置DOM元素的display样式属性控制显隐；

• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

• v-show只是简单的基于css切换

• v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载）；

• v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

• v-if有更高的切换消耗；

• v-show有更高的初始渲染消耗；

• v-if适合运营条件不大可能改变

• v-show适合频繁切换；

• 渲染数组 v-for="item in arr"

• 渲染对象 v-for="item in obj"

  

  浏览器显示

  

• 为标签绑定属性

  

    new Vue({
       el:".box",data:{
          src:"img/1.jpg
       }
    })
    

v-bind指令绑定元素的属性

html结构

vue对象

new Vue({
    el: ".box",data: {
        styleObj: {
            width: "200px",height: "200px",backgroundColor: "green",color: "yellow"
         }
      }
 })

• html结构

• vue对象

    new Vue({
        el:".box",methods:{
            myclick:function(){
            }
        }
    })

• html结构

    //官方推荐事件绑定用简写形式

• vue对象

    new Vue({
        el:".box",methods:{
            myclick:function(){
            }
        }
    })

• 可以绑定事件类型：@click/mouSEOver/mouSEOut/keydown/keyup...

• 所有的键盘事件keydown/keyup/keypress

• vue内置事件对象

    new Vue({
        el:".box",methods:{
            input:function(ev){
            }
        }
    })

• vue自带的键盘事件名
• keyup.left/right/up/down
• keydown.left/right/up/down
• keypress.left/right/up/down

• 自定义键盘按下事件修饰符

    Vue.config.keyCodes = {
          zero:48
    }
  <input type="text" @keydown.zero="input" />

• prevent/stop/self/once
• prevent 阻止事件的默认行为
• stop 阻止事件冒泡

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!