第一天
初识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方法给对象添加属性，默认不可被枚举，不可被删除，对对象属性的?；じ细?/p>
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，
所有的?？槭灼良釉厥?，全部不渲染，当用户选择指定?？楹笾讳秩局付？椤?/p>
<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>
