Vue基础知识总结 1：Vue入门

您所在的位置：网站首页 › 农业技术基本知识点 › Vue基础知识总结 1：Vue入门

Vue基础知识总结 1：Vue入门

2024-07-16 10:54| 来源: 网络整理| 查看: 265

🏆作者简介：哪吒，CSDN2022博客之星Top1、CSDN2021博客之星Top2、多届新星计划导师✌、博客专家💪 ，专注Java硬核干货分享，立志做到Java赛道全网Top N。

🏆本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。

昨天晚上23:00，Vue，正式打响第一枪！转行三年半，向全栈迈进，争取三年内可以成为架构师，成为世界500强公司的中流砥柱，fighting从未停止，加油！

一、简介

二、Vue.js实现hello world

三、创建代码片段

四、基础语法

1、单向绑定数据v-bind

2、双向绑定数据v-model

3、方法methods

4、修饰符

5、条件渲染

v-if：条件指令

v-show：条件指令

6、列表渲染

v-for：列表循环指令

五、组件

1、局部组件

2、全局组件

六、Vue生命周期

1、Vue实例生命周期流程图

2、Vue实例生命周期钩子函数及其含义

3、分析生命周期相关方法的执行时机

七、路由

1、引入js

2、编写html

3、编写js

一、简介

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、Vue.js实现hello world Document {{message}} //1、创建一个vue对象 new Vue({ el: '#app',//2、绑定vue作用的范围 data: {//3、定义页面中显示的模型数据 message: 'hello vue!' } })

三、创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

{ "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "", "", "", "", " ", " ", " ", " Document", "", "", "", " ", "", " ", " ", " ", " new Vue({", " el: '#app',", " data: {", " $1", " }", " })", " ", "", "", "", ], "description": "my vue template in html" } } 四、基础语法 1、单向绑定数据v-bind

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

2、双向绑定数据v-model data: { searchMap:{ keyWord: '哪吒' } }

您要查询的是：{{searchMap.keyWord}}

3、方法methods 4、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

即阻止事件原本的默认行为

5、条件渲染 v-if：条件指令同意许可协议 if：Lorem ipsum dolor sit amet. no v-show：条件指令

使用v-show完成和上面相同的功能

show：Lorem ipsum dolor sit amet. no v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 6、列表渲染 v-for：列表循环指令

例1：简单的列表渲染

{{ n }} {{ n }} - {{ index }}

例2：遍历数据列表

data: { userList: [ { id: 1, username: 'helen', age: 18 }, { id: 2, username: 'peter', age: 28 }, { id: 3, username: 'andy', age: 38 } ] } {{index}} {{item.id}} {{item.username}} {{item.age}} 五、组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

1、局部组件 var app = new Vue({ el: '#app', // 定义局部组件，这里可以定义多个局部组件 components: { //组件的名字 'Navbar': { //组件的内容 template: '首页学员管理' } } })

使用组件

2、全局组件

定义全局组件：components/Navbar.js

// 定义全局组件 Vue.component('Navbar', { template: '首页学员管理讲师管理' }) var app = new Vue({ el: '#app' }) 六、Vue生命周期 1、Vue实例生命周期流程图

2、Vue实例生命周期钩子函数及其含义钩子函数含义beforeCreateVue实例进行初始化，此时实例的各个组件还没有完全初始化，因此不能访问data、computed、watch、methods的方法和数据，同时，Vue实例的挂载点也没有进行初始化createdVue实例初始化完成，此时可以访问data、computed、watch、methods的方法和数据，但是依旧没有进行Vue实例的挂载点初始化beforeMount将实例绑定到模板并进行渲染，但并不会讲实例挂载到页面上mounted讲渲染好的模板绑定到页面上，此时，Vue实例已完全创建好beforeUpdate数据变更时执行，在实例数据更改之前执行自定义逻辑或操作updated将Vue实例更新完成的数据重新渲染到内存中的虚拟DOM中，再讲虚拟DOM应用到页面上beforeDestroyVue实例进入销毁阶段，此时实例上的data、methods、过滤器、指令等仍处于可用的状态，还没有真正执行销毁的过程（解除与页面DOM元素的绑定）detroyed实例被销毁（解除Vue实例与页面DOM元素的绑定，但该Vue实例的对象、数据仍然可以使用） 3、分析生命周期相关方法的执行时机 //===创建时的四个事件 beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行 console.log(this.message) //undefined this.show() //TypeError: this.show is not a function // beforeCreate执行时，data 和 methods 中的数据都还没有没初始化 }, created() { // 第二个被执行的钩子方法 console.log(this.message) //床前明月光 this.show() //执行show方法 // created执行时，data 和 methods 都已经被初始化好了！ // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作 }, beforeMount() { // 第三个被执行的钩子方法 console.log(document.getElementById('h3').innerText) //{{ message }} // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中 }, mounted() { // 第四个被执行的钩子方法 console.log(document.getElementById('h3').innerText) //床前明月光 // 内存中的模板已经渲染到页面，用户已经可以看见内容 }, //===运行中的两个事件 beforeUpdate() { // 数据更新的前一刻 console.log('界面显示的内容：' + document.getElementById('h3').innerText) console.log('data 中的 message 数据是：' + this.message) // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染 }, updated() { console.log('界面显示的内容：' + document.getElementById('h3').innerText) console.log('data 中的 message 数据是：' + this.message) // updated执行时，内存中的数据已更新，并且页面已经被渲染 } 七、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

1、引入js 2、编写html Hello App! 首页会员管理讲师管理 3、编写js // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Welcome = { template: '欢迎' } const Student = { template: 'student list' } const Teacher = { template: 'teacher list' } // 2. 定义路由 // 每个路由应该映射一个组件。 const routes = [ { path: '/', redirect: '/welcome' }, //设置默认指向的路径 { path: '/welcome', component: Welcome }, { path: '/student', component: Student }, { path: '/teacher', component: Teacher } ] // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 从而让整个应用都有路由功能 const app = new Vue({ el: '#app', router }) // 现在，应用已经启动了！

🏆姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。

🏆姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。

🏆全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。

【本文地址】

Vue基础知识总结 1：Vue入门

Vue基础知识总结 1：Vue入门

今日新闻

推荐新闻