Vue3官网基础(一)安装、介绍(语法介绍)、组件化应用、应用实例、根组件、生命周期钩子
文章目录
总结:
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
语法
文本插值
Counter: { { counter }}
绑定元素的 attribute
<span v-bind:title="message">
事件监听器
<button v-on:click="reverseMessage">反转 Message</button>
表单输入和应用状态之间的双向绑定
<p>{ { message }}</p> <input v-model="message" />
条件判断
<span v-if="seen">现在你看到我了</span>
循环
<li v-for="todo in todos"> { { todo.text }} </li>
组件化应用
它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
组件本质上是一个具有预定义选项的实例。
在 Vue 中注册组件很简单:如对
App
对象所做的那样创建一个组件对象,并将其定义在父级组件的components
选项中:// 定义名为 todo-item 的新组件 app.component('todo-item', { template: `<li>This is a todo</li>` })
应用实例
每个 Vue 应用都是通过用
createApp
函数创建一个新的应用实例开始的:const app = Vue.createApp({ /* 选项 */ })
该应用实例是用来在应用中注册“全局”组件的。
const app = Vue.createApp({ }) app.component('SearchInput', SearchInputComponent) app.directive('focus', FocusDirective) app.use(LocalePlugin)
根组件&mount挂载应用实例&组件实例
//RootComponent是根组件 const RootComponent = { /* 选项 */ } //app是应用实例 const app = Vue.createApp(RootComponent) //组件实例 vm=ViewModel const vm = app.mount('#app')
生命周期钩子
生命周期包括不同阶段
初始化 (create)— 组件挂载(mount)-----组件更新 (update)— 销毁(destroy)
生命周期 发生了什么 beforeCreate 初始化界面前 : 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问 created 初始化界面后 : 在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数,也就是不会更新视图,SSR可以放这里。 beforeMount 挂载前 :完成模板编译,虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated mounted 挂载完成 : 将编译好的模板挂载到页面 (虚拟DOM挂载) ,可以在这进行异步请求以及DOM节点的访问,在vue用$ref操作 beforeUpdate 更新数据前 : 组件数据更新之前调用,数据都是新的,页面上数据都是旧的 组件即将更新,准备渲染页面 , 可以在当前阶段进行更改数据,不会造成重渲染 updated 组件更新后 : render重新渲染 , 此时数据和界面都是新的 ,要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新 beforeDestroy 组件卸载前 : 实例销毁之前,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器 destroyed 组件卸载后 : 组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。 activited keep-alive 专属 , 组件被激活时调用 deactivated keep-alive 专属 , 组件被销毁时调用 不同的钩子函数
生命周期钩子的
this
上下文指向调用它的当前活动实例。不要在选项 property 或回调上使用箭头函数,因为箭头函数并没有
this
,this
会作为变量一直向上级词法作用域查找,直至找到为止,经常导致Uncaught TypeError: Cannot read property of undefined
或Uncaught TypeError: this.myMethod is not a function
之类的错误。
1. 安装
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
将 Vue.js 添加到项目中主要有四种方式:
- 在页面上以 CDN 包的形式导入。
- 下载 JavaScript 文件并自行托管。
- 使用 npm 安装它。
- 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。
发布版本说明
最新版本:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1cijeJQ-1631708035430)(https://img.shields.io/npm/v/vue/next.svg)]
每个版本的详细发布说明都可以在 GitHub 上找到。
Vue Devtools
目前处于测试阶段 - Vuex 和 Router 的集成仍在进行中。
在 Vue School 的免费课程中学习如何安装和使用 Vue Devtools
在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools,它允许你在一个更友好的界面中审查和调试 Vue 应用。
CDN
对于制作原型或学习,你可以这样使用最新版本:
<script src="https://unpkg.com/vue@next"></script>
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。
下载并自托管
如果你想避免使用构建工具,但又无法在生产环境使用 CDN,那么你可以下载相关 .js
文件并自行托管在你的服务器上。然后你可以通过 <script>
标签引入,与使用 CDN 的方法类似。