vue第一步雀氏...
# `Vue`快速入门
## 一、课程大纲
1、什么是`Vue`
2、`Vue`快速入门
3、`Vue`实例选项
4、`Vue`常见指令
## 二、课程内容
### 1、什么是`Vue`
官方网站：`https://vuejs.org`
中文网站：`https://cn.vuejs.org`
访问官方网站，包含了该框架的基本介绍、生态技术链、官方文档介绍
关于`Vue`的介绍
> `Vue` (读音 `/vjuː/`，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，`Vue` 被设计为可以自底向上逐层应用。`Vue `的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链](https://cn.vuejs.org/v2/guide/single-file-components.html)以及各种[支持类库](https://github.com/vuejs/awesome-vue#libraries--plugins)结合使用时，`Vue `也完全能够为复杂的单页应用提供驱动。
>
> - 渐进式框架？框架本身支持项目的功能开发，以及后续的功能逐步拓展，可以很方便进行**拓展维护**
> - 自底向上逐层应用? 前端应用包含了需要渲染的**[数据]**以及数据操作**[逻辑]**和最终的数据**[渲染]**
> - 只关注视图层? 前端应用项目的结果，就是视图交互界面，侧重于界面**操作和渲染性能**
> - 便于整合？通过`Vue`框架接管**项目**数据，管理数据在界面上的处理过程
> - 单页应用？构建的前端项目，只包含一个`html`网页，所有界面的切换都是在**一个页面**中执行的
> - 驱动？专有名词，描述的是**支持的技术体系**
结论：什么是`Vue`
> `Vue`是一个简单易用的、易于整合项目的、用于**快捷构建前端应用**的、渐进式开发框架！
关于一些疑问：
> ① 好像这句话并没有描述清楚`vue`的特点
>
> 因为对于一些专业名词了解不多，所以感觉这句话中好像少了很多特性没有说，其实开发人员对于一个技术掌握比较熟练了，会通过一个简单的名词可以包含很多特性和含义
>
> ② 我掌握这些专业名词对开发项目没有意义？
>
> 对于开发人员个人来说，学习掌握了一门技术，工作的过程中才会创造价值；需要了解/熟悉这些专业名词应对面试，另外在工作过程中和其他人协同开发时能有效的进行沟通
### 2、快速入门
构建一个基本`html`网页，添加`vue`支持
官方推荐在普通`html`网页中，可以使用`CDN`方式引入`vue`进行开发
```html
<!-- 开发版本：包含了注释、格式、缩进、有意义的变量名称，方便查看和调试；体积较大 -->
<!-- 适用于开发过程中 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产版本：将文件中的注释、缩进、空格等进行了压缩，减小文件体积提高了加载效率-->
<!-- 适用于项目部署后 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```
> 备注：关于入门应用的中一些专业名词
>
> ① `CDN`
>
> 描述了一种**网络文件分发服务器**，将需要的一些公共文件放到这样的服务器上，任何联网使用它们的人都可以在任意就近的网络中获取这个文件
>
> ② 开发版本/生产版本
>
> 描述了一种技术文件，在项目中的存在形式，开发版本一般包含原始的代码格式通常用于项目开发时方便编写代码和调试代码
>
> ```js
> // say hello
> function sayHello() {
> console.log("hello")
> }
> ```
>
> 生产版本只保留代码功能，对代码中出现的注释、空白字符、长名称变量进行压缩，减小文件体积，提高文件的加载效率
>
> ```js
> function s(){console.log('hello')}
> ```
案例：`demo01快速入门.html`
- 将`cdn`文件直接下载到本地使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<!-- 引入vue支持 -->
<script src="./vue.js"></script>
<script>
// 创建了一个Vue实例
const app = new Vue({
el: "#app",
data: {
msg: "你好,vue!"
}
})
</script>
</body>
</html>
```
快速入门：执行原理如图所示
### 3、`Vue`实例选项
`Vue`应用中，核心对象就是`new Vue({})`，各项功能都是通过选项进行添加的，常见的选项如下：
- #### `el`选项
`el`：`element`缩写，表示节点、标签、元素的意思
`Vue`实例中，用于挂载/绑定一个`html`标签
- #### `data`选项
`data`：数据的意思，描述了当前`Vue`实例对象管理的数据，以`key:value`键值对的形式出现
在`el`挂载的标签内部，可以直接使用`data`中声明的数据
- #### `watch`选项
`watch`：查看、监看的意思，用于自动监听某个数据的变化
- #### `computed`选项
`computed`：计算、运算的意思，用于根据数据的变化完成自动计算的操作
- #### `methods`选项
`methods`：方法、函数的意思，用于在实例中声明可以调用的函数
- #### `filters`选项
`filters`：过滤器的意思，用于在实例中按照条件进行数据筛选的函数
- #### `components`选项
`components`：组件的意思，用于在实例中将一些重复的代码进行封装的操作
- #### 更多选项
更多的选项操作，后续的课程中逐个进行详细讲解，让大家逐步掌握各种选项在项目应用中的操作方式
### 4、指令`Directive`
`Vue`中将一些基础的`DOM`操作封装成了指令，固定语法`v-指令名称`，方便开发人员管理页面数据
#### （1）`v-text/v-html`
指令含义：数据渲染
指令作用：将指定的变量中的数据，展示到页面中
注意事项：`v-html`使用的时候需要注意`xss`代码注入漏洞
```html
<div id="app">
<h2>1、插值表达式</h2>
<p> {{ msg }}</p>
<h2>2、v-text、v-html</h2>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "<h3>hello vue!</h3>"
}
})
</script>
```
#### （2）`v-once`
指令含义：用于一次性操作数据
指令作用：在一些数据渲染时，不需要实时更新，只需要加载一次即可
注意事项：`vue`中由于数据双向绑定，每个数据可以直接更新视图；`v-once`只在第一次操作时生效
```vue
<h2>3、v-once</h2>
<p v-text="msg" v-once></p>
```
#### （3）`v-if/v-show`
指令含义：用于条件判断是否展示指定`DOM`
指令作用：用于在页面上控制视图进行显示/隐藏
注意事项：`v-if`通过`DOM`挂载方式判断显示/隐藏、`v-show`通过`display`样式控制显示/隐藏
结论：如果一个元素需要频繁的进行显示隐藏操作，建议使用`v-show`，性能上有一定的优化
```vue
<h2>4、v-if、v-show</h2>
<p v-if="isShow">赳赳老秦，共赴国难，血不流干，死不休战</p>
<p v-show="isShow">天子守国门，君王死社稷</p>
```
#### （4）`v-if/v-elif/v-else`
指令含义：条件判断指令
指令作用：根据不同的条件显示不同的内容
注意事项：使用`v-if`操作时，一定是页面中显示/隐藏操作**并不频繁的页面视图**
```vue
<h2>5、v-if/v-else-if/v-else</h2>
<p v-if="nation === '秦朝'">赳赳老秦，共赴国难，血不流干，死不休战</p>
<p v-else-if="nation === '明朝'">天子守国门，君王死社稷</p>
<p v-else-if="nation==='汉朝'">普天之下莫非王土，率土之滨莫非王臣，犯明犯我大汉天威者，虽远必诛</p>
<p v-else>泱泱中华</p>
<p v-if="roleid===1">尊敬的管理员您好，欢迎访问本系统</p>
<p v-else-if="roleid===2">尊敬的会员您好，欢迎访问本系统</p>
<p v-else>游客您好</p>
```
#### （5）`v-for`
指令含义：列表渲染指令
指令作用：将页面中的数据数据循环渲染展示到页面中
注意事项：该列表渲染指令，一般需要结合`key`属性进行数据绑定，后续事件操作时详细说明
```vue
<h2>6、v-for</h2>
<ul>
<li v-for="(t, index) in techs">
{{ index }} - {{ t.id }} - {{ t.name }}
</li>
</ul>
```
#### （6）`v-bind`
指令含义：属性动态绑定指令
指令描述：通过变量的方式动态维护一个标签的属性值
注意事项：需要动态改变标签属性时，可以选择通过`v-bind`指令进行操作
```html
<h2>7、v-bind</h2>
<img v-bind:src="result"
style="width: 200px; height: 200px;"/>
<img :src="result"
style="width: 200px; height: 200px;"/>
<!--
result: "./images/success.webp" or "./images/failed.webp"
result变量数据发生变化，动态改变图片src路径
-->
```
#### （7）`v-on`
指令含义：给标签添加事件操作
指令描述：通过`v-on:事件名称`可以给一个标签添加事件操作函数，完成事件处理
注意事项：事件绑定的函数一定要出现在实例的`methods`选项中才能生效
```vue
<h2>8、v-on</h2>
<!-- 绑定事件的处理指令 -->
<button v-on:click="changeResult">[标准语法]改变结果</button>
<button @click="changeResult">[快捷语法]改变结果</button>
<img v-bind:src="result"
style="width: 200px; height: 200px;"/>
<img :src="result"
style="width: 200px; height: 200px;"/>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
....
result: "./images/success.webp"
},
methods: {
changeResult() { // 声明在实例选项methods中的事件处理函数
this.result === "./images/success.webp"?
this.result = "./images/failed.webp":
this.result = "./images/success.webp"
}
}
})
</script>
```
#### （8）`v-model`
指令含义：数据双向绑定指令
指令描述：`Vue`中用于操作表单元素的指令，可以很方便的维护表单数据
```vue
<h2>9、v-model</h2>
<input type="password" v-model="pwd" placeholder="请输入密码"/>
<p>记录数据：{{ pwd ? pwd : '等待记录' }}</p>
<p>记录数据：{{ pwd || '等待记录' }}</p>
```
#### （9）`custom directive`
指令含义：自定义指令
指令描述：项目需要一些基础`DOM`操作，可以封装自定义指令完成简单功能
注意事项：由于现在`Vue`组件化开发的流行，自定义指令的操作方式已经很少
① 全局指令
```vue
// 定义完成后，任意Vue实例中都可以使用这个指令
Vue.directive('指令名称', {
inserted: function(el) { 指令处理函数 }
})
```
② 局部指令
```vue
const app = new Vue({
el: "#app",
data: {...},
....
directives: {
'指令名称': function(el) { 指令处理函数 }
}
})
```
③ 代码操作：页面加载时获取焦点
```vue
<h2>10、自定义指令</h2>
<input type="text" v-focus>
<script src="./vue.js"></script>
<script>
// ① 全局指令
/*Vue.directive('focus', {
inserted: el => {
el.focus()
}
})*/
const app = new Vue({
el: "#app",
data: {...},
...
directives: { // ② 局部指令，只在当前实例范围中生效
focus: {
inserted: el => {
el.focus()
}
}
}
})
</script>
vue第一步雀氏...相关推荐
- 【JDK配置】雀氏纸尿裤，天才第一步
第一步:下载并安装JDK 第二步:环境变量配置 win + R 输入命令[sysdm.cpl]打开系统属性 选择环境变量 选择系统变量并新建 JAVA_HOME D:\JDK\jdk1.8.0.131 ...
- 使用html测试数据库连接与操作（含界面） 第一步界面设计
前面写的那篇文章,只是实现了页面刷新就读取数据库的过程,还不能有人工干预,还不像一个正式的东东,这可能和我以前写c#养成的习惯似的,总想弄的完美点,第一步先吧界面弄出来,说实话,具体怎么通过按钮出发p ...
- 每日三道前端面试题--vue 第一弹
每日三道面试题--vue 第一弹 1.对vue渐进式框架的理解 2.v-if 和v-show的区别 3.MVC.MVP和MVVM的区别 一.MVC 1.视图(View):用户界面. 2.控制器(Con ...
- Python程序员辞职后，如何踏出自由职业的第一步，聊聊我自己的看法
大家好,我是兴哥.有个广州的朋友说他辞职了,想要自由职业该怎么开始第一步呢?我问他你之前的收入月薪是多少,他说2万出头.我不得不说,对于写项目的自由职业程序员,2万是一个极高的门槛.但既然他已经辞职了 ...
- 使用myeclipse的第一步
使用myeclipse的第一步 将以下代码copy放在一个包中运行,然后在控制台输入任意字符,回车,然后控制台打印一串密匙,这里你输入的就是账号,控制台返回的就是注册码,点击MyEclipse-> ...
- python安装包_迈出Python学习第一步：Python开发环境的下载与安装
所谓"磨刀不误砍柴工"."工欲善其事,必先利其器",都在告诉我们一个道理:要做好一个事情,事先做好充分的准备工作是非常重要的.所以在我们正式学习用Python编 ...
- ecshop入门第一步，替换ecshop模板的显示图片
所有的都是模范默认模板来制作,所以应该参考默认模板的一些数据设置 1.找到themes\default\images文件夹下 screenshot.png 图片 默认如下: 在你的模板文件夹下新建一个 ...
- python采集第一步
2019独角兽企业重金招聘Python工程师标准>>> 上次说要做一个http://www.m4493.com/的美女站点,需要使用python进行数据采集 接下来我们就开始采集数据 ...
- 初学架构设计的第一步：需求、愿景与架构
初学架构设计的第一步:需求.愿景与架构 了解<需求>.<愿景>与<架构>三者的关系.也就是<需求分析>.<观想愿景>与<架构设计> ...
最新文章
- android如何展示富文本_android高仿今日头条富文本编辑(发布文章)
- 2021CCF BDCI 大数据与计算智能大赛参赛指南
- 悟透 JavaScript
- 基于点线特征避免单目视觉SLAM的退化
- DARPA新局长维多利亚·科尔曼展望未来发展
- stdarg.h的库函数用法小结
- 第一范式，第二范式，第三范式，BCNF范式理解
- PHP与ThinkPHP读写文件
- 区块链开发中的9大应用场景
- 2020云课堂智慧职教答案计算机,2020云课堂智慧职教答案英语,云智慧职教题库,智慧职教测试答案...
- 计算机等级考试无纸化模拟软件（免费版）
- 如何在旋转屏幕后不再重建Activity
- 苹果微信多开_怎样才能下载两个微信
- 一份理想的程序员工作
- docker安装和基础知识要点
- 互联网摸鱼日报（2022-10-21）
- 初探数通网络开放可编程简介
- JSON.parse()、JSON.stringify、 parseInt()
- C2429 语言功能“结构化绑定“需要编译器标志“/std:c++17“
- 联想女杰马雪征：三年内要带联想走向国际