目录
1、初识Vue：
要想Vue工作，就必须创建一个Vue实例，且需要传入一个所配置的容器，后问称之为root容器。
root容器中的代码被称为【Vue模板】
Vue实例和容器是一一对应的。
在真实开发中，只会有一个Vue实例，不过会配合这组件一起使用。
<body>
<div id="root">
<!-- 双花括号：插值语法 -->
<h1>hello , {{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root', // el用于指定当前vue实例为哪个容器服务，通常用css选择器
data:{ // data中存储了数据，数据提供el所指定的容器去使用
name:'gls'
}
});
</script>2、模板语法
2.1 插值语法
双花括号
2.2 指令语法
vue里的指令有个特点：都有以 v- 开头 比如，v-bind v-if v-model
<body>
<div id="root">
<!-- v-bind: 将url当做js表达式使用，所以去找url的返回值 -->
<!-- v-bind: 可以简写成 : -->
<a v-bind:href="url"> 点击跳转 </a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
url:'https://www.baidu.com'
}
});
</script>2.3 总结：
3、数据绑定
3.1 单向数据绑定
v-bind
3.2 双向数据绑定
v-model
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value = "name"><br/>
单向数据绑定(简写)：<input type="text" :value = "name"><br/>
双向数据绑定：<input type="text" v-model:value = "name"><br/>
双向数据绑定(简写)：<input type="text" v-model = "name"><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'gls'
}
});
</script>3.3 总结
4. el 和 data的两种写法
<body>
<div id="root">
{{name}}
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root', // el 第一种写法
data:{ // data 第一种写法 对象式
name:'gls'
}
});
const vm = new Vue({
data:function(){ // data 第二种写法 函数式
return{
name:'gls'
}
}
data(){ // 与上面的data:function()写法等价
return{
name:'gls'
}
}
});
vm.$mount('#root'); // el 第二种写法 更灵活
</script>5、MVVM模型
6、数据代理
6.1 回顾Object.defineProperty
<script type="text/javascript">
let person = {
name:'gls',
sex:'男'
// age:18
}
Object.defineProperty(person,'age',{ // 给person这个对象添加age这个属性
value:18,
enumerable:true, // 可枚举
writable:true, // 可修改
configurable:true, // 控制属性是否可删除
})
</script><script type="text/javascript">
let number = 18;
let person = {
name:'gls',
sex:'男'
}
Object.defineProperty(person,'age',{ // 给person这个对象添加age这个属性
// 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值是number
get(){
return number;
},
// 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的值
set(value){
number = value;
}
})
</script>6.2 上面是数据代理？
数据代理：通过一个对象代理另一个对象中属性的操作
<script type="text/javascript">
let obj1 = {x:100}
let obj2 = {y:200}
// 通过obj2这个对象，修改obj1的属性
Object.defineProperty(obj2,'x',{
get(){
return obj1.x
},
set(value){
obj1.x = value
}
})
</script>
