Vue速成

vue基本概述

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

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

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

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

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

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

为什么要学习Vue？

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

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

Vue基本语法

插值表达式

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

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

例如

<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>

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

vue指令：
渲染文本，和插值表达式类似

v-text

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

也是支持运算符的

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

v-html

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

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

注意：

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

容易造成XSS攻击

v-bind

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

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

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

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

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

那么我可以这么做

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

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

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

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

例如

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

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

例如：

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

什么是表达式？

// 这是语句
var a = 1;
// 这是表达式
a.length === 0 ? '没有数据' : a

条件渲染

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

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

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

<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多条件语句

<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的时候消失

<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的区别

v-if如果是false，不会渲染
v-show如果是false，不会显示 style=“display: none;”
体会一下v-if和v-show

列表渲染

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

遍历列表

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

此时的item就是每个元素

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

key要唯一！！！

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

则在遍历的时候指定index

<ul>
    <li v-for="(item, index) in lis" :key="item">
        {
  { index }} -- {
  { item }}
    </li>
</ul>

遍历对象

obj:{
    name: '张三',
    age: 21,
    addr: '北京市',
}

一个参数，就是遍历对象的值

二个参数，值和键

三个参数，值，键，索引

<ul>
    <li v-for="item in obj" :key="item">
        对象的值：{
  { item }}
    </li>
</ul>
<ul>
    <li v-for="(item, key) in obj" :key="item">
        对象的值：{
  { item }}
        对象的键：{
  { key }}
    </li>
</ul>
<ul>
    <li v-for="(item, key, index) in obj" :key="item">
        对象的值：{
  { item }}
        对象的键：{
  { key }}
        变量的索引：{
  { index }}
    </li>
</ul>

Vue事件

v-on:或者@

<div id="app">
    <div>
        {
  { num }}
    </div>
    <div>
        <!--        执行的方法必须在methods中-->
        <button v-on:click="add">点我 +</button>
        <button @dblclick="num--">点我 -1</button>
    </div>
</div>

事件所执行的方法是要被定义在methods里面

methods: {
    add() {
        this.num ++
    }
}

参数问题

可以通过传参进行参数传递

<button