枫枫知道个人博客|枫枫知道--Vue全系列课程

[[ slide_text ]]

[[ item.content ]]

枫枫知道--Vue全系列课程

发布时间：2022-02-10 作者：枫枫来源：枫枫知道个人博客

Vue javascript

# vue基本概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue的核心库关注于视图（html），不仅易上手，还便于与第三方库或项目整合。

渐进式：一步一步，不是将所有的东西都学完才能使用。

自底向上设计：一种设计程序的过程和方法，就是先编写出基础程序段，然后在逐步扩大规范、补充和升级某些 功能，实际上是一种自底向上构造程序的过程。

Vue.js的核心是允许采用简洁式模板语法来声明的将数据渲染进DOM的系统

在使用数据之前需要先进性声明才可以使用

### 为什么要学习Vue？

简单，前端三大框架（Vue，React，angler）中是对小白最友好的框架

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

### Vue和Jquery有什么区别？

数据驱动试图

1. jquery到vue转变是一个思想的转变，是将jquery直接操作dom的思想转变到操作数据上去。
2. jQuery是使用选择器选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象
3. Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM

### 什么时候学习Vue？

先把前端三件套熟悉（HTML，CSS，JavaScript）

# Vue基本语法

官方文档

## 插值表达式

使用{{ }}进行渲染`data:{}`里面的变量

也可以是函数，不过在data里面的方法，在插值表达式中需要补充大括号

例如

```HTML
<div id="app">
    <div>{{ msg }}</div>
    <div>{{ getInfo() }}</div>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '枫枫知道',
            getInfo() {
                // 函数的返回值就是插值表达式中的结果
                return "床前明月光"
            }
        }
    })
</script>
```

![](http://python.fengfengzhidao.icu/img/20211208164829.png)

在插值表达式中，支持运算符，以及一些方法

vue指令：

## v-text

渲染文本，和插值表达式类似

```HTML
<div v-text="msg"></div>
<div>{{ msg }}</div>
```

也是支持运算符的

```HTML
<div v-text="2 > 4 ? '成立': '不成立'"></div>
```

## v-html

渲染标签，如果字符串是含标签的特殊字符，那么vue会将它渲染成标签

如果是v-text或者是使用插值表达式，则会原样输出

![](http://python.fengfengzhidao.icu/img/20211208165756.png)

注意：

v-html一般是用来渲染信任的文本，例如文章的详情内容等，最好不要用在用户提交的地方

容易造成XSS攻击

## v-bind

可以给标签动态添加内容，也可以给动态的修改标签属性

不过在属性上的操作稍微和操作内容不太一样，我们使用`v-bind`指令

例如我想动态修改img标签的src属性，希望它去读取data里面的值

但是我们不能在属性中使用插值表达式

![](http://python.fengfengzhidao.icu/img/20211208170933.png)

这样写src直接将我的内容原样输出了，所以我们需要使用v-bind，全称为动态属性

那么我可以这么做

```HTML
<img v-bind:src="src" alt="">
```

![](http://python.fengfengzhidao.icu/img/20211208171135.png)

当然，`v-bind:`  可以简写为  `:`

```HTML
<img :src="src" alt="">

```

v-bind不仅可以用于HTML存在的属性，还可以应用在自定义属性上

例如

```HTML
<p :id="'p' + '_01'" :data="msg" :还可以是中文="msg"></p>

实际结果：
<p id="p_01" data="haha" 还可以是中文="haha"></p>

```

在vue所有的指令中，都是支持表达式的

例如：

```JavaScript
<div class="name">
    {{ a.length === 0 ? '没有数据' : a }}
    -{{ a.split('.')[1] }}
</div>
```

什么是表达式？

```JavaScript
// 这是语句
var a = 1;

// 这是表达式
a.length === 0 ? '没有数据' : a

```

## 条件渲染

### v-if和v-else的普通使用

v-if中的布尔值为true，则渲染这个div

如果if不成立，则渲染else中的代码块

```HTML
<div id="app">
    <div>{{ num }}</div>
    <div id="if">
        <div v-if="num > 0.9">大于0.9的概率</div>
        <div v-else>v-if不满足显示我</div>
    </div>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: Math.random(), // 一个0-1之间的随机数字
        }
    })
</script>

```

### v-else-if多条件语句

```HTML
<div id="v-else-if">
    <div v-if="num > 0.9">大于0.9的概率</div>
    <div v-else-if="num > 0.6">大于0.6的概率</div>
    <div v-else-if="num > 0.4">大于0.4的概率</div>
    <div v-else-if="num > 0.2">大于0.2的概率</div>
    <div v-else>所有条件都不成立</div>
</div>
```

v-if="flag"，为true的时候显示

为false的时候消失

```JavaScript
<div id="app">
    <div class="name" v-if="flag">
        {{ name }}
    </div>
    <div v-else>
        if没匹配到就显示我
    </div>

</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂载的位置，不能是body
        data: {
            flag: false,
            name: '枫枫'
        }
    })
</script>
```

## v-show与v-if的区别

1. v-if如果是false，不会渲染
2. v-show如果是false，不会显示 ` style="display: none;"`

体会一下v-if和v-show

```HTML
一个是看不见，但是我存在，只是我隐藏了    v-show 
一个是看不见，因为我本来就没被渲染       v-if
```

## 列表渲染

主要分为遍历列表和遍历对象

#### 遍历列表

```JavaScript
lis: [
    '张三',
    '王伟',
    '张伟',
    '王五',
]
```

此时的item就是每个元素

```HTML
<ul>
    <li v-for="item in lis" :key="item">
        {{ item }}
    </li>
</ul>
```

key要唯一！！！

如果需要遍历出每个元素的索引

则在遍历的时候指定index

非VIP预览结束，若要查看完整文章，请联系管理员获取访问密码！

查看

上一篇：项目搭建下一篇：枫枫知道--React全系列课程

你觉得文章怎么样

Iwtbk

![emoji](https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/2018new_taikaixin_org.png)

3个月前
点赞（1）回复（1）

Iwtbk @ Iwtbk

太好力

3个月前
点赞（0）回复

枫枫知道个人博客

枫枫知道--Vue全系列课程

Iwtbk

Iwtbk @ Iwtbk