VUE介绍及快速上手搭建_简单vue界面开发
赞
踩
VUE的介绍及使用
如何快速了解及上手搭建使用VUE
1.什么是VUE
答：
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡
2.VUE可以干什么
1、Vue.js能让基于网页的前端应用程序开发起来更加方便，因为Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM这个看名字就觉得高大上的技术，那么响应式的数据绑定、组件化的开发和Virtual DOM这些又是些什么东西呢？下面我们具体来看看。
响应式的数据绑定：这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出响应。
组件化的开发：Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
Virtual DOM：Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。里面聚集了一些正在自学前端的初学者，裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。
2、vue可以简单写单个页面，也可以写一个大的前端系统。
3、Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。
4、Vue上手速度快、功能强大，且提供了非常好用的脚手架vue-cli，很简单就可以构建并让自己的项目跑起来。
3.VUE使用
1.通过CDN使用VUE
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- 1
通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
2.使用 ES 模块构建版本
现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：
- 1
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
注意我们使用了 <script type="module">，且导入的 CDN URL 指向的是 Vue 的 ES 模块构建版本。
3.启用 Import maps
在上面的示例中，我们使用了完整的 CDN URL 来导入，但在文档的其余部分中，你将看到如下代码：
import { createApp } from 'vue'
- 1
我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue：
<script type="importmap"> { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } } </script> <div id="app">{{ message }}</div> <script type="module"> import { createApp } from 'vue' createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app') </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
4. VUE上手使用
1.导入vue
2.定义边界
3.将边界挂载到vue中
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个Vue程序</title> <!-- 1.通过CDN导入VUE --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 2. 定义边界 --> <div id="app"> <!-- vue可以管控的位置 这个div内 --> <!--v-model的作用是数据双向绑定 --> 请输入：<button v-model="msg" /> {{ msg }} </div> <script> // 3.将边界挂在到vue实例上 new Vue({ el: '#app', data() { return { msg: 'hello, Vue!' } } }) </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
5.VUE的生命周期
vue的生命周期分为六个：beforeCreate、created、beforeMount、mounted、
beforeUpdate、updated、beforeDestroy、destroyed
1.beforeCreate
在组件实例初始化完成之后立即调用。
详细信息：
会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。
注意，组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用，beforeCreate() 也不例外。
2.created
在组件实例处理完所有与状态相关的选项后调用。
详细信息：
当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。
3.beforeMount
在组件被挂载之前调用。
详细信息：
当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
这个钩子在服务端渲染时不会被调用。
4.mounted
在组件被挂载之后调用。
详细信息：
组件在以下情况下被视为已挂载：
所有同步子组件都已经被挂载。(不包含异步组件或 树内的组件)
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
这个钩子在服务端渲染时不会被调用。
5.beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
详细信息：
这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
这个钩子在服务端渲染时不会被调用。
6.updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
详细信息：
父组件的更新钩子将在其子组件的更新钩子之后调用。
这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
这个钩子在服务端渲染时不会被调用。
警告：不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！
7.beforDestory
beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…
8. destroyed
destroyed:组件的数据绑定、监听…都去掉了,只剩下dom空壳，这里也可以善后
生命周期图示
