vue基础学习（一）

淩亂°似流年 2021-12-11 09:19 410阅读 0赞

本来要做一篇写好了的，结果新浪微博把下半篇截取了，不知道咋回事，一点也不好用！！！好大气！！  
但是如果看到下半篇想看上半篇的亲们可以从链接跳过去

# 1、vue的了解 #

## 01-学习准备 ##

**1、** **vue****浏览器插件的下载**

**(1)    **  **点击谷歌浏览器右上角**

[![vue基础学习（一）][vue]][vue_vue][![vue基础学习（一）][vue]][vue_vue 1]

**(2)    **  **选择以下文件即可**

[![vue基础学习（一）][vue]][vue_vue 2] [![vue基础学习（一）][vue]][vue_vue 3]

**2****、****vscode****插件****live  server****插件的使用**

(1)      安装live server插件

(2)     ctrl+shift+p  输入live  server  即可以服务器形式启动项目，即使文件内容更改浏览器不需要刷新也会自动更改

[![vue基础学习（一）][vue]][vue_vue 4]

**2、** **.vue****后缀文件实现补全方式**

**(1)    **  **在文件****->****首选项****->****设置****->****添加以下代码即可**

"emmet.syntaxProfiles": \{

"vue-html":  "html",

"vue":  "html"

\},

"emmet.includeLanguages": \{

"vue-html":  "html",

"vue":  "html"

## 02-为什么学vue ##

[![vue基础学习（一）][vue]][vue_vue 5]

**原始方法****(****左边****)****和****Vue(****右边****)****：**

[![vue基础学习（一）][vue]][vue_vue 6][![vue基础学习（一）][vue]][vue_vue 7]

## 03-vue版helloworld体会MVVM ##

MVC：对项目的整体把控,M代表的是数据库中的数据,V代表的是前端的视图层，C用于处理M和V之间进行交互的业务逻辑(业务逻辑需要程序员自己控制，自己编写)

MVVM:主要用于一些前端的框架,对MVC三层架构中的视图层再次进行层次划分，M是当前一个视图中需要用到的数据,V就是当前视图,VM负责M和V之间的数据调度,内部已经帮你完成了数据的绑定和交互

MVC和MVVM之间的区别:MVC数据流通是单向的,MVVM是双向数据绑定

双向数据绑定的意思就是模型中的数据可以之间更新到视图上,视图中的数据发生改变也可以直接更新到模型中能够做到双向数据绑定(通信)的原因:就是因为有VM的存在，VM内部的实现一般是框架已经处理完成,不需要程序员进行控制

[![vue基础学习（一）][vue]][vue_vue 8]  
  
[![vue基础学习（一）][vue]][vue_vue 9]  
  
[![vue基础学习（一）][vue]][vue_vue 10]

**1****、****vue****的使用方法：**

(1)      引入一个vue.js文件

(2)      创建一个实例，监管html代码

①     var  vm=new Vue();

(3)      通过el属性指定vue实例监管的范围,它的值是一个id的值

①    el:”id的值如：’\#app’”

(4)      通过data保存数据

①    data:\{msg:”hello world”\}

(5)      展示文本 \{ \{\}\}

①

\{ \{msg\}\}\}

[![vue基础学习（一）][vue]][vue_vue 11]

# 2、vue系统指令 #

## 04-插值表达式的使用 ##

**1****、配置用户代码片段的方法：**

(1)     Ctrl+shift+p之后再输入框中输入snip选中配置用户代码片段

[![vue基础学习（一）][vue]][vue_vue 12]

(2)      在新窗口中输入html

(3)      找到提供好的html.json文件，复制html.json文件中的代码粘贴至输入html后的新窗口(html.json)中即可

[![vue基础学习（一）][vue]][vue_vue 13]

(4)      再到新建的.html文件中输入vue即可呈现代码结构

**2****、****reverse()****方法的使用**

[![vue基础学习（一）][vue]][vue_vue 14]

**3****、文本的渲染方法：插值表达式**

![vue基础学习（一）][vue]![vue基础学习（一）][vue]

## 05-v-text指令使用 ##

[https://cn.vuejs.org/v2/api/][https_cn.vuejs.org_v2_api]

**1、** **v-text****的使用方法：**** **  **不能渲染带标签的文本**

**(1)    **  **在标签元素属性位置输入****v-text=”****属性名****”**

**2、** **v-text****和插值表达式的区别**

**(1)    ** **v-text****是写在标签元素属性的位置而插值表达式是写在标签的****innerHTML****位置**

## 06-v-html指令的使用 ##

**1****、****v-html****的使用方法****  (****可以渲染标签元素****)**

(1)   v-html是写在标签元素的属性位置，可以渲染带标签元素的文本，并将其以子元素显示出来

[![vue基础学习（一）][vue]][vue_vue 15]

(2)     v-text :

[![vue基础学习（一）][vue]][vue_vue 16]

## 07-v-bind指令的使用 ##

**1****、****v-bind****的使用****  (****可以绑定属性和类名****)**

(1)      可以用来动态绑定属性： v-bind:属性名=”data里面的属性值”

(2)      简洁写法： :属性名=”data里面的属性值”

(3)     v-bind动态绑定样式： :class=”\{‘样式类名’:布尔值\}”

①     值若为false,则类名样式不会生效

②     值若为true,则会显示类名样式

[![vue基础学习（一）][vue]][vue_vue 17]

## 08-v-for指令的使用（上） ##

**1****、****v-for****可以遍历数组和对象**

[![vue基础学习（一）][vue]][vue_vue 18]  
[![vue基础学习（一）][vue]][vue_vue 19]

## 08-v-for指令的使用（下） ##

**1****、以下方法不能实现数据改变**：数组的长度\+数组下标去改变数组内容

如：vm.user.length=0 &&  vm.user\[0\]=\{name:’张三’,age:22\}

[![vue基础学习（一）][vue]][vue_vue 20]

**2****、改变数组中的内容方法：**

1、Vue.set(需要改变的数组,数组里的项即数组的下标,改变后的值)

**Vue.set(vm.user,0,\{name:"44",age:44\})**

**3****、****splice()****方法删除数组中的内容**

**vm.user.splice(0,1) **  **从数组中的第****0**  **项开始，删除一项**

**3、** **:key=”index”****的作用**

**(1)    **  **提高代码的唯一性**  **类似于****id**

## 09-v-model双向数据绑定 ##

**1、** **v-model****的双向数据绑定理解和使用范围**

(1)     model和view中的值同时发生改变

(2)        只能在input+textarea+select中使用

## 10- v-on事件绑定 ##

**1****、****v-on****的使用方法**

**(1)    **  在标签的属性位置:  v-on:事件名=”事件的执行函数”

**(2)    **  简写方式： @click=”changeMsg”

(3)      函数名写在methods中

**2、**  **如何在事件方法****methods****里获取****data****中的属性**

(1)      获取data中的属性需要加上this即可  如 data中有name在methods中获取即：this.name

(2)     this  指的就是vm这个实例

[![vue基础学习（一）][vue]][vue_vue 21]

**3、**  **事件对象的获取和定义**

(1)     @click=getEvent($event)   注意：这里只能是$event

(2)     methods中可以随意起名  getEvent(随意起名)

[![vue基础学习（一）][vue]][vue_vue 22]

**4、**  **按键修饰符**

(1)     https://cn.vuejs.org/v2/api/\#v-on

[![vue基础学习（一）][vue]][vue_vue 23]

**5、**  **如何获取键盘码以及函数的另一种写法**

[![vue基础学习（一）][vue]][vue_vue 24]

最后submit()\{\}和submit:function()\{\}是一样的，可以选择适合自己的即可

## 11- v-if和v-show ##

**1****、****v-if****和****v-show****的作用**

(1)      用来控制元素的显示和隐藏

(2)     v-if=”布尔值” v-show=”布尔值”   即: v-if=true||false

**2、** **v-if****和****v-show****的区别和使用场景**

**(1)    ** **v-if****是控制元素的现实和隐藏****  (****隐藏是直接将元素移除****)**

**(2)    ** **v-show****是控制元素的样式显示和隐藏****  (****隐藏是直接将元素设置样式为****display:none)**

**(3)    **  **涉及大量****dom****操作就用****v-show,**  **涉及到异步数据渲染就用****v-if**

[![vue基础学习（一）][vue]][vue_vue 25]

** **

[![vue基础学习（一）][vue]][vue_vue 26]

## 12- v-if补充 ##

**1****、****v-if****的条件判断**

[![vue基础学习（一）][vue]][vue_vue 27]

## 13- v-cloak指令使用 ##

**1、**  **如何解决初次进入页面出现闪烁问题？**

**(1)    **  **初次进入让标签隐藏，当加载完成后****v-clock****会被自动移除**

[![vue基础学习（一）][vue]][vue_vue 28]

# 3、vue案例 #

## 14-  案例：列表数据渲染 ##

**步骤分析：**

**1、**  **定义数组****list\[\{id:1,name:”AA”,cTime:new Date()\}\]**

**2、** **V-for=”(item,index) in  list”**

**3、**  **渲染数据**

[![vue基础学习（一）][vue]][vue_vue 29]

## 15-  案例：列表数据删除 ##

**步骤分析：**

1、  给每个删除按钮绑定一个点击事件,需要传入一个索引才可获取大零钱电机的哪个

2、  点击事件中执行移除数组中的第几项，根据索引移除 this.list.splice(index,1)

[![vue基础学习（一）][vue]][vue_vue 30]

## 16-  案例：列表数据添加 ##

**1****、添加步骤分析：**

1、  给添加按钮绑定点击事件

2、  给表单设置双向数据绑定  即表单设置v-model=”data中定义的属性”

3、  把数据添加至数组中  添加获取list是this.list.push(\{\})

[![vue基础学习（一）][vue]][vue_vue 31]

**2****、没有品牌数据显示**

**(1)    **  **判断数据的长度****list.length==0****就显示**

[![vue基础学习（一）][vue]][vue_vue 32]

# 4、  系统指令汇总 #

`{ {}}`**:****插值表达式**

作用:将vue对象中的数据以及表达式显示到vue托管区域中 {
          {
          这里书写vue对象中data里面的数据或者表达式}}

`v-cloak`**:****解决表达式闪烁问题**

1. 定义一个样式 2. 使用

\{ \{name\}\}

原理:当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,当vue.js能够起作用时,会自动删除v-cloak指令

`v-text`**:****输出文本数据**

`v-html`**:****输出HTML结构数据**

data：{
          name：'zs' }

`v-bind`**:****动态给标签或者组件绑定属性**

// 使用:简写v-bind

// 变量和常量组合
    跳转
    data：{
         
    cls: 'red blue',
    id: 1
    }

`v-on`**:****绑定事件**

// 简写

methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
           show: function () {
         
             
           }
    }

`v-model`**：双向数据绑定**

// 可以使用的标签:input textarea select 组件 // name会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化

`v-for`**:****循环输出HTML元素**

\{ \{item.name\}\}

`v-if`**：根据表达式值的真假决定元素的显示隐藏**

// isShow为true显示div 为false隐藏div // v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除

`v-show`**:** **根据表达式值的真假决定元素的显示隐藏**

// isShow为true显示div 为false隐藏div // v-show是操作div的样式 显示时添加 style = 'display:block'; 隐藏时添加style = 'display:none'

v-if 是删除DOM元素 效率比较低 会造成页面的结构重新绘制
    v-show 是控制样式 只会改变当前这一个元素的样式 不会造成页面结构的重新绘制

[vue]: /images/20211211/7a23c0589eef4c2fa80230beb3553351.png
[vue_vue]: http://album.sina.com.cn/pic/006aUQVqzy7vggiMSeM8c
[vue_vue 1]: /images/20211211/d215239538874c66be1ae0470036fccf.png
[vue_vue 2]: http://album.sina.com.cn/pic/006aUQVqzy7vggoav60a0
[vue_vue 3]: /images/20211211/f83d9a0b843a437b9f502bf6329ec2bf.png
[vue_vue 4]: /images/20211211/b6561a947e16493f9f2b283f3e5eb1f8.png
[vue_vue 5]: /images/20211211/52bbbfe4d82041689c6df8b90ffb7ebd.png
[vue_vue 6]: http://album.sina.com.cn/pic/006aUQVqzy7vggwbfch5d
[vue_vue 7]: /images/20211211/2da853af2677406fbd759c543baf10ef.png
[vue_vue 8]: /images/20211211/367a3b871954484fb3516dffddfbc34e.png
[vue_vue 9]: /images/20211211/7addd0c02a9b4d4ab607708424dbe9bb.png
[vue_vue 10]: /images/20211211/93e2ddccdeb8426ba080cdb9ea302055.png
[vue_vue 11]: /images/20211211/beef59d37d1f4e33bff314601ad8aad5.png
[vue_vue 12]: /images/20211211/d386845d813a47d9bb71a4483c58ecf3.png
[vue_vue 13]: /images/20211211/ad7e9227c6ae4ebcb88b35af550031a2.png
[vue_vue 14]: /images/20211211/32e82a84f9ce4436beef769ececa0175.png
[https_cn.vuejs.org_v2_api]: https://cn.vuejs.org/v2/api/
[vue_vue 15]: /images/20211211/bceca1f0a09f471694dd14b91398fe5b.png
[vue_vue 16]: /images/20211211/949c3cb4ed8c4af88cc3de3eaf8baeeb.png
[vue_vue 17]: /images/20211211/0d31e49f82a341b88e1732ba472ee054.png
[vue_vue 18]: /images/20211211/bbe1c444fbb94ae484e66ff5a32170e4.png
[vue_vue 19]: /images/20211211/6ae89365d1c34f5b81f43d203e7de7c2.png
[vue_vue 20]: /images/20211211/b6862469c7e94ab4bfdd4d7e00b3e363.png
[vue_vue 21]: /images/20211211/de1e313880ee4da18da38d713311d6cd.png
[vue_vue 22]: /images/20211211/81b33402bc624f43a93bdfde6248a885.png
[vue_vue 23]: /images/20211211/ceae0687faa646a1b4301bece30a8fe4.png
[vue_vue 24]: /images/20211211/910a7cab9ff84a9bb2a6e680dedb5727.png
[vue_vue 25]: /images/20211211/8c1d7a7ebca24a4484b6da1b0b7eedf8.png
[vue_vue 26]: /images/20211211/b5b152cb320b48ba99fc43319f9af279.png
[vue_vue 27]: /images/20211211/e69d1d1fc283442abc6b7db70e25aa91.png
[vue_vue 28]: /images/20211211/cd535c80e176434e8cd2075ae03ef2c1.png
[vue_vue 29]: /images/20211211/c5894a3910d743bab5c20f86bfb2ecd3.png
[vue_vue 30]: /images/20211211/3ccd9ca8b3784e5a854d5e360f417066.png
[vue_vue 31]: /images/20211211/f40248e0687440b7b0293e2e60d63ddb.png
[vue_vue 32]: /images/20211211/b84e4358ddf4417b9e7f01779d129258.png