Vue笔记_vue-2.4.0.js-CSDN博客

本文链接：https://blog.csdn.net/llj1028/article/details/128446604

1、什么是vue.js?

(核心理念：vue：1、数据驱动视图，2、组件化的开发)

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并称为前端三大主流框架！

2、为什么学习流行框架

● 1、企业为了提高开发效率：在企业4E2D，时间就是效率，效率就是金钱；
● 2、企业中，使用框架，能够提高开发的效率；
● 3、提高开发效率的发展历程：原生JS->jQuery之类的类库->前端模板引擎->Angular.js/Vue.js
● 4、能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】
● 5、在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

3、框架和库的区别

1、框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
Ø 例如：node中的express
2、库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
Ø 例如：从Jquery 切换到 Zepto
Ø 例如：从EJS切换到 art-template

4、MVC与MVVM的区别

1、MVC 是后端的分层开发概念;
2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;
● Model：模型，是应用程序中用于处理数据逻辑的部分，通常模型对象负责在数据库中存取数据。
● View：视图，用户界面显示，通常视图是根据模型数据创建的。（数据渲染）
● controller：控制器，数据模型和视图之间通信的桥梁。控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
MVC思想：Controller负责将Model的数据用View显示出来。
MVC优点：

● 耦合度低（运用MVC的应用程序的三个部件是相互独立的，改变其中一个不会影响其他两个）；
● 重用性高（多个视图可以使用同一个模型）
● 生命周期成本低
● 部署快（业务分工明确）
● 可维护性高

缺点：

● 不适合小型项目开发
● 视图与控制器联系过于紧密，妨碍了它们的独立重用
● MVVM模型：
○ M：模型（Model），data中的数据
○ V：视图（View），模板代码
○ VM：视图模型（ViewModel），Vue实例
MVVM架构
MVVM由Model，View，ViewModel三部分构成。
● M(Model)：数据模型（Vue的data）
● V(View)：视图，即UI，用来展示数据（Vue的el）
● ViewModel：是一个对象，用来同步视图View和模型Model
双向绑定：View和Model之间没有直接联系，通过ViewModel进行交互（即双向数据绑定），View的变化可以引起Model的变化，Model的变化也可以引起View变化（类似于浅拷贝）。
通过双向数据绑定，View 和 Model 之间的同步工作完全是自动的，因此开发过程中不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
可以实现双向绑定的标签：Input，textarea，select标签等（可以输入或改变标签内容的标签）
MVVM优点：
● 低耦合
● 可重用性
● 双向数据绑定，它实现了View和Model的自动同步
● Vue就是使用的MVVM框架。

5、Vue.js的代码结构

1、引入vue.js
2、写视图层，我们要展示的内容
3、实例化Vue()

● data：存放数据
● el：这个控制是哪块视图
● methods：放我们的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{message}}
        <!-- 
            v-text、v-html异同
            相同点：覆盖元素原来的节点
            不同点：v-text：不能解析富文本
                    v-html：可以解析富文本
         -->
         <div v-text='message'></div>
         <div v-html="message"></div>
         <div v-text="html">123</div>
         <div v-html="html">123</div>
    </div>
</body>
<script>
    let vm = new Vue({
        // 控制区域
        el:'#app',
        //存放数据
        data:{
            message:'hello Vue',
            html:'<h1 style="color:red">vue 第一天</h1>'
        },
        // 方法
        methods:{
        }
    })
</script>
</html>

注意：都是通过this对象去拿的，通过this也可以调用方法。写方法的时候我们需要注意this的指向问题

6、插值表达式、v-cloak、v-text、v-html

如何获取变量值呢？
● 插值表达式{{}}，可以在前后插入一些内容
● v-text：会替换掉元素里的内容
● v-html：可以渲染html界面
● v-text，v-html异同：

○ 同：覆盖元素原来的节点
○ 异：1、v-text不能解析富文本
■ 2、v-html能够解析富文本
○ 富文本：有标签，属性组成的字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-cloak防止界面闪烁</title>
    <!-- <script src="../vue-2.4.0.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> -->
</head>
<body>
    <div id="app">
        <!-- 插值表达式可以做简单的运算 -->
        <div v-cloak>{{num+200}}</div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        // 获取数据的
        data:{
            num:100
        },
        // 放方法的
        methods:{

        }
    })
</script>
</html>

<title>v-cloak防止界面闪烁</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script></head>
    <style>
        [v-cloak]{
          //使用原理：dispaly：none；
            display: none;
        }
    </style>
</head>
<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 在我们vue加载之前v-cloak是存在,vue加载结束之后v-cloak就隐藏了,利用这个特性可以实现:界面防止闪烁 -->
        <p v-cloak>
            ------------{{message}}------------
        </p>
        <!-- 使用v-text给界面元素赋值 -->
        <!-- 如果我们想在变量之前或者后面加一些内容的话使用插值表达式 -->
        <!-- 如果我们想直接覆盖元素内容的话使用v-text指令 -->
        <p v-text="message">-------------------</p>
        <p v-text="html">----------------------</p>
        <!-- 通过v-html指令把字符串解析成html的内容 -->
        <p v-html="html">1111</p>
    </div>
</body>
<script>
    // 调度层
    var vm = new Vue({
        // vue控制的区域
        el:'#app',
        // data参数存放我们的数据,这一层就是mvvm里的model层
        data:{
            message:'Hello Vue',
            html:'<h1>这是一个很大的标题</h1>'
        }
    })

7、v-bind

1、界面元素属性值的绑定

● 括号里不加引号的都是我们data里的数据读取
● 如果想使用字符串需要加上引号
● 里面可以写表达式
●里面也可以调用定义好的方法，拿到的是方法的返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-属性绑定、事件绑定</title>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind元素属性的绑定     （界面元素属性绑定）-->
        <!-- <img v-bind:src="imgSrc" alt=""> -->
        <!-- 简写 -->
        <img :src="imgSrc" alt="">
        <!-- v-on 事件绑定 -->
        <button v-on:click="log1">log1</button>
        <!-- 简写 -->
        <button @click="log2">log2</button>
        <button @click="changeImg">changeImg</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            imgSrc:'https://pic.ibaotu.com/19/10/28/thumbnail/kimage/39/ibaotu_19444.jpg!wwuo340'
        },
        methods:{
            log1(){
                console.log(11111111);
            },
            log2(){
                console.log(222222222);
            },
            changeImg(){
                console.log(this.imgSrc);
                if(this.imgSrc){
                    this.imgSrc=''
                }else{
                    this.imgSrc='https://pic.ibaotu.com/19/10/28/thumbnail/kimage/39/ibaotu_19444.jpg!wwuo340'
                }
            }
        }
    })
</script>
</html>

8、v-on

● 进行事件的绑定，我们用的最多的是click事件绑定
● 简写@
● 实现跑马灯的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> -->
    <!-- <script src="/vue-2.4.0.js"></script> -->
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <button @click="start" :disabled='disabled'>开始</button>
        <button @click="stop" :disabled='!disabled'>停止</button>
        <p>{{lang}}</p>
    </div>
</body>
<script>
/*     let vm = new Vue({
        el:'#app',
        data:{
            lang:'猥琐发育，别浪~~~!',
            timer:null,
            disabled:false,
        },
        methods:{
            start(){
                // this.timer
                this.disabled=!this.disabled
                clearInterval(this.timer)
                this.timer=setInterval(()=>{
                    let start = this.lang.substring(0,1)
                    let end = this.lang.substring(1)
                    this.lang= end+start
                },500)
            },
            stop(){
                this.disabled=!this.disabled
                clearInterval(this.timer)
            }
        }
    }) */
</script>
<!-- <script>
    let vm = new Vue({
        el:'#app',
        data:{
            lang:'1234567890~~~~~',
            timer:null,
            disabled:false,
        },
        methods:{
           start(){
            this.disabled=!this.disabled
            clearInterval(this.timer)
            this.timer=setInterval(()=>{
                let start = this.lang.slice(0,1)
                let end = this.lang.slice(1)
                this.lang = end+start
            },500)
           },
           stop(){
            this.disabled=!this.disabled
            clearInterval(this.timer)
           },
        },
    })
</script> -->
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            lang:'1234567890~~~~~',
            timer:null,
            disabled:false,
        },
        methods:{
           start(){
            this.disabled=!this.disabled
            clearInterval(this.timer)
            this.timer=setInterval(()=>{
                let start = this.lang[0]
                let end = this.lang.slice(1)
                this.lang = end+start
            },500)
           },
           stop(){
            this.disabled=!this.disabled
            clearInterval(this.timer)
           },
        },
    })
</script>
</html>

9、事件修饰符

● stop 阻止冒泡
● .prevent 阻止默认事件
● .capture 添加事件侦听器时使用事件捕获模式
● .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
● .once 事件只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="../vue-2.4.0.js"></script>
    <style>
        header{
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        aside{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 
        事件冒泡：从里到外
        事件捕获：从外到里
     -->
     <!-- 1、.stop 阻止冒泡
        给哪个元素设置哪个元素就不再冒泡 -->
    <div id="app">
        <header @click="log3">
            <aside @click.stop="log2">
                <button @click="log1">按钮</button>
            </aside>
        </header>
        <!-- 2、.capture 添加事件侦听器时使用事件捕获模式
        给哪个元素增加捕获事件哪个元素就先执行 -->
        <header @click="log3">
            <aside @click.capture="log2">
                <button @click="log1">按钮</button>
            </aside>
        </header>
        <!-- 3、.self 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
        <header @click="log3">
            <aside @click.self="log2">
                <button @click="log1">按钮</button>
            </aside>
        </header>
        <!-- 4、.once事件只触发一次 -->
        <header @click="log3">
            <aside @click.once="log2">
                <button @click="log1">按钮</button>
            </aside>
        </header>
        <!-- 5、.prevent 阻止默认事件
        链式绑定 .prevent.once 只阻止一次默认事件 -->
        <a @click.prevent.once="logObj" href="https://www.baidu.com">百度</a>
    </div>
    
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            log1(){
                console.log(111111);
            },
            log2(){
                console.log(2222222);
            },
            log3(){
                console.log(333333333);
            },
            logObj(){
                console.log(444444444);
            }
        }
    })
</script>
</html>

10、v-model数据双向绑定

● 作用：数据双向绑定
● 注意：绑定的是表单控件

<title>计算器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
    <div id='app'>
        <input type="text" v-model:value='value1'>
        <select v-model:value='opration'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value='value2'>
        <button @click='calc'>=</button>
        <input type="text" v-model:value='result'>
				<!--   简写 -->
      	<input type="text" v-model='result'>
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                value1: '',
                value2: '',
                opration: '+',
                result: ''
            },
            methods: {
                calc() {
                    switch (this.opration) {
                        case '+':
                            this.result = Number.parseFloat(this.value1) + Number.parseFloat(this.value2);
                            break;
                        case '-':
                            this.result = Number.parseFloat(this.value1) - Number.parseFloat(this.value2);
                            break;
                        case '*':
                            this.result = Number.parseFloat(this.value1) * Number.parseFloat(this.value2);
                            break;
                        case '/':
                            this.result = Number.parseFloat(this.value1) / Number.parseFloat(this.value2);
                            break;
                    }
                }
            }
        })
    </script>
</body>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6-v-model双向数据绑定</title>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <!-- v-model 数据双向绑定 -->
    <div id="app">
        <input type="text" :value='value'>
        <input type="text" v-model:value="value">
        
    </div>
    <!-- 计时器 -->
    <!-- <div id="app">
        <input type="text" v-model='value1'>
        <select name="" id="" v-model="valueObj">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">÷</option>
        </select>
        <input type="text" v-model="value2">
        <button @click="add">=</button>
        <input type="text" v-model="value3">
    </div> -->
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            value:100,
        },
        methods:{
        }
    })
</script>
<!-- <script>
    let vm = new Vue({
        el: '#app',
        data: {
            valueObj: '+',
            value1: 0,
            value2: 0,
            value3: 0,
        },
        methods: {
            add() {
                if (this.valueObj == '+') {
                    this.value3 = Number(this.value1) + Number(this.value2)
                } else if (this.valueObj == '-') {
                    this.value3 = Number(this.value1) - Number(this.value2)
                } else if (this.valueObj == '*') {
                    this.value3 = Number(this.value1) * Number(this.value2)
                } else if (this.valueObj == '/') {
                    this.value3 = Number(this.value1) / Number(this.value2)
                }
            }

        },
    })
</script> -->

</html>

11、Vue中的样式的使用

使用class样式：

● 1、数组
● 2、三目表达式
● 3、数组内置对象（对象的键是样式的名字，值是bool类型）
● 4、直接通过对象
使用内联样式
● 1. 直接在元素上通过:style 的形式，书写样式对象
● 2. 将样式对象，定义到data 中，并直接引用到:style 中 a)在data上定义样式 b) 在元素中，通过属性绑定的形式，将样式对象应用到元素中
● 3. 在 :style 中通过数组，引用多个
data 上的样式对象
a) 在data上定义样式
b) 在元素中，通过属性绑定的形式，将样式对象应用到元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中样式的使用</title>
    <script src="../vue-2.4.0.js"></script>
    <style>
        .box{
            width: 600px;
            height: 300px;
            margin: 0 auto;
            background-color: gold;
        }
        .color{
            color: red;
        }
        .fsObj{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="class1">床前明月光</div>
        <div :class="class2">疑是地上霜</div>
        <div :class="class3?'color':''">举头望明月</div>
        <!-- 数组内置对象 -->
        <div :class="[class2,{'box':true}]">低头思故乡</div>
        <!-- 对象 -->
        <div :class="{'color':true,'fsObj':false}">举头三尺有神明</div>

        <button @click="cgClass">cgClass</button>
        <ul>
            <li @click="act(1)" :class="actIndex==1?'color':''">1</li>
            <li @click="act(2)" :class="actIndex==2?'color':''">2</li>
            <li @click="act(3)" :class="actIndex==3?'color':''">3</li>
            <li @click="act(4)" :class="actIndex==4?'color':''">4</li>
        </ul>
    </div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            class1:'box color',
            class2:['color', 'fsObj'],
            class3:true,
            // class3:false,
            actIndex:1,
        },
        methods:{
            cgClass(){
                // 添加类的时候要加空格
                this.class1 += ' fsObj'
                this.class2.push('box')
            },
            act(index){
                console.log(index);
                // 让形参等于actIndex
                this.actIndex = index
            }
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-内联样式</title>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <div style="color:red;">鹅鹅鹅，</div>
        <div :style="style">曲项向天歌。</div>
        <div :style="style1">白毛浮绿水</div>
        <!-- 都以对象的形式才能添加进来 -->
        <div :style="[style1,style2]">红掌拨清波</div>
        <!-- 以方法的形式 -->
        <div :style="getStyle()">天蓝色</div>
        <button @click="cgStyle">cgStyle</button>
    </div>
    
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            style:'color:green;',
            style1:{color:'gold',},
            style2:{fontSize:'30px',},
        },
        methods:{
            getStyle(){
                return {
                    color:'skyblue'
                }
            },
            cgStyle(){
                this.style1.color = 'black'
                this.style1.fontSize='40px'
            },
        }
    })
</script>
</html>

12. V-for和key属性

● a) 便利数组，参数(item,index) in list v-for=“(item,index) in list” 也可写一个参数
● b) 便利对象，参数(value,key,index) in list v-for = “(value,key,index) in obj”
● c) 便利数字，num in 10 (1~10)
● d) key在使用v-for的时候都需要去设置key (版本高必须要写key)

○ i. 让界面元素和数组里的每个记录进行绑定
○ ii. key只能是字符串或者数字
○ iii. key必须是唯一的

● key的作用：提高重排效率，就地复用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-v-for</title>
    <script src="../vue-2.4.0.js"></script>
    <style>
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li>{{list[0]}}</li>
            <li>{{list[1]}}</li>
            <li>{{list[2]}}</li>
            <li>{{list[3]}}</li>
        </ul>
        <!-- 1、遍历数组 -->
        <ul>
            <li v-for="(item,index) in list">
                {{item}}==>{{index}}
            </li>
            <li v-for="item in list">
                {{item}}
            </li>
            <li v-for="(item,index) in courseList ">
                {{item.title}} ===>{{index}}
            </li>
        </ul>
        <!-- 2、遍历对象 -->
        <ul>
            <li v-for="(value,key,index) in obj">
                {{value}}=={{key}}=={{index}}
            </li>
        </ul>
        <!-- 3、遍历数字 -->
        <ul>
            <li v-for="num in 10">
                {{num}}
                <div>11111</div>
            </li>
        </ul>
        <!--  -->
        <ul>
            <li v-for="(item,index) in courseList1">
                {{item.title}}
                <div v-for="(item1,index) in item.section">
                    {{item1.page}}
                </div>
            </li>
        </ul>
        <!--  -->
        <li @click="act(item)" :class="actIndex==item?'red':''" v-for="(item,index) in 4">{{item}}</li>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            actIndex:1,
            list: [1, 2, 3, 4],
            courseList: [
                {
                    title: '第一章',
                },
                {
                    title: '第二章',
                },
                {
                    title: '第三章',
                },
            ],
            obj:{
                name:'llj',
                age:'18',
            },
            courseList1: [
                {
                    title: '第一天 1111111111',
                    section: [
                        {
                            page: '1-1 11111111',
                        },
                        {
                            page: '1-2  22222222',
                        },
                        {
                            page: '1-3 333333333',
                        }
                    ]
                },
                {
                    title: '第二天 1111111111',
                    section: [
                        {
                            page: '2-1 11111111',
                        },
                        {
                            page: '2-2  22222222',
                        },
                        {
                            page: '2-3 333333333',
                        }
                    ]
                },
                {
                    title: '第三天 1111111111',
                    section: [
                        {
                            page: '3-1 11111111',
                        },
                        {
                            page: '3-2  22222222',
                        },
                        {
                            page: '3-3 333333333',
                        }
                    ]
                },
            ],
                },
        methods: {
            act(index){
                console.log(index);
                this.actIndex=index
            }
        }
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-key属性</title>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <div v-for='(item,index) in list' :key="index">
            {{item.title}}
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            list:[
                {
                    id:1,
                    title:'第一章',
                },
                {
                    id:2,
                    title:'第二章',
                },
                {
                    id:3,
                    title:'第三章',
                },
            ]
        },
        methods:{

        }
    })
</script>
</html>

注意：
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

13、v-if与v-show区别

a) 区别：
同：显示隐藏元素
异：

● i. v-if删除DOM元素
● ii. v-show设置display:none隐藏元素

b) 应用场景：

● i. v-if只修改一次的时候可以使用v-if （用于一次显示隐藏）可以搭配v-else、v-else-if使用
●ii. v-show频繁切换的时候可以使用v-show （用于多次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-v-if、v-show区别</title>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            v-if/v-show异同
            同：显示隐藏元素；
            异：v-if是删除DOM元素
                v-show是通过display：none隐藏元素
            应用场景：v-if用于一次显示隐藏
                    v-show用于多次显示隐藏    
         -->
         <div v-if="flag">11111</div>
         <div v-show="flag">22222</div>
         <div v-if="age<18">未成年</div>
         <div v-else-if="age<30">青年</div>
         <div v-else-if="age<50">中年</div>
         <div v-else>老年</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            // flag为true时显示，为false时隐藏
            flag:false,
            age:20,
        },
        methods:{
        },
    })
</script>
</html>