课堂学习：Vue 渐进式 JavaScript框架 初步认识
下面是Vue的官方文档 不懂就看看
https://cn.vuejs.org/
一、安装和使用
1.安装：
在 https://cn.vuejs.org/ 中 找到学习——教程——安装
里面有两个版本的Vue
开发版本和生产版本
开发版本：包含完整的警告和调试模式
生产版本：删除了警告，33.46KB min+gzip 是开发版本的压缩版体积更小
下载好后直接放到vscode打开的文件的同一目录下 是Vue.js
2.使用：
使用Vue框架 需要先引入
<!-- 引入vue.js文件 开发版本和生产版本 后者更小-->
<script src='../js/vue.js'></script>
<!-- 生产版本 -->
<!-- <script src='../js/vue.js'></script> -->
以下代码可以关闭生产提示
<script>
//关闭生产提示
Vue.config.productionTip = false
</script>
第一步：
<!-- 第一步：准备一个容器 -->
<div id="app">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<!-- v-on: 指令用于绑定事件 -->
<button v-on:click='updataName()'>修改姓名</button>
<button v-on:click='updataAge'>修改年龄</button>
</div>
第二步：
// 第二步：创建一个Vue对象
let vm = new Vue({
// 绑定当前Vue对象操作的DOM容器
el:'#app',
//定义当前Vue对象管理的数据
data:{
name:'张三',
age:20
},
//定义当前Vue对象管理的方法
methods:{
//修改姓名的方法
updataName (){
this.name='啊发发'
},
//修改年龄的方法
updataAge (){
this.age=30
}
}
二、理解什么是Vue的响应式原理：
原理：当代理对象监听到数据发生变化了，就会重新渲染页面
以下代码用于帮助理解 复制到vscode中看比较好
<script src='../js/vue.js'></script>
<script>
Vue.config.productionTip = false
// 一、理解什么是代理对象
//1.定义源对象
let obj1 = {
name: '张三',
age: 20
}
//2.定义代理对象
let obj2 = obj1
console.log('obj2:', obj2)
//代理对象修改了源对象的数据
obj2.name = '李四'
obj2.age = 30
console.log('obj1:', obj1)
console.log('obj2:', obj2)
console.log('-----------------------')
//二、看一下Vue是如何使用代理对象
//1.定义一份数据
let myData = {
name: '张三',
age: 20
}
let vm = new Vue({
//2.将一份数据传递给Vue的data选项，他背后做了两件事情
//(1)、设置Vue实例的_data属性作为当前数据的代理对象 （响应式的核心）
//(2)、将_data里面代理的所有数据再添加给当前Vue实例 （为了Vue实例方便调用数据）
data: myData
})
vm.name = '李四'
vm.age = 30
console.log(myData)
console.log(vm)
console.log('-----------------------')
//三、给对象添加属性的方法
let obj3 = {}
//方法一：
obj3.name = '斯班奇'
//方法二：
obj3['age'] = 8
//方法三：通过Object对象的defineProperty方法，给指定的对象添加指定的属性
//使用这种方式给对象添加的属性 默认不可枚举 默认不可删除
//使用这种方式，给对象添加的属性，对属性的保护措施更加严格
Object.defineProperty(obj3, 'sex', {
//属性值
value: '男',
//允许被枚举（默认不允许）
enumerable: true,
//允许被删除（默认不允许）
configurable: true
})
console.log(obj3)
//枚举的方法 枚举出对象的所有属性(其实就是遍历出对象的所有属性名称)
for (let key in obj3) {
console.log(key) // name age 无法枚举出sex
}
//通过delete关键字，可以删除对象上的指定属性
delete obj3.name
//通过Object.defineProperty方法添加的属性不可删除
delete obj3.sex
console.log(obj3) //{age: 8, sex: '男'}
console.log('-------------------------------')
//四、Vue响应式的原理
// 原理：当代理对象监听到数据发生变化了，就会重新渲染页面 以下代码用于解释如何做到的
//1.定义一个源对象
let data = {
name: '张三',
age: 20
}
//在页面中，显示姓名和年龄
document.querySelector('#name').innerHTML = data.name
document.querySelector('#age').innerHTML = data.age
//2.定义一个代理对象（使用_data 去代理data）
let _data = {}
//3.使用Object.defineProperty给代理对象添加属性
Object.defineProperty(_data, 'name', {
//get方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
//在调用get方法时才知道里面的值是什么
get() {
//console.log('get方法执行了')
return data.name
},
//set方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
//一旦重新设置_data.name的值时 调用这个函数 设定的值会作为参数val传入set方法
set(val) {
// console.log('set方法执行了')
data.name = val
//当代理对象监听到数据发生变化了，就会重新渲染页面
document.querySelector('#name').innerHTML = data.name
}
}),
Object.defineProperty(_data, 'age', {
get() {
return data.age
},
set(val) {
data.age = val
//当代理对象监听到数据发生变化了，就会重新渲染页面
document.querySelector('#age').innerHTML = data.age
}
})
console.log(_data.name) //张三
console.log(_data.age) //20
_data.name = '啦啦啦'
_data.age = 40
</script>
三、Vue的常用指令：
<!-- v-bind: 用于绑定属性，通过v-bind: 绑定过的属性，可以在属性值里写表达式 (表达式可以是Vue的数据)-->
举个例子v-bind:value = '1+2' 它显示出来的是3
<!-- v-on: 用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法 -->
<input type="text" v-bind:value='name' v-on:input='updataName'>{{name}}
<!-- v-bind: 可以用:简写 -->
<!-- v-on: 可以用@简写 -->
<!-- 如果事件方法不是很多，可以卸载行内，注意：这里不能用this $event是事件对象就是 e 在行内就叫$event-->
<input type="text" :value = 'age' @input='age = $event.target.value'>{{age}}
<!-- 通过v-model: 指令可以实现数据的双向绑定，
v-model: 指令是v-on:input 和 v-bind: value的简写-->
<input type="text" v-model='job'>{{job}}
let vm = new Vue({
el: '#app',
//数据
data: {
name: '张三',
age: 20,
job: '程序员'
},
methods: {
updataName(e) {
console.log(e) //接收的事件对象e里面有target属性 里面有value
//获取文本框里的内容，更新数据 把name属性的值同步给当前input里的value
this.name = e.target.value //获取当前元素的value值
},
updataAge(e) {
this.age = e.target.value
},
updataJob(e){
this.job = e.target.value
}
}
})
四、条件渲染和列表渲染：
1.条件渲染
v-if=''
v-else-if=''
v-else='
<!-- 根据成绩 'score' ，显示下面的等级 --> 这个score是在 Vue 的 data 中我们定义的属性 根据这个属性我们设定的值是多少来判断显示 优秀 良好 中等 合格 不合格中的一项
<h2 v-if='score>=90'>优秀</h2>
<h2 v-else-if='score>=80'>良好</h2>
<h2 v-else-if='score>=70'>中等</h2>
<h2 v-else-if='score>=60'>合格</h2>
<h2 v-else>不合格</h2>
v-show 的值时布尔值 来判断是否显示和不显示
v-show的方法 模板已经渲染成功，通过样式控制隐藏
v-if的方法 在满足条件是才会渲染页面 不满足的不会渲染
v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
2.列表渲染：
<ul>
<!-- v-for 指令，用于列表渲染： 列表渲染时，通常都要绑定key，key的作用是提高渲染性能
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用 -->
<li v-for = '(item,index) in foods' :key='index'>{{index}}---{{item.id}}---{{item.name}}---{{item.price}}</li>
<!-- 这里的参数item index可以换别的字母 如果只有一个参数 就会显示item（foods数组中的每一项） -->
<li v-for = 'a in foods' :key='index'>{{a}}</li>
</ul>
new Vue({
el: '#app',
//定义数据
data: {
score: 60,
//添加一个是否显示属性 默认为false
isShow: false,
foods:[
{
id:1,
name:'薯片',
price:7.9
},
{
id:2,
name:'饼干',
price:17.9
},
{
id:3,
name:'巧克力',
price:27.9
},
{
id:4,
name:'面包',
price:11.9
}
]
}
})
五、轮播图练习：
<body>
<div id="app">
<!-- 遍历imgs 图片路径绑定imgs属性中的item -->
<!-- 这样写会把所有图片加载进去 然后通过 display：none 的方法来显示 -->
<!-- <img v-for = '(item,index) in imgs' :src="item" v-show = 'index === showActive'> -->
<!-- 这样写会依次渲染不同图片 减小渲染压力 -->
<img :src="imgs[showActive]" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
//显示的下标：
showActive: 0,
//图片数组
imgs: [
'http://p1.music.126.net/7zAkp74zoKd0LuEuEP6dOg==/109951166645160829.jpg?imageView&quality=89',
'http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644891380.jpg?imageView&quality=89',
'http://p1.music.126.net/JMYet32O1mi6-YZ1GGSYcQ==/109951166646419732.jpg?imageView&quality=89',
'http://p1.music.126.net/WCX5Cq1z17Du2z0QBEcEaA==/109951166645933077.jpg?imageView&quality=89',
'http://p1.music.126.net/2lJxwhKKgzgIHsfiXRJXOQ==/109951166645147845.jpg?imageView&quality=89'
]
},
//生命周期函数（表示页面挂载完成）
mounted() {
setInterval(() => {
this.showActive++
//如果下标越界，重新从0开始
if (this.showActive > 4) {
this.showActive = 0
}
}, 1000)
}
})
</script>
