【Vue基础知识总结 1】Vue入门，一线互联网架构师设计思想解读开源框架

最新推荐文章于 2024-09-28 17:32:53 发布

2401_87288729

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量801

点赞数 13

文章标签： vue.js 开源前端

本文链接：https://blog.csdn.net/2401_87288729/article/details/142503477

版权

🍅 简介：Java领域优质创作者🏆、CSDN哪吒公众号作者✌ 、Java架构师奋斗者💪

🍅 扫描主页左侧二维码，加入群聊，一起学习、一起进步

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

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

一、简介

====

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

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

二、Vue.js实现hello world

=====================

Document

三、创建代码片段

========

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

{

“vue htm”: {

“scope”: “html”,

“prefix”: “vuehtml”,

“body”: [

“”,

“<html lang=“en”>”,

“”,

" <meta charset=“UTF-8”>",

" <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>",

" <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>",

" Document",

“”,

" <div id=“app”>",

“”,

" ",

" <script src=“vue.min.js”>",

" 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: ‘
- 首页
- 学员管理
- 讲师管理
’

})

六、生命周期

=======

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

//===创建时的四个事件

beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行

console.log(this.message) //undefined

this.show() //TypeError: this.show is not a function

// beforeCreate执行时，data 和 methods 中的数据都还没有没初始化

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。
- 前端字节跳动真题解析
- 【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。