Vue核心
Vue模板语法
注:v-bind:会把引号里的内容当成表达式执行,而不是普通的字符串
<a v-bind:href="url">点我去学习编程</a> new Vue({ el:'#root', data:{ name:'jack', url:'http://www.atguigu.com', } })
示例:
数据绑定
分为单项数据绑定(v-bind)和双向数据绑定(v-model,表单类元素可用)
单项数据绑定:<input type="text" v-bind:value="name"><br/> 双向数据绑定:<input type="text" v-model:value="name"><br/> 简写: 单项数据绑定:<input type="text" :value="name"><br/> 双向数据绑定:<input type="text" v-model="name"><br/>
el与data的两种写法
el的两种写法: el:'#root' v.$mount('#root') 注:用哪种都可
data的两种写法: //对象式 new Vue({ data:{ name:'尚硅谷' } }) //函数式,可以把“:function”删掉(删不删只是写法问题,作用一样),此时this是Vue实例,但是不能写成箭头函数,因为箭头函数没有自己的this,一般会往上找一级 new Vue({ data:function(){ return{ name:'尚硅谷' } } }) 注:用到组件时必须用第二种,不然会报错
MVVM模型
数据代理
Object.defineproperty方法(让该对象的某个属性不能枚举,即不能遍历)
代码:
let person ={ name:'张三', sex:'男', age:18 } console.log(Object.keys(person))
示例:
代码:
let person ={ name:'张三', sex:'男' } Object.defineProperty(person,'age',{ value:18 }) console.log(Object.keys(person))
示例: