目录
一、Vue.js的基本认识
1、官网
英文官网：Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)
中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (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、数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{
{title}}</h1>
<p1>欢迎{
{user.username}}</p1>
</div>
<script>
new Vue({
el: '#app', // 通过id指定要渲染的元素
data: {
title: '第一个vue程序',
user: {
username: 'helen',
age: 25,
},
}
})
</script>
</body>
</html>这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
data: {
title: '第一个vue程序',
user: {
username: 'helen',
age: 25,
},
}也可以写成
data: {
return {
title: '第一个vue程序',
user: {
username: 'helen',
age: 25,
},
}
}测试
三、数据绑定指令
1、数据绑定指令
step1：创建 02-数据绑定指令.html
step2：引入脚本，创建Vue对象
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
company: '尚硅谷',
site: 'http://www.atguigu.com'
}
})
</script>step3：使用数据绑定指令做数据渲染
<div id="app">
<a v-bind:href="site" target="_blank">{
{company}}</a>
<input type="text" v-bind:value="company">
</div>v-bind: 指令的简写形式
<!-- v-bind: 指令的简写形式 : -->
<a :href="site" target="_blank">{
{company}}</a>
<input type="text" :value="company">2、双向数据绑定指令
step1：创建 03-双向数据绑定指令.html
step2：将02的代码复制到03
step3：将 v-bind:value 修改成 v-model
<!-- v-bind:value 单向数据绑定 -->
<input type="text" v-bind:value="company">
<!-- v-model 双向数据绑定 -->
<input type="text" v-model="company">什么是双向数据绑定？
- 当数据发生变化的时候，视图也会跟着发生变化
- 数据模型发生了改变，会直接显示在页面上
- 当视图发生变化的时候，数据也会跟着同步变化
- 用户在页面上的修改，会自动同步到数据模型中去
注意：v-model只用于用户交互组件中
四、理解MVVM
在ViweModel中有DOM监听器和数据绑定器
五、绑定事件监听
创建 04-绑定事件监听.html
使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<body>
<div id="app">
<button v-on:click="study">去学习</button>
<!--v-on: 指令的简写形式 @-->
<button @click="study">去学习</button>
<!--需要传参时加括号，不传参可以省略括号-->
<button v-on:click="sleep('jack')">去睡觉</button>
</div>
<script>
new Vue({
el: '#app', // 通过id指定要渲染的元素
methods: {
study() {
alert('good good study, day day up')
},
sleep(username) {
alert(username + '想去睡觉')
}
}
})
</script>
</body>六、计算属性
创建 05-计算属性.html
例1：模板中使用js表达式
<body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello',
},
})
</script>
</body>模板表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。
<div id="app">
<p>原始值: {
{ message }}</p>
<!-- 1、插值数据绑定中使用表达式 -->
<p>反转消息: {
{ message.split('').reverse().join('') }}</p>
</div>所以，对于任何复杂逻辑，你都应当使用计算属性
例2：使用计算属性
computed: {
reversedMessage () {
console.log('计算属性执行')
return this.message.split('').reverse().join('')
}
}<!-- 2、使用计算属性 -->
<p>反转消息: {
{ reversedMessage }}</p>例3：使用方法
methods:{
reversed () {
console.log('reversed被执行')
return this.message.split('').reverse().join('')
}
}<!-- 3、使用方法 -->
<p>反转消息: {
{ reversed() }}</p>看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？
- 计算属性基于缓存
- 方法将总会再次执行
<!-- 2、使用计算属性 -->
<p>反转消息: {
{ reversedMessage }}</p>
<!-- 调用两次只执行一次属性的计算 -->
<p>反转消息: {
{ reversedMessage }}</p>
<!-- 3、使用方法 -->
<p>反转消息: {
{ reversed() }}</p>
<!-- 调用两次执行了两次属性的计算 -->
<p>反转消息: {
{ reversed() }}</p>七、监视
创建 07-监视.html
<body>
<div id="app">
姓: <input placeholder="First Name" v-model="firstName" /><br />
名: <input placeholder="Last Name" v-model="lastName" /><br />
姓名: <input placeholder="Full Name" v-model="fullName" /><br />
</div>
<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>
</body>八、条件渲染
创建 08-条件渲染.html
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现
<div id="app">
<input type="checkbox" v-model="ok" />同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<p v-if="ok">yes.</p>
<p v-else>no.</p>
<!-- v:show 条件指令 初始渲染开销大 -->
<p v-show="ok">yes.</p>
<p v-show="!ok">no.</p>
</div>九、列表渲染
创建 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：列表循环指令
<div id="app">
<ul>
<!-- item：当前元素，index：当前元素的索引 -->
<li v-for="(item, index) in userList">
{
{index}} {
{item.username}} {
{item.age}}
</li>
</ul>
</div>十、实例生命周期
创建 10-实例的生命周期.html
<div id="app">
<h3 id="h3">{
{ message }}</h3>
</div>分析生命周期相关方法的执行时机
<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
<body>
<div id="app">
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>email</th>
</tr>
<tr v-for="(item, index) in userList">
<td>{
{index + 1}}</td>
<td>{
{item.name}}</td>
<td>{
{item.age}}</td>
<td>{
{item.email}}</td>
</tr>
</table>
</div>
<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>
</body>