vue学习笔记1——vue相关概念、相关操作

朴灿烈づ我的快乐病毒、 2022-04-13 04:22 272阅读 0赞

**目录**

一、相关概念

1，为什么要用框架？

2，框架和库的区别

3，后端的MVC与前端的MVVM

二、相关操作

1，如何使用vue

（1）导入vue包

（2）创建vue实例，我们new出来的vue就是vm

（3）在页面中使用vue

2，解决时延显示问题

3，v-text、v-html

4，v-bind

5，v-on 绑定事件

6，事件修饰符

7，v-model

8，使用class样式

（1） 数组

（2） 数组中使用三元表达式

（3） 数组中嵌套对象

（4） 直接使用对象

9，使用内联样式

10，v-for

（1）遍历数组

（2）遍历数组对象

（3）遍历对象

11，v-for中key的使用

12,v-if

13,v-show

--------------------

代码请参考我的github：

[https://github.com/masterzz/vue-learn][https_github.com_masterzz_vue-learn]

# 一、相关概念 #

Vue是最火的一个框架，React是最流行的一个框架（React可以开发网站和手机app；Vue也是可以进行PC和APP端开发）

Vue、Angular、React并称为前端三大框架，Vue只关注视图层，并且便于和第三方库进行整合。

## 1，为什么要用框架？ ##

就是为了提升开发效率，时间就是金钱。

提升开发效率的发展历程：原生JS（兼容性问题）——>JQuery（解决兼容性问题，生成dom元素的拼接问题）——>前端模板引擎（解决dom生成问题）——>vue、react、angular（解决dom过多渲染问题，提高渲染效率；双向dom绑定；解决程序员不用关心dom元素，专心于业务逻辑）

在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

## 2，框架和库的区别 ##

框架是一套完整的解决方法；对项目的侵入性较大，如果需要换框架，则需要重新架构整个项目。

库（插件）：提供一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

## 3，后端的MVC与前端的MVVM ##

MVC是后端的分层开发概念

MVVM是前端视图层的概念，视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDU5NjEx_size_16_color_FFFFFF_t_70][]

# 二、相关操作 #

## 1，如何使用vue ##

## （1）导入vue包 ##

## （2）创建vue实例，我们new出来的vue就是vm ##

对其中几个地方进行说明：

1.  el表示我们new出来的vue对象控制的是页面上的哪个区域；
2.  data中存放的是el要用到的数据；
3.  通过vue提供的指令就能很方便的将数据渲染到页面上，前端vue框架不提倡我们手动去操作dom

var vm = new Vue(\{

el: '\#vue\_det',

data: \{

site: "菜鸟教程",

url: "www.runoob.com",

alexa: "10000",

message:'zhubr is a genius',

class1: false

\},

methods: \{

details: function() \{

return this.site + " - 学的不仅是技术，更是梦想！";

\});

### （3）在页面中使用vue ###

<h1>message : \{ \{message\}\}</h1>

<h1>\{ \{details()\}\}</h1>

</div>

可以看出，页面中是不用调用dom，可以直接指定相关dom进行操作。以上内容，分别对应mvvm三个部分：<div id="vue\_det">对应v部分，new Vue()则对应vm部分，在vue中的data则对应m。

## 2，解决时延显示问题 ##

<h1>message : \{ \{message\}\}</h1>

<h1>\{ \{details()\}\}</h1>

</div>

如果引入js在代码之后，可能在渲染之前显示出site : \{ \{site\}\}之类的内容，可以做如下修改，加入一个样式：

<style>

\[v-cloak\] \{

display:none;

</style>

在修改div：

另外，默认v-text也没有闪烁问题

## 3，v-text、v-html ##

data中数据存在如下数据：

message:'zhubr is a genius',

v-text使用：

如果data中的数据是html标签：

msg2:'<h1>我是一个h1</h1>'

输出时想要输出成html标签，则需要用到如下语法：

## 4，v-bind ##

v-bind提供了绑定属性的功能:

data中存在：

mytitle:'这是我定义的一个按钮'

按钮：

这样就可以把button的title属性变更为mytitle中的内容了。

v-bind会将""内的内容当作表达式来执行。

注意：

也可以这么写：

则title属性为：这是我定义的一个按钮123

v-bind里可以定义合法的表达式

v-bind的缩写是 :

## 5，v-on 绑定事件 ##

以button为例：

v-on:click="show"表示，在单击按钮时，调用show方法：

在new Vue(\{\})中添加method：

methods: \{

show:function() \{

alert('click');

这样就能实现单击按钮后显示 click。

当然v-on也可以绑定其他时间，比如 v-on:mouseover 之类

v-on的简写是 @

所以这段话：

可以改成：

## 6，事件修饰符 ##

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

示例代码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.inner \{

height: 150px;

background-color: darkcyan;

.outer \{

padding: 40px;

background-color: red;

</style>

</head>

<body>

<!-- <div class="inner" @click="div1Handler">

</div> -->

<!-- <div class="inner" @click.capture="div1Handler">

</div> -->

<!-- <div class="inner" @click="div1Handler">

</div> -->

<!-- <div class="outer" @click="div2Handler">

</div>

</div> -->

<!-- <div class="outer" @click="div2Handler">

</div>

</div> -->

</div>

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue(\{

el: '\#app',

data: \{\},

methods: \{

div1Handler() \{

console.log('这是触发了 inner div 的点击事件')

\},

btnHandler() \{

console.log('这是触发了 btn 按钮 的点击事件')

\},

linkClick() \{

console.log('触发了连接的点击事件')

\},

div2Handler() \{

console.log('这是触发了 outer div 的点击事件')

\});

</script>

</body>

</html>

## 7，v-model ##

v-model是唯一一个实现数据双向绑定的标签

而v-model则可以实现数据的双向绑定，不仅可以从M到V，而且可以从V到M

像input、select、checkbox、textarea都可以使用v-model

## 8，使用class样式 ##

### （1） 数组 ###

<h1 :class="\['red', 'thin'\]">这是一个邪恶的H1</h1>

### （2） 数组中使用三元表达式 ###

<h1 :class="\['red', 'thin', isactive?'active':''\]">这是一个邪恶的H1</h1>

### （3） 数组中嵌套对象 ###

<h1 :class="\['red', 'thin', \{'active': isactive\}\]">这是一个邪恶的H1</h1>

### （4） 直接使用对象 ###

<h1 :class="\{red:true, italic:true, active:true, thin:true\}">这是一个邪恶的H1</h1>

## 9，使用内联样式 ##

1. 直接在元素上通过 \`:style\` 的形式，书写样式对象

<h1 :style="\{color: 'red', 'font-size': '40px'\}">这是一个善良的H1</h1>

2. 将样式对象，定义到 \`data\` 中，并直接引用到 \`:style\` 中

在data上定义样式：

data: \{

h1StyleObj: \{ color: 'red', 'font-size': '40px', 'font-weight': '200' \}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 \`:style\` 中通过数组，引用多个 \`data\` 上的样式对象

在data上定义样式：

data: \{

h1StyleObj: \{ color: 'red', 'font-size': '40px', 'font-weight': '200' \},

h1StyleObj2: \{ fontStyle: 'italic' \}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="\[h1StyleObj, h1StyleObj2\]">这是一个善良的H1</h1>

## 10，v-for ##

### （1）遍历数组 ###

data中有一个数组：list:\['a','b','c','d','e'\]

遍历：

要想加上索引：

### （2）遍历数组对象 ###

list:\[

\{id:1, name: 'zs1'\},

\{id:2, name: 'zs2'\},

\{id:3, name: 'zs3'\},

\{id:4, name: 'zs4'\}

遍历的语法：

要加索引时：

### （3）遍历对象 ###

要获取list键值对：

list:\{

name:'Micheal',

gender:'male',

hobby:'sleep'

遍历：

加入索引：

另外，count可以记录是第几次循环

## 11，v-for中key的使用 ##

通过这个key可以指定相关添加对象的id

<div>

<label>Id:

</label>

<label>Name:

</label>

</div>

<input type="checkbox">\{ \{item.id\}\} --- \{ \{item.name\}\}

</p>

</div>

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue(\{

el: '\#app',

data: \{

id: '',

name: '',

list: \[

\{ id: 1, name: '李斯' \},

\{ id: 2, name: '嬴政' \},

\{ id: 3, name: '赵高' \},

\{ id: 4, name: '韩非' \},

\{ id: 5, name: '荀子' \}

\},

methods: \{

add() \{ // 添加方法

this.list.unshift(\{ id: this.id, name: this.name \})

\});

</script>

## 12,v-if ##

v-if实现隐藏或者显示：

data中数据：

flag:true,

## 13,v-show ##

一个div是否显示，可以用v-show来控制：

data中定义：

flag:false,

div中定义：

<h3 v-show="flag">v-show测试</h3>

那么这个div就不会显示了。

v-if和v-show的区别在于，v-if里的代码完全不会显现，而v-show相当于display:none；

v-if有较高的切换消耗，v-show有较高的渲染消耗。

如果涉及频繁的切换，不要用v-if；但是被显示的可能性较小，则用v-if

[https_github.com_masterzz_vue-learn]: https://github.com/masterzz/vue-learn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDU5NjEx_size_16_color_FFFFFF_t_70]: /images/20220413/d02ca88d90b94c7c9e0c0f987c81936c.png