第一天
初识Vue
1、 引入Vue
<script src="../vue/vue.js"></script>
[if !supportLists]2、 [endif]准备一个容器
<div id=”app”>
<h2> 姓名：{{name}} </h2>
<h2> 年龄：{{age}} </h2>
<button v-on:click=“updateName”> 修改姓名</button>
</div>
[if !supportLists]3、 [endif]创建一个Vue对象
let vm=new Vue({
el:”#app”, 选定Vue操作的DOM容器
data:{ 定义当前Vue管理的数据
name:”张三”,
age:20
},
methods:{ 定义当前Vue管理的方法
updateName(){
this.name=”李四”
},
updataAge(){
this.age=33}
}
})
Vue的响应式原理
代理对象：
定义一个源对象obj1，然后let obj2=obj1，obj2就是obj1的代理对象，如果给代理对象进行修改重新赋值，那么源对象也会变
// 定义一份数据
let myData={
name:'lili',
age:23}
将一个数据传递给Vue的data选项，它背后做了两件事情
1、设置Vue实例的_data属性，作为当前数据的代理对象（响应式核心
2、将_data里代理的所有数据，再添加到当前Vue实例身上（为了Vue实例方便调用数据
let vm=new Vue({
data:myData
})
let obj3={}
方式一
obj3.name="张震"
方式二
obj3["age"]=40
方式三
通过object.defineProperty方法给对象添加属性，默认不可被枚举，不可被删除，对对象属性的保护更严格
Object.defineProperty(obj3,"sex",{
value:'男',
enumerable:true,允许枚举遍历
configurable:true允许被删除
})
console.log(obj3);
for (const key in obj3) {
console.log(key);
}
通过delete可以删除对象身上的属性
delete obj3.name
delete obj3.sex
console.log(obj3);
Vue响应式原理
1、定义一个源对象
let data={
name:'happy',
age:26
}
在页面中显示姓名和年龄
document.querySelector('#name').innerHTML=data.name
document.querySelector('#age').innerHTML=data.age
2、定义一个代理对象（_data去代理data
let _data={}
3、使用object.defineProperty给_data添加属性
Object.defineProperty( _data,'name',{
get方法返回属性的值（当我们调用name属性获取值时，会调用get方法
get(){
return data.name
},
set方法用于设置属性的值（当我们调用name属性设置值时，会调用set方法
set(val){
data.name=val
当代理对象监听到数据变化时，会重新渲染页面
document.querySelector('#name').innerHTML=data.name
}
})
使用object.defineProperty给_data添加属性
Object.defineProperty(_data,'age',{
get方法返回属性的值（当我们调用name属性获取值时，会调用get方法
get(){
return data.age
},
set方法用于设置属性的值（当我们调用name属性设置值时，会调用set方法
set(val){
data.age=val
当代理对象监听到数据变化时，会重新渲染页面
document.querySelector('#age').innerHTML=data.age
}
})
Vue的常用指令
1、 v-bind：用于绑定属性，通过v-bind绑定过的属性，可以直接写插值表达式获得属性值
2、v-on：用于绑定事件，通过v-on绑定的事件可以指定Vue实例定义的方法
<input type="text " v-bind:value="name" v-on:input="updataName"> {{name}}
methods: {
updataName(e) {
获取文本框里面的内容，更新数据
this.name = e.target.value
}
}
3、v-bind:可以用：简写 v-on：可以用@简写
如果事件代码不是很多，可以写在行内，行内不能写this，$event指的是事件对象
<input type="text " :value="age" @input="age =$event.target.value">{{age}}
4、通过v-model指令，可以实现对数据的双向绑定，v-model指令是对v-bind：value和v-on：input的简写
<input type="text " v-model="job">{{job}}
Vue的条件渲染和列表渲染
v-if v-else-if v-else-if v-else
v-if和v-show如何选择：
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中一两个模块感兴趣，用v-if，
所有的模块首屏加载时，全部不渲染，当用户选择指定模块后只渲染指定模块。
<ul>
<li v-for="(item,index) in foods" :key="index">{{index}}-{{item.name}}-{{item.price}} </li>
</ul>
Vue-轮播图
<body>
<div id="app">
<img :src="imgs[showActive]" alt="">
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
showActive: 0,
imgs: ["http://p1.music.126.net/pkXsmqmFQOehNkJYmehkng==/10995",
"http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644",
"http://p1.music.126.net/l0AHmu3gW293XmlQvn5LxQ==/109951166644",
"http://p1.music.126.net/2lJxwhKKgzgIHsfiXRJXOQ==/109951166645”]
},
mounted() {
setInterval(() => {
this.showActive++
if (this.showActive >= 4)
this.showActive = 0
}, 1000)
},
})
</script>
</body>
