一、Vue.js的基本认识
1、官网
英文官网：https://vuejs.org
中文官网：https://cn.vuejs.org
2、简介
渐进式JavaScript 框架（核心 + 扩展）
作者：尤雨溪(一位华裔前 Google 工程师)
作用：动态构建用户界面
3、优点
体积小：压缩后33K
更高的运行效率：基于虚拟dom
双向数据绑定：不操作dom，关注业务逻辑
生态丰富、学习成本低：入门容易，学习资料多
二、第一个Vue应用
1、引入脚本库
创建文件夹05-vue，复制vue.js，创建 01-hello.html，创建<script>标签
<script src="vue.js"></script>2、数据绑定
{{ message }}
<script src="vue.js"></script>
<script>
// 创建一个vue对象
// Vue构造函数的参数是一个配置对象，对象中的key是一些固定的关键字
new Vue({
el: '#app', //绑定vue作用的范围，用id选择器选中div
data: {
//在data中注册变量，用于视图中的数据绑定
message: 'Hello Vue!',
}
})
</script>
这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
data() {
return {
message: 'Hello Vue!'
}
}也可以写成
data: {
message: 'Hello Vue!'
}三、数据绑定指令
1、数据绑定指令
step1：创建 02-数据绑定指令.html
step2：引入脚本，创建Vue对象
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
company: '京东',
site: 'http://www.jd.com'
}
})
</script>step3：使用数据绑定指令做数据渲染
v-bind: 指令的简写形式
{{company}}
2、双向数据绑定指令
step1：创建 03-双向数据绑定指令.html
step2：将02的代码复制到03
step3：将 v-bind:value 修改成 v-model
什么是双向数据绑定？
- 当数据发生变化的时候，视图也会跟着发生变化
- 数据模型发生了改变，会直接显示在页面上
- 当视图发生变化的时候，数据也会跟着同步变化
- 用户在页面上的修改，会自动同步到数据模型中去
注意：v-model只用于用户交互组件中
四、理解MVVM
1、安装Vue.js devtools
- 离线安装
先解压Vue.jsDevtools
然后在Chrome中加载已解压的扩展程序
- 在线安装
先离线安装安装谷歌访问助手
然后在Chrome网上应用商店，搜索Vue.js devtools扩展程序，并安装
- 使用Vue插件
2、MVVM
五、绑定事件监听
创建 04-绑定事件监听.html
使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
company: '京东'
},
methods: {
study(){
alert('我要去' + this.company + '学习')
}
}
})
</script>
v-on 指令的简写形式
六、计算属性
创建 05-计算属性.html
例1：模板中使用js表达式
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello',
},
})
</script>
模板表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。
原始值: {{ message }}
反转消息: {{ message.split('').reverse().join('') }}
所以，对于任何复杂逻辑，你都应当使用计算属性
例2：使用计算属性
computed: {
reversedMessage () {
console.log('计算属性执行')
return this.message.split('').reverse().join('')
}
}
反转消息: {{ reversedMessage }}
例3：使用方法
methods:{
reversed () {
console.log('方法执行')
return this.message.split('').reverse().join('')
}
}
反转消息: {{ reversed() }}
计算属性缓存 vs 方法
看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？
- 计算属性基于缓存
- 方法将总会再次执行
反转消息: {{ reversedMessage }}
反转消息: {{ reversedMessage }}
反转消息: {{ reversed() }}
反转消息: {{ reversed() }}
计算属性的例子：计算属性的单向绑定和双向绑定
创建06-计算用户全名.html
姓:
名:
姓名1(单向):
姓名2(双向):
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: 'Helen',
lastName: 'Yao',
// fullName: 'Helen Yao',
},
computed: {
fullName1() {
console.log('计算fullName1')
return this.firstName + ' ' + this.lastName
},
fullName2: {
get() {
console.log('计算fullName2')
return this.firstName + ' ' + this.lastName
},
//当给fullName2指定新值时自动调用：实现双向绑定
set(value) {
console.log('fullName2 的 setter')
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
},
},
},
})
</script>
七、监视
创建 07-监视.html
姓:
名:
姓名:
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: 'Helen',
lastName: 'Yao',
// fullName: 'Helen Yao',
},
watch: {
//当firstName改变时自动调用
firstName(value) {
console.log('watch firstName')
this.fullName = value + ' ' + this.lastName
console.log(this.fullName)
},
//当lastName改变时自动调用
lastName(value) {
console.log('watch lastName')
this.fullName = this.firstName + ' ' + value
}
},
})
</script>
八、条件渲染
创建 08-条件渲染.html
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现
同意许可协议
yes.
no.
yes.
no.
九、列表渲染
创建 09-列表渲染.html
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{ username: 'helen', age: 18 },
{ username: 'peter', age: 28 }
]
}
})
</script>v-for：列表循环指令
-
{{index}} {{item.username}} {{item.age}}
十、实例生命周期
创建 10-实例的生命周期.html
{{ message }}
分析生命周期相关方法的执行时机
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '床前明月光'
},
// 页面在内存中已经初始化完毕：
// 可以操作 data 中的数据、调用methods中的方法
// 但是数据尚未被渲染到页面中：用户看不见
created() {
console.log('created')
//可以操作 data 中的数据
console.log(this.message)
//可以调用methods中的方法
this.show()
//无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
console.log(document.getElementById('h3').innerText)
},
// 数据已经被渲染到页面中
mounted() { // 第四个被执行的钩子方法
console.log('mounted')
//可以取出dom节点取数据，说明用户已经在浏览器中看见内容
console.log(document.getElementById('h3').innerText)
},
methods: {
show() {
console.log('show方法被调用')
}
},
})
</script>综合案例
创建：综合案例.html
序号
姓名
年龄
email
{{index + 1}}
{{item.name}}
{{item.age}}
{{item.email}}
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
userList: [],
}
},
created() {
this.showList()
},
methods: {
showList() {
//使用自定义配置
const request = axios.create({
baseURL: 'http://localhost:8080', //url前缀
timeout: 1000, //超时时间
headers: { token: 'helen123456' }, //携带令牌
})
// 请求拦截器
request.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么，例如：在请求头中携带一个令牌
config.headers.token = 'helen123456'
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// 对响应数据做点什么，例如：使用response.data替代response，简化前端拿到的数据结果
return response.data
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
//基于promise
request({
method: 'get',
url: '/user/list',
})
.then((response) => {
console.log('获取数据成功', response)
this.userList = response
})
.catch((error) => {
console.log('获取数据失败', error)
})
},
},
})
</script>