课堂学习:Vue 渐进式 JavaScript框架 初步认识
下面是Vue的官方文档 不懂就看看
https://cn.vuejs.org/
一、安装和使用
1.安装:
在 https://cn.vuejs.org/ 中 找到学习——教程——安装
里面有两个版本的Vue
开发版本和生产版本
开发版本:包含完整的警告和调试模式
生产版本:删除了警告,33.46KB min+gzip 是开发版本的压缩版体积更小
下载好后直接放到vscode打开的文件的同一目录下 是Vue.js
2.使用:
使用Vue框架 需要先引入
以下代码可以关闭生产提示
//关闭生产提示
Vue.config.productionTip = false
第一步:
姓名:{{name}}
年龄:{{age}}
第二步:
// 第二步:创建一个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中看比较好
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
三、Vue的常用指令:
举个例子v-bind:value = '1+2' 它显示出来的是3
{{name}}
{{age}}
{{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是在 Vue 的 data 中我们定义的属性 根据这个属性我们设定的值是多少来判断显示 优秀 良好 中等 合格 不合格中的一项
=90'>优秀
=80'>良好
=70'>中等
=60'>合格
不合格
v-show 的值时布尔值 来判断是否显示和不显示
v-show的方法 模板已经渲染成功,通过样式控制隐藏
v-if的方法 在满足条件是才会渲染页面 不满足的不会渲染
v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏,用v-show。
如果页面中有很多模块需要隐藏,用户可能只对其中的某个模块感兴趣,用v-if,
所有的模块首屏加载时,全部都不渲染,当用户选择指定的模块后,再渲染指定的模块。
2.列表渲染:
- {{index}}---{{item.id}}---{{item.name}}---{{item.price}}
- {{a}}
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
}
]
}
})
五、轮播图练习:
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)
}
})