vm =>viewmodel 数据最终会被vm代理

引入vue后会白给你一个Vue构造函数let vm=new Vue({ //vm==viewModelel:'#app',//告诉vue能管理哪个部分,querySelectordata:{//data中的数据会被vm所代理msg:'zfpx',//可以通过vm.msg取到对应的内容}});

{{}} 取值表达式

• 通过{{}}来取值,默认可以不写this,里面可以写表达式,赋值运算,计算,三元表达式

• 注意:在{{}} 尽量少写逻辑运算(computed)

• 去改变数组中的某一项,是监控不到的,也不能使用改变数组长度的方法

• 变异方法有 : reserve sort push pop unshift shift splice filter map  只有这些方法{{}}可以监控到

let vm = new Vue({el:'#app',data:{arr:[1,2,3,4,5]}});vm.arr[1]=100;//错误写法

指令

• dom元素的行间属性,vue提供了内置的指令,必须v-开头,后面的值均为变量
  

• (如果checkbox,selected多选是数组,提供value属性)(radio checkbox分组靠v-model)

• v-model :(表单元素)忽略掉checked ,value,selected,将数据绑定到视图上,视图修改后会影响数据的变化
  

//checkbox,radio和selected用v-model时需要注意的问题
    1.checkbox:如果是复选框 只有一个复选框时,会把此值转化为布尔类型,,如果true代表选中{{a}}  
    2.radio checkbox分组靠v-model,value值对应就是选择后的结果
    3.     dfddffd 好的好
    let vm = new Vue({
    el:'#app',
    data:{
    a:[] 
    }
})

v-html 把html字符当做html渲染 一定是可以信任的html
v-once 绑定一次,数据再变化不会导致视图刷新,写在不想刷新的标签上
v-for 循环(数组,对象,字符串,数字)  会复用原有的结构 更高效 
要循环谁就在谁身上增加v-for属性 最常用来循环数组

数据劫持

vue 会循环data中的数据(数据劫持) :通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情

Object.keys(data).forEach(function(key){
    Object.defineProperty(data,key,{
    enumerable:true,
    configurable:true,
    get:function(){
    console.log('get');
    },
    set:function(){
    console.log('监听到数据发生了变化');
    }
    })
});
console.log(data.name); //控制台会打印出 “get”
console.log(data.name = 'hxx'); //控制台会打印出 "监听到数据发生了变化"

双向绑定的原理

let obj={};
let temp={};
Object.defineProperty(obj,'name',{
    get(){   // 取obj的name属性会触发
    return temp['name']
    },
    set(val){   //给obj赋值会触发set
    temp["name"]=val;//改变temp的结果
    input.value=val; //将值赋予输入框
    }
});
input.value=obj.name;  //页面一加载时,会调用get方法
input.addEventListener("input",function () {  //等待输入框的变化
obj.name=this.value;   //当值变化时会调用set方法
});

• 给dom元素绑定,函数必须定义在methods中,不能和data里的内容重名,会报错

• this指向实例

• 不能使用箭头函数

• 如果不写括号,事件对象会默认传入,否则只能手动传入$event

点我啊

• 事件修饰符
  

• @事件.capture
  xxx.addEventListener('click',fn,true)


• @事件.prevent
  preventDefault,returnValue=false


• @事件.once
  on('click') off('click')


• @事件.self
  e.srcElement&&e.target 判断事件源绑定事件


• @事件.stop
  stopPropagation,cancelBubble=true; 


转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue教程【四】-vue指令及事件二