Vue核心

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))

示例：