Let's VUE[1]-白红宇

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

指令

v-bind 动态的绑定数据


    
// 简写形式
    
复制代码

v-text 更新元素的文本内容


    
复制代码

v-html 更新元素的 innerHTML


    
复制代码

v-cloak 隐藏未编译的 Mustache 标签直到实例准备完毕配合样式使用

//样式[v-cloak]{  display: none;}
    
       {
   {content}}
    
复制代码

v-once 只渲染一次


    
     只渲染一次: {
   {content}}
    
复制代码

v-for 循环

//循环数组
      
         
      {
   {book}}
  
     
  
         
      {
   {index}} - {
   {book}}
  
     
    
new Vue({  el: '#app',  data: {    books: ['javascript','nodejs','vuejs']  }})复制代码

//循环对象
      
         
      {
   {value}}
  
     
  
         
      {
   {key}} : {
   {value}}
  
     
  
         
      {
   {index}} - {
   {key}} : {
   {value}}
  
     
    
new Vue({  el: '#app',  data: {    user: {      name: 'js',      age: 18,      city: 'china'    }  }})复制代码

v-if 根据表达式的值的真假条件渲染元素和移出元素


    
     我被渲染了
    
    
     我不会被渲染
    
复制代码

v-show 根据表达式的值的真假条件，切换元素的display属性


    
     我显示了
    
    
     我隐藏了
    
复制代码

v-model 在表单控件或者组件上创建双向绑定


      
     
    
{
   {message}}
new Vue({  el: '#app',  data: {    message: 'hello vue'  }})复制代码

v-on 绑定事件处理函数监听 DOM 事件,简写为@


    
     点击事件
    
    
     点击事件
    
// 需要手动传入$event事件对象
    
     点击事件
    
//事件处理函数中的this都指向实例new Vue({  el: '#app',  data: {},  methods: {    clickHandle(event,params){      console.log(event)    }  }})复制代码

事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 捕获事件

.self 事件源是本身才出发

.once 只触发一次

.left 点击鼠标左键时触发

.right 点击鼠标右键时触发

.middle 点击鼠标中键时触发

按键修饰符

.enter

.tab

.delete

.space

.down

.left

.right

new Vue({  el: '#app',  data: {},  methods: {    clickA(){      alert('我是A');    },    clickB(){      alert('我是B');    }  }})复制代码

//阻止冒泡
    
       我是A  
     
          我是B  
     
    
复制代码

//self
    
       我是A  
     
          我是B  
     
    
复制代码

//捕获
    
       我是A  
     
          我是B  
     
    
复制代码

//阻止默认事件阻止默认事件复制代码

//只触发一次
    
     只触发一次
    
复制代码

选项卡实例

复制代码


      
         
        
     
  
         
      {
   {book.name}}
    
      {
   {book.info}}
  
     
    
复制代码

new Vue({  el: '#app',  data: {    books: [      {        name: 'javascript',        info: 'JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。'      },      {        name: 'nodejs',        info: 'Node.js是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。'      },      {        name: 'vuejs',        info: 'Vue是一套用于构建用户界面的渐进式框架。'      }    ],    tabIndex: 0  },  methods: {    showTab(i){      this.tabIndex = i;    }  }})复制代码

双向数据绑定

双向数据绑定

Vue将数据对象和DOM进行绑定，彼此之间互相产生影响，数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化

MVVM模式


      
     
    
{
   {message}}
new Vue({  el: '#app',  data: {    message: 'hello vue'  }})复制代码

响应式原理

把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项

Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter

Vue内部会对数据进行劫持操作，进而追踪依赖，在属性被访问和修改时通知变化

Object.defineProperty

作用：直接在一个对象上定义一个新属性，或者修改一个对象的现有属性

语法：Object.defineProperty(obj, prop, descriptor)

参数：(对象，属性，属性描述符/存取器描述)

[属性描述符]  是否可配置删除，默认false  configurable: false  是否可枚举，默认false  enumerable: false  属性值，默认undefined  value: undefined  是否可被重写，默认false  writable: false[存取器描述]  获得属性值的方法  getter: function(){}  设置属性值的方法	setter: function(){}复制代码

//添加修改对象属性let obj = {  a: 1,  b: 2}Object.defineProperty(obj, 'a', {  value: 3});Object.defineProperty(obj, 'c', {  configurable: true,  enumerable: true,  value: 4,  writable: true});console.log(obj) //{a: 3, b: 2, c: 4}复制代码

使用defineReactive劫持数据

//劫持数据function observer(data,cb){  Object.keys(data).forEach( (key) => {    defineReactive(data,key,data[key],cb)  })}//转换getter，setterfunction defineReactive(obj,key,value,cb){  Object.defineProperty(obj,key,{    get(){      return value;    },    set(newValue){      value = newValue;      cb(newValue);    }  })	}复制代码

使用Proxy劫持数据

function observer(data,cb){  return new Proxy(data,{    get(target,attr){      return target[attr];    },    set(target,attr,newValue){      target[attr] = newValue;      cb(newValue);    }  });}复制代码


    
let content = document.querySelector('#content');let btn = document.querySelector('#btn');let data = {  text: 'Vue是一套用于构建用户界面的渐进式框架。'}observer(data,function(newVal){  content.innerHTML = newVal;})content.innerHTML = data.text;btn.onclick = function(){  data.text = '内容改变了';}复制代码

选项

data

Vue 实例的数据对象

methods

事件处理器

computed

计算属性定义在computed中，它不是方法，属性的值是函数的返回值。

把对处理数据的逻辑抽离在计算属性中，使得模板更加轻量易读

计算属性的值会被缓存，并根据依赖的数据变化而重新计算

//默认设置的get函数new Vue({  el: '#app',  data: {    a: 1  },  computed: {    b(){      return 2;    }  }})//设置get，set函数new Vue({  el: '#app',  data: {    a: 1  },  computed: {    b: {      get(){        return 2;      },      set(newVal){        this.b = newVal;      }    }  }})复制代码

watch

watch观察 Vue 实例上的数据变动，键是需要观察的表达式，值是对应回调函数

let vm = new Vue({  el: '#app',  data: {    html: 'html',    js: {      javascript: 'javascript',      nodejs: 'nodejs',      vuejs: 'vuejs'    }  },  watch: {    html(newVal,oldVal){      console.log(newVal,oldVal) // -> 改变html html    }  }})vm.html = '改变html';复制代码

//深度监控let vm = new Vue({  el: '#app',  data: {    html: 'html',    js: {      javascript: 'javascript',      nodejs: 'nodejs',      vuejs: 'vuejs'    }  },  watch: {    'js.vuejs':{      handler(newVal,oldVal){        console.log(newVal,oldVal) // -> 改变vuejs vuejs      },      deep: true    }  }})vm.js.vuejs = '改变vuejs';复制代码

//侦听开始之后被立即调用let vm = new Vue({  el: '#app',  data: {    html: 'html',    js: {      javascript: 'javascript',      nodejs: 'nodejs',      vuejs: 'vuejs'    }  },  watch: {    html:{      handler(newVal,oldVal){        console.log(newVal,oldVal) // -> html undefined      },      immediate: true    }  }})复制代码

响应的数据变化

Vue.set( target, key, value )

vm.$set( target, key, value )


      
       
       
         
      {
   {key}} : {
   {value}}
  
     
    
new Vue({  el: '#app',  data: {    user: {      name: 'js',      age: 18    }  },  methods: {    addCity1(){      Vue.set( this.user, 'city', 'china' )    },    addCity2(){      this.$set( this.user, 'city', 'china' )    }  }})复制代码

简介

指令

{ {message}}

{ {book.name}}

双向数据绑定

{ {message}}

选项

响应的数据变化

{
{message}}

{
{book.name}}

{
{message}}