前端和Vue

1.前端基本情况介绍
2.Vue基础语法
3.计算属性computed
- 3.1 computed：指一个属性通过其他属性计算而来
4.侦听器watch
- 4.1 watch（侦听器）：监听一个属性改变触发一个事件
5.模板template
- 5.1 template：模板
6.组件component
7.Vue生命周期

1.前端基本情况介绍

1.1 vue 是什么？

Vue.js------ 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。

渐进式:从核心到完备的全家桶
增量:从少到多,从一页到多页,从简单到复杂
单文件组件: 一个文件描述一个组件
单页应用: 经过打包生成一个单页的html文件和一些js文件

vue对象与HTML关系
在这里插入图片描述

1.2 vue优缺点

Vue 不缺入门教程，可是很缺乏高阶教程与文档
Vue不支持IE8
量级问题(angular和react)

1.3 一个vue页面(在html中)以及插值表达式

按照Vue的语法 { {}}: 插值表达式
插值表达式: 根据表达式的内容找到’对应的Vue对象’ 的参数自定义的地方(一般是data)，里面获取对应参数值, 替换 — 运算 -->

引入vue.js最好放在head部分引入（避免页面抖屏）

执行过程：

创建了一个Vue对象(根据Vue语法)
这个Vue对象一旦创建, 会立即检查它的el属性
他会根据el属性找到一个对应id的html代码
如果找到了, 把找到的html代码所对应的作用域 和这个Vue对象’绑定起来’
这个html代码所对应的作用域就不在仅仅是html代码作用域, 还是这个Vue对象作用域
这个作用域代码会重新, 按照Vue语法再解析一遍
el data: Vue固有属性
例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<body>
    <div id="root">
<!--         按照Vue的语法 {
    
    {}}: 插值表达式
             插值表达式:  根据表达式的内容 找到'对应的Vue对象' 的 参数自定义的地方(一般是data)
             里面 获取对应参数值,  替换 --- 运算  -->
        {
   
   {msg + aaa}}
        <div id="div1">
            {
   
   {msg}}
        </div>

    </div>

    <script>

        new Vue({
     
     
            el: "#root",
            data:{
     
     // 一般用于我们自定义一些属性和参数, 注意: key-value结构
                msg: 123,
                aaa: 1
            }
        })
        new Vue({
     
     
            el: "#app",
            data:{
     
     
                msg: 123,
                aaa: 1
            }
        })

    </script>
</body>
</html>

在这里插入图片描述
例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<!--vue 1.0 -->

<div id="app">
    <div id="root">
        {
   
   {msg + aaa}}
        <div id="div1">
            {
   
   {msg}}
        </div>
    </div>
    <div>

    </div>

</div>

<script>
    new Vue({
     
     
        el: "#app",
        data: {
     
     // 一般用于我们自定义一些属性和参数, 注意: key-value结构
            msg: 123,
            aaa: 1
        }
    })
    
</script>
</body>
</html>

在这里插入图片描述
例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body >

    <div id="root">
<!--        {
    
    {msg }}-->
        {
   
   {obj.name}}{
   
   {obj.age}}
    </div>

    <script>
        new Vue({
     
     
            el: "#root",// 用id来绑定
            data:{
     
     // key=value
                msg: 123,
                aaa: 1,
                str: 'zs',
                arr: ["zs", "ls", "wu", "zl"],
                obj: {
     
     
                    name: "zs",
                    age: 18
                },
                bool: true,
                bool2: false
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.Vue基础语法

简洁,轻量,快速,数据驱动,模块友好,组件化
Vue基础’v-xx:’指令

2.1 V-bind：单向绑定

用来绑定数据和属性以及表达式，缩写为’：’
示例：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<!--在html中使用v-bind:
给一个html属性绑定一个参数, 这个参数是对应vue对象中自定义的参数-->
    <div id="root">
        {
   
   {num}}
<!--         相当于在vue对象中取出num 赋值给value-->
        <input v-bind:value="num">

        <div v-bind:title="msg + num">
            123
        </div>

<!--        v-bind:  可以简化写法 :  -->
        <div :title="msg + num">
            123
        </div>

    </div>

    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                num: 22,
                msg: "我是一个div"
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

2.2 V-model：双向数据绑定

只能用于表单元素的value上

一个表单的value属性绑定一个参数, 这个参数是对应vue对象中自定义的参数
如果绑定之后, 表单元素的value发生了改变, 那么, 对应自定义属性也会发生改变
示例

输入框:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">
        {
   
   {num}}
        单向绑定：<input v-bind:value="num">

        双向绑定-下拉：<select v-model="num">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

        双向绑定文本框：<textarea v-model="num"></textarea>

        双向绑定输入框：<input v-model:value="num">
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                num: 2
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

2.3 V-text：类似更新元素的 innerText

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">
        <div v-text="obj.name">
<!--            {
    
    {obj.name}}-->
        </div>
        <div v-text="obj.age">
<!--            {
    
    {obj.age}}-->
        </div>

        <div v-html="obj.name">
            <!--            {
    
    {obj.name}}-->
        </div>
        <div v-html="obj.age">
            <!--            {
    
    {obj.age}}-->
        </div>
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                obj:{
     
     
                    name: "<b>zs</b>",
                    age: 18
                }
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

2.4 V-html：更新元素的 innerHTML

示例

同2.3

2.5 V-show：标签控制隐藏, (display设置none)

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="root">
        <div v-show="bool">
            <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg">
        </div>
        <button @click="changeimg"> 改变</button>
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
               bool: true
            },
            methods: {
     
     
                changeimg: function () {
     
     
                    //! this.bool取反
                    this.bool = ! this.bool
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.6 V-if； V-else；V-else-if：根据表达式的值的真假条件渲染元素

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">

        <div v-if="bool1">
            v-if
        </div>
        <div v-else-if="bool2">
            v-else-if
        </div>
        <div v-else>
            v-else
        </div>

    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                bool1: false,
                bool2: true
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.7 V-if和v-show区别

v-show不同于v-if
如果v-if=false 页面是把v-if所在标签整个标签取消在dom中
而v-show=false则是把这个标签隐藏，但是这个标签还存在与dom树上

2.8 V-for：基于源数据多次渲染元素或模板块(循环渲染元素)

注意1:

v-for: 写在那个标签上, 循环遍历的就是那个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">

        <div v-for="item  of arr">
            {
   
   {item}}
        </div>
        
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                arr: ["zs", "ls", "wu", "zl"]
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

注意2:

对于v-for遍历 in/of 都可以, 没有什么区别

注意3:

在vue中如果使用v-for这个指令, 那么必须给每一个v-for指令所遍历出的元素/标签, 加一个:key=”唯一值” key不可重复
Key是一个底层标记(给底层代码用的): 不是给我们(程序员)用的
方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">
        <div v-for="item  of arr" :key="item.id">
            {
   
   {item.name}}
        </div>
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                arr: [{
     
     
                    id: 1,
                    name: "zs",
                    age: 18
                }, {
     
     
                    id: 2,
                    name: "ls",
                    age: 18
                }, {
     
     
                    id: 3,
                    name: "wu",
                    age: 18
                }, {
     
     
                    id: 4,
                    name: "zl",
                    age: 18
                }]
            }
        })
    </script>

</body>
</html>

在这里插入图片描述
方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">


<!--               item: 遍历出来的单个元素, index: 下标-->
<!--        <div v-for="(item, index)  of arr" :key="index">-->
<!--            {
    
    {item}}&#45;&#45;{
    
    {index}}-->
<!--        </div>-->

        <div v-for="(aaaa, xxx)  of arr" :key="xxx">
            {
   
   {aaaa}}--{
   
   {xxx}}
        </div>

    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                arr: ["zs", "ls", "wu", "zl"]
            }
        })
    </script>

</body>
</html>

在这里插入图片描述
方式三：（向列表中添加元素，点击某个元素，就删除某个元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">


        <div v-for="(aaaa, xxx)  of arr" :key="xxx" @click="deletediv(xxx)">
            {
   
   {aaaa}}--{
   
   {xxx}}
        </div>

        <input v-model="inputstr">
        <button @click="add">添加</button>

    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                inputstr: '',
                arr: ["zs", "ls", "wu", "zl"]
            },
            methods: {
     
     
                add: function () {
     
     
                    this.arr.push(this.inputstr)
                },
                deletediv: function (index) {
     
     
                    //index是删除的起始位置，1是从index起始位置要删除的元素个数
                    this.arr.splice(index, 1)
                }
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

示例1(添加列表元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">
        <ul>
            <!--item123是数组list中的变量，用于v-for循环-->
            <li v-for="item123 in  list" >{
   
   {item123}}</li>
        </ul>
        <input v-model="inputstr">
        <button v-on:click="add">点击添加</button>
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                inputstr: '',
                list: ['zs', 'ls', 'wu']
            },
            methods: {
     
     
                add: function () {
     
     
                    console.log(this.inputstr)
                    //将新输入的元素值加入列表
                    this.list.push(this.inputstr)
                    //将输入框中的元素值清除
                    this.inputstr = ''
                }
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

示例二：

2.9 V-on：绑定事件监听器。可简写@

v-on用来监听一个事件, 监听到的时间要触发到vue对象中去: methods里面

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">
        <div v-show="bool">
            <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg">
        </div>
<!--        <button οnclick="f()"> 改变</button>-->
        <!--v-on用来监听一个事件, 监听到的时间要触发到vue对象中去: methods里面-->
        <button v-on:click="f"> 改变</button>
        <!--<button @click="f"> 改变</button>-->
        <!--          v-on:  可以简写为@   -->
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
               bool: false
            },
            methods: {
     
     
                f: function () {
     
     
                    // 一定要加this
                  this.bool = !this.bool
                }
            }

        })

        function f() {
     
     
            alert('?')
        }
    </script>

</body>
</html>

在这里插入图片描述

2.10 V-pre：可以用来阻止预编译，其内部的内容不会被编译，会原样输出

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">
        <div v-pre>
            {
   
   {msg}}
        </div>

    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                msg: "zs"
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

2.11 V-cloak：延迟显示

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的标签直到实例准备完毕。

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        /**
        属性选择器
         */
        [v-cloak]{
     
     
            /*display: none;*/
            font-size: 100px;
        }
    </style>
</head>
<body>

    <div id="root">
            <div v-cloak>
                {
   
   {msg}}
            </div>
    </div>
    <script>

        // 3秒之后执行某一个方法: f
        setTimeout('f()', 3000)
        function f() {
     
     

            new Vue({
     
     
                el: "#root",
                data: {
     
     
                    msg: "zs"
                }
            })


        }



    </script>

</body>
</html>

在这里插入图片描述
3秒后：

2.12 V-once：只渲染元素和组件一次

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="root">

        <div v-once>
            {
   
   {msg}}
        </div>

        {
   
   {msg}}
        <input v-model="msg">
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                msg: "zs"
            }
        })
    </script>


</body>
</html>

在这里插入图片描述

3.计算属性computed

3.1 computed：指一个属性通过其他属性计算而来

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="root">
<!--         插值表达式: 找自定义属性 : 先找data: 如果找不到计算属性-->
        {
   
   {sum}}
        <br>
        <input v-model="num1" ><br>
        <input v-model="num2" >
        <hr>
        {
   
   {sum2}}

        <button>求和</button>
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                num1: 0,
                num2: 0
                // sum: 0
            },
            computed: {
     
     
                // 不是方法, 外在表现是一个属性
                sum: function () {
     
     
                    // 计算属性, 是通过别的属性计算而来, 他是依赖于别的属性的
                    return parseInt(this.num1) + parseInt(this.num2)
                },
                sum2: function () {
     
     
                    return parseInt(this.num1) + parseInt(this.num2) + this.sum
                }
            }
        })
    </script>

</body>
</html>

4.侦听器watch

4.1 watch（侦听器）：监听一个属性改变触发一个事件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    {
   
   {sum}}<br>
    <input v-model="num1">
    <input v-model="num2">
</div>

<script>
    new Vue({
     
     
        el: "#root",
        data: {
     
     
            sum: 0,
            num1: 0,
            num2: 0
        },
        watch: {
     
     // 侦听器: 侦听一个属性的改变, 然后触发一个方法
            // 方法名, 就是要侦听的属性
            num1: function () {
     
     
               this.sum = parseInt(this.num1) + parseInt(this.num2)
            },
            num2: function () {
     
     
                this.sum = parseInt(this.num1) + parseInt(this.num2)
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

5.模板template

5.1 template：模板

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        {
   
   {msg}}
    </div>
    <script>
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                msg: "1123"
            },
            template:"<div>div</div>"
        })
    </script>
</body>
</html>

注释： template:"<.div>div<./div>“时结果
在这里插入图片描述
执行： template:”<.div>div<./div>"时结果

示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="root"></div>

    <script>
        // 以后html写代码, html只需要提供一个入口,
        // html js 都可以在一个vue对象中实现
        new Vue({
     
     
            el: "#root",
            data: {
     
     
                msg: "1123"
            },
            template:"<div><div @click='clickdiv'>{
     
     {msg}}</div>"
                +

                "<p @click='clickp'>{
     
     {msg}}</p></div>",
            methods: {
     
     
                clickdiv: function () {
     
     
                    this.msg = "div"
                },
                clickp: function () {
     
     
                    this.msg = "p"
                }
            }
        })
    </script>

</body>
</html>

在这里插入图片描述
点击上面：

点击下面：

6.组件component

在这里插入图片描述

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="root">
        <x></x>
        <y></y>
        <z></z>
    </div>
    <script>
        var son1 = {
     
     
            template:"<div>son1</div>"
        }
        var son2 = {
     
     
            template:"<div>son2</div>"
        }
        var son3 = {
     
     
            template:"<div>son3</div>"
        }
        new Vue({
     
     
            el: "#root",
            data: {
     
     },
            components:{
     
     
                x:son1,
                y:son2,
                z:son3,
            }
        })
    </script>

</body>
</html>

在这里插入图片描述

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="root">
    </div>

    <script>
        var son1 = {
     
     
            template:"<div>son1</div>"
        }
        var son2 = {
     
     
            template:"<div>son2</div>"
        }
        var son3 = {
     
     
            template:"<div>son3</div>"
        }
        new Vue({
     
     
            el: "#root",
            data: {
     
     },
            components:{
     
     
                x:son1,
                y:son2,
                z:son3,
            },
            template:"<div><x></x><y></y><z></z></div>"
        })
    </script>

</body>
</html>

在这里插入图片描述

示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="root">
    </div>

    <script>
        var son1 = {
     
     
            template:"<div><div @click='f'>son1</div></div>",//@click='f'指此内部的方法
            methods: {
     
     
                f: function () {
     
     
                    alert(123)
                }
            }
        }
        var son2 = {
     
     
            template:"<div>son2</div>"
        }
        var son3 = {
     
     
            template:"<div>son3</div>"
        }
        new Vue({
     
     
            el: "#root",
            data: {
     
     },
            components:{
     
     
                x:son1,
                y:son2,
                z:son3,
            },
            template:"<div><x></x><y></y><z></z></div>",
        })
    </script>

</body>
</html>

在这里插入图片描述

7.Vue生命周期

什么是生命周期：
从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
生命周期函数：

beforeCreate
Created
beforeMount
Mounted
beforeUpdtae
Updated
beforeDestroy
destoryed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="root">
        {
   
   {msg}}
        <input v-model="msg">
    </div>
    <script>
        var root = new Vue({
     
     
            el:"#root",
            data: {
     
     
                msg: 123
            },
            beforeCreate:function () {
     
     
                console.log("控制台打印:beforeCreate")
            },
            created:function () {
     
     
                // 写一些向后端请求数据的代码


                console.log("控制台打印:created")
            },
            beforeMount:function () {
     
     
                //页面还未被渲染
                console.log(this.$el),
                    console.log("控制台打印:beforeMount")
            },
            mounted:function () {
     
     
                //页面渲染完成
                //
                console.log(this.$el),
                    console.log("控制台打印：mounted")
            },

            beforeUpdate:function () {
     
     
                console.log("控制台打印：beforeUpdate")
            },
            updated:function () {
     
     
                console.log("控制台打印：updated")
            },
            beforeDestroy:function () {
     
     
                console.log("控制台打印：beforeDestory")
            },
            destroyed:function () {
     
     
                console.log("控制台打印：destroyed")
            }

        })
    </script>

</body>
</html>

在这里插入图片描述

前端和Vue

前端和Vue

1.前端基本情况介绍

1.1 vue 是什么？

1.2 vue优缺点

1.3 一个vue页面(在html中)以及插值表达式

2.Vue基础语法

2.1 V-bind：单向绑定

2.2 V-model：双向数据绑定

2.3 V-text：类似更新元素的 innerText

2.4 V-html：更新元素的 innerHTML

2.5 V-show：标签控制隐藏, (display设置none)

2.6 V-if； V-else；V-else-if：根据表达式的值的真假条件渲染元素

2.7 V-if和v-show区别

2.8 V-for：基于源数据多次渲染元素或模板块(循环渲染元素)

注意1:

注意2:

注意3:

2.9 V-on：绑定事件监听器。可简写@

2.10 V-pre：可以用来阻止预编译，其内部的内容不会被编译，会原样输出

2.11 V-cloak：延迟显示

2.12 V-once：只渲染元素和组件一次

3.计算属性computed

3.1 computed：指一个属性通过其他属性计算而来

4.侦听器watch

4.1 watch（侦听器）：监听一个属性改变触发一个事件

5.模板template

5.1 template：模板

6.组件component

7.Vue生命周期

猜你喜欢