Vue基础知识总结 1：Vue入门-程序员宅基地
技术标签： JavaScript与Vue基础教程系列 vue.js javascript
作者简介：哪吒，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(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
二、Vue.js实现hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--插值表达式，绑定vue中的data数据-->
{
{message}}
</div>
<script src="vue.min.js"></script>
<script>
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {
//3、定义页面中显示的模型数据
message: 'hello vue!'
}
})
</script>
</body>
</html>
三、创建代码片段
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}四、基础语法
1、单向绑定数据v-bind
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{ {}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
2、双向绑定数据v-model
data: {
searchMap:{
keyWord: '哪吒'
}
}<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{
{searchMap.keyWord}}</p>3、方法methods
4、修饰符
修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为
5、条件渲染
v-if：条件指令
<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>v-show：条件指令
使用v-show完成和上面相同的功能
<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
6、列表渲染
v-for：列表循环指令
例1：简单的列表渲染
<!-- 1、简单的列表渲染 -->
<ul>
<li v-for="n in 10">{
{ n }} </li>
</ul>
<ul>
<!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
<li v-for="(n, index) in 5">{
{ n }} - {
{ index }} </li>
</ul>例2：遍历数据列表
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}<!-- 2、遍历数据列表 -->
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{
{index}}</td>
<td>{
{item.id}}</td>
<td>{
{item.username}}</td>
<td>{
{item.age}}</td>
</tr>
</table>五、组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
1、局部组件
var app = new Vue({
el: '#app',
// 定义局部组件，这里可以定义多个局部组件
components: {
//组件的名字
'Navbar': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})使用组件
<div id="app">
<Navbar></Navbar>
</div>2、全局组件
定义全局组件：components/Navbar.js
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app'
})
</script>六、Vue生命周期
1、Vue实例生命周期流程图
2、Vue实例生命周期钩子函数及其含义
| 钩子函数 | 含义 |
| beforeCreate | Vue实例进行初始化，此时实例的各个组件还没有完全初始化，因此不能访问data、computed、watch、methods的方法和数据，同时，Vue实例的挂载点也没有进行初始化 |
| created | Vue实例初始化完成，此时可以访问data、computed、watch、methods的方法和数据，但是依旧没有进行Vue实例的挂载点初始化 |
| beforeMount | 将实例绑定到模板并进行渲染，但并不会讲实例挂载到页面上 |
| mounted | 讲渲染好的模板绑定到页面上，此时，Vue实例已完全创建好 |
| beforeUpdate | 数据变更时执行，在实例数据更改之前执行自定义逻辑或操作 |
| updated | 将Vue实例更新完成的数据重新渲染到内存中的虚拟DOM中，再讲虚拟DOM应用到页面上 |
| beforeDestroy | Vue实例进入销毁阶段，此时实例上的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
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>2、编写html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>3、编写js
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 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
})
// 现在，应用已经启动了！
</script>
本文收录于，Java基础教程系列，目前已经700+订阅，CSDN最强Java专栏，包含全部Java基础知识点、Java8新特性、Java集合、Java多线程、Java代码实例，理论结合实战，实现Java的轻松学习。
姐妹篇，Java基础教程（入门篇），包含面向对象、基本数据类型、数组、继承和多态、泛型、枚举等Java基础知识点。
姐妹进阶篇，Java基础教程（进阶篇），包含Java高并发、Spring、MySQL等Java进阶技术栈。
全部订阅，可加入Java学习星球，完成Java从入门、实战、进阶全方位的Java知识体系学习。
智能推荐
matlab double to int,如何将matlab中的sym数据类型转换为double型-程序员宅基地
文章浏览阅读7.7k次。满意答案a19850429推荐于 2016.11.30采纳率：47%等级：8已帮助：862人一般来说用dec2hex及hex2dec就可以。ss='010600001388849C';ssDec = hex2dec(ss);ssHex = dec2hex(ssDec);format hex;disp(ssHex);不过前提是你的机器能处理这么大的数。我用小一点的数比如说ss='01600..._matlab将sym类型变为double类型
3NF、BCNF和4NF基本概念和分解-程序员宅基地
文章浏览阅读4.4w次，点赞27次，收藏178次。一、第三范式（3NF）——相对于BCNF，允许存在主属性对候选码的传递依赖和部分依赖定义：如果关系模式R∈2NF，且每个非主属性都不传递函数依赖于R的主关系键，则称R属于第三范式，简称3NF。1、把一个关系模式分解成3NF，使它具有保持函数依赖性算法如下：其中提到了最小函数依赖集，那么最小函数依赖集怎么求呢？方法如下：举个例子：在R（U，F）中，U=ABCDEG，F={B→D，_4nf
oracle表给用户授权_grant select on table to user-程序员宅基地
文章浏览阅读7.8k次。oracle表给用户授权1、命令：grant xxx权限 on Table to USERgrant select,insert,update,delete,all on 表名 to 用户名例如：将test表的查询权限赋予tom这个用户grant select on test to tom2、被授权用户访问的时候需要在表前面添加授权用户名。select * from JF_CCJ.u..._grant select on table to user
MIRO字段控制-程序员宅基地
文章浏览阅读4.8k次。IMG->Materials Management->Logistics Invoice Verification->Incoming Invoice->Maintain Item List Variantst-code: OLMRLIST_miro字段控制
辅助dns集群数据不同步问题解决方案_域控dns记录不同步-程序员宅基地
文章浏览阅读667次。辅助dns集群数据不同步问题的解决方案原本111改称122[root@server12 slaves]# cat /etc/resolv.confnameserver 172.25.254.100[root@server12 slaves]# dig www.westos.orgbbs.westos.org. 86400 IN A 172.25.138.122bbs.westos.org. 86400 IN A 1..._域控dns记录不同步
如何在Excel中将文件大小中有GB、MB的信息转化成统一格式_excel单位换算g换成mb-程序员宅基地
文章浏览阅读6.3k次。已知条件：Excel中导出了一份数据，第一列是日期，第二列是文件大小201509011.87 GB201509021.85 GB20150903219.46 MB20150904227.99 MB现在希望能绘制一个Excel趋势图，问题：将GB、MB进行转换解决办法：1、新增列，计算文件大小的单_excel单位换算g换成mb
随便推点
linux usb驱动详解_usb传输中pipe与urb的关系-程序员宅基地
文章浏览阅读2.7k次。一、USB驱动层次usb采用树形拓扑结构，可分为主机侧与设备侧，每一条USB总线上只有一个主机控制器，负责协调主机与设备之间的通讯，设备不能主动的向主机发送任何消息，如下图所示如上图所示，从主机侧视角去看，在linux驱动中，usb驱动处于最上层，主要表现为usb主机侧的功能具体实现（比如U盘，鼠标，usb camer等），其下为usb核心层，主要完成usb驱动管理以及协议处理，再下为usb..._usb传输中pipe与urb的关系
嵌入式开发学习路线图_嵌入式学习路线-程序员宅基地
文章浏览阅读7.9k次，点赞23次，收藏249次。ARM+Linux嵌入式底层内核驱动方向学习总体路线图 基础学习Ⅰ---Linux入门 目前嵌入式主要开发环境有 Linux、Wince等；Linux因其开源、开发操作便利而被广泛采用。而Linux操作系 统也只是一个简单的操作系统，简单的使用对于嵌入式开发人 员来说价值并不很高，真正有价值的是掌握Lin..._嵌入式学习路线
RTCP的实现 _rtcp实现-程序员宅基地
文章浏览阅读9.3k次。一.Introduction An RTCP implementation has three parts: the packet formats, the timing rules, and the participant database Packet Formats: Timing Rules: 所有的RTCP复合包被周期性送出,这个周期成为reporting interval,所有的R_rtcp实现
缘分-程序员宅基地
文章浏览阅读572次。 大家都在谈缘分，缘分是什么，谁也不知道，但总会经历。 三年前，我们相遇了，不过是同学介绍的。我约她出来了，我想再见她一面，因为我在之前已经看见过她，我知道她是我想要的人。不过我知道，她那时候喜欢另外一个叫宋的男孩，因为我的同学是他的老乡，他告诉我她和宋关系特别好。 那天晚上，我见到了她。穿着一件红色的上衣，背着黑色的小背包，脖子上带着很大一串项链。可是
韩语学习_韩语语法大全知乎-程序员宅基地
文章浏览阅读4k次，点赞4次，收藏19次。在听一首韩语歌的时候，觉得挺好听的，就是不知道内容，此外，韩流在海外也挺流行的，可以抽空学习下，可以吹吹牛哈。参考知乎的一个回答，挺贴合初学者的。文章目录一. 入门第一步——掌握韩语四十音【1.】【2.】【3.】【4.】【5.】【6.】【7.】【8.】【9.】【10.】二. 积累篇——单词量【1】【2】【3】三. 进阶篇——语法掌握【基础语法1】【基础语法2】**습니다**【基础语法3】 **助词**【基础语法4】【基础语法5】【基础语法6】【基础语法7】【基础语法8】【基础语法9】【基础语法10】【._韩语语法大全知乎
【LEDE】树莓派上玩LEDE终极指南-76-ssr-monitor无法启动的问题_lede 路由监控 无法开启-程序员宅基地
文章浏览阅读2.1k次。ssr-monitor是一个脚本，依赖于bash（因为里面用到了local方法），所以普通的ash是无法运行这个脚本的，这就是为啥明明启动了监视器功能，却ps不到该进程。遂将脚本开头改成了#!/bin/bash ，完美解决。不要忘记opkg install bash!!!..._lede 路由监控 无法开启