深入浅出Vue,全网最全笔记
ztj100 2024-12-03 06:52 14 浏览 0 评论
一、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、数据绑定
<body>
<!-- id标识vue作用的范围，绑定的数据必须写在这个div内部 -->
<div id="app">
<!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.js"></script>
<script>
// 创建一个vue对象
// Vue构造函数的参数是一个配置对象，对象中的key是一些固定的关键字
new Vue({
el: '#app', //绑定vue作用的范围，用id选择器选中div
data: {
//在data中注册变量，用于视图中的数据绑定
message: 'Hello Vue!',
}
})
</script>
</body>这就是声明式渲染：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：使用数据绑定指令做数据渲染
<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
1、安装Vue.js devtools
- 离线安装
先解压Vue.jsDevtools
然后在Chrome中加载已解压的扩展程序
- 在线安装
先离线安装安装谷歌访问助手
然后在Chrome网上应用商店，搜索Vue.js devtools扩展程序，并安装
- 使用Vue插件
2、MVVM
五、绑定事件监听
创建 04-绑定事件监听.html
使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<body>
<div id="app">
<button v-on:click="study">去学习</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
company: '京东'
},
methods: {
study(){
alert('我要去' + this.company + '学习')
}
}
})
</script>
</body>v-on 指令的简写形式
<!-- v-on: 指令的简写形式 @ -->
<button @click="study">去学习</button>六、计算属性
创建 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('方法执行')
return this.message.split('').reverse().join('')
}
}
<!-- 3、使用方法 -->
<p>反转消息: {{ reversed() }}</p>计算属性缓存 vs 方法
看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？
- 计算属性基于缓存
- 方法将总会再次执行
<!-- 2、使用计算属性 -->
<p>反转消息: {{ reversedMessage }}</p>
<!-- 调用两次只执行一次属性的计算 -->
<p>反转消息: {{ reversedMessage }}</p>
<!-- 3、使用方法 -->
<p>反转消息: {{ reversed() }}</p>
<!-- 调用两次执行了两次属性的计算 -->
<p>反转消息: {{ reversed() }}</p>计算属性的例子：计算属性的单向绑定和双向绑定
创建06-计算用户全名.html
<body>
<div id="app">
姓: <input placeholder="First Name" v-model="firstName" /><br />
名: <input placeholder="Last Name" v-model="lastName" /><br />
姓名1(单向): <input placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(双向): <input placeholder="Full Name2" v-model="fullName2" /><br />
</div>
<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>
</body>七、监视
创建 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>相关推荐
- Vue3非兼容变更——函数式组件（vue 兼容）
-
在Vue2.X中，函数式组件有两个主要应用场景：作为性能优化，因为它们的初始化速度比有状态组件快得多；返回多个根节点。然而在Vue3.X中，有状态组件的性能已经提高到可以忽略不计的程度。此外，有状态组...
- 利用vue.js进行组件化开发，一学就会(一)
-
组件原理/组成组件（Component）扩展HTML元素，封装可重用的代码，核心目标是为了可重用性高，减少重复性的开发。组件预先定义好行为的ViewModel类。代码按照template\styl...
- Vue3 新趋势:10 个最强 X 操作!（vue.3）
-
Vue3为前端开发带来了诸多革新，它不仅提升了性能，还提供了...
- 总结 Vue3 组件管理 12 种高级写法，灵活使用才能提高效率
-
SFC单文件组件顾名思义，就是一个.vue文件只写一个组件...
- 前端流行框架Vue3教程:17. _组件数据传递
-
_组件数据传递我们之前讲解过了组件之间的数据传递，...
- 前端流行框架Vue3教程:14. 组件传递Props效验
-
组件传递Props效验Vue组件可以更细致地声明对传入的props的校验要求...
- 前端流行框架Vue3教程:25. 组件保持存活
-
25.组件保持存活当使用...
- 5 个被低估的 Vue3 实战技巧，让你的项目性能提升 300%?
-
前端圈最近都在卷性能优化和工程化，你还在用老一套的Vue3开发方法？作为摸爬滚打多年的老前端，今天就把私藏的几个Vue3实战技巧分享出来，帮你在开发效率、代码质量和项目性能上实现弯道超车！一、...
- 绝望!Vue3 组件频繁崩溃?7 个硬核技巧让性能暴涨 400%!
-
前端的兄弟姐妹们五一假期快乐，谁还没在Vue3项目上栽过跟头？满心欢喜写好的组件，一到实际场景就频频崩溃，页面加载慢得像蜗牛，操作卡顿到让人想砸电脑。用户疯狂吐槽，领导脸色难看，自己改代码改到怀疑...
- 前端流行框架Vue3教程:15. 组件事件
-
组件事件在组件的模板表达式中，可以直接使用...
- Vue3，看这篇就够了（vue3 从入门到实战）
-
一、前言最近很多技术网站，讨论的最多的无非就是Vue3了，大多数都是CompositionAPI和基于Proxy的原理分析。但是今天想着跟大家聊聊，Vue3对于一个低代码平台的前端更深层次意味着什么...
- 前端流行框架Vue3教程:24.动态组件
-
24.动态组件有些场景会需要在两个组件间来回切换，比如Tab界面...
- 前端流行框架Vue3教程:12. 组件的注册方式
-
组件的注册方式一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册...
- 焦虑!Vue3 组件频繁假死?6 个奇招让页面流畅度狂飙 500%!
-
前端圈的朋友们，谁还没在Vue3项目上踩过性能的坑？满心期待开发出的组件，一到高并发场景就频繁假死，用户反馈页面点不动，产品经理追着问进度，自己调试到心态炸裂！别以为这是个例，不少人在电商大促、数...
- 前端流行框架Vue3教程:26. 异步组件
-
根据上节课的代码，我们在切换到B组件的时候，发现并没有网络请求：异步组件：...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)