vue第一讲

最新推荐文章于 2024-07-22 08:55:10 发布

奕霖、Martin

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量195

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_56528635/article/details/128893546

版权

一、Vue数据绑定、指令

1.1 什么是Vue.js

1）Vue.js是目前最后一个前端框架，React是最流行的一个前端框架（react除了开发网站，还可以开发手机App，Vue语法也是可以进行手机App，还需要借助 weex）

2）Vue.js是前端的主流框架之一和angular.js，react.js一起并成为前端三大框架

3）Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于第三方库即有项目整合（Vue有配置的第三方类库，可以整合起来做大型项目的开发）

4）使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能：

①解耦视图与数据

②可复用的组件

③前端路由

④状态管理

⑤虚拟DOM（Virtual DOM）

1.2 为什么要使用Vue

① 轻量级，vue.js压缩后之后20多kb

② 移动优先，更适合移动端，比如移动端的Touch事件

③ 易上手，学习简单，文档齐全

④ 吸取了模块化和虚拟DOM的长处，并拥有自己独特的功能如：计算属性

⑤ 开源，社区活动值高等

1.3 为什么要使用虚拟dom（Virtual DOM）

1）具备跨平台的优势

由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。

2）操作 DOM 慢，js运行效率高。我们可以将DOM对比操作放在JS层，提高效率。

因为DOM操作的执行速度远不如Javascript的运算速度快，因此，把大量的DOM操作搬运到Javascript中，运用算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）

3）提升渲染性能

Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

1.4 Vue的生命周期

有注释的生命周期

无注释的生命周期

beforeCreate 实例创建前：这个阶段实例的data、methods是读不到的

created 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：el选项的DOM节点被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染

beforeUpdate：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理

updated：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行

beforeDestory：实例销毁之前调用。

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁vue生命周期在真实场景下的业务应用

created：进行ajax请求异步数据的获取、初始化数据

mounted：挂载元素内dom节点的获取

nextTick：针对单一事件更新数据后立即操作dom

updated：任何数据的更新，如果要做统一的业务逻辑处理

watch：监听具体数据变化，并做相应的处理

1.5 Vue的优缺点

优点：

简单：官方文档很清晰，比 Angular 简单易学。
快速：异步批处理方式更新 DOM。
组合：用解耦的、可复用的组件组合你的应用程序。
紧凑：~18kb min+gzip，且无依赖。
强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

大而全：学习起来有难度，对于我来讲学习曲线很曲折，比较难理解一些。
推翻重写：Vue重写了部分底层，等于是说在2.0版本又需要从头开始学习，对于习惯了1.x的开发者来说又需要重新学习。
不支持IE8以下，因为Vue使用ES5书写。

1.6 MVVM模式

MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

MVP 全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

『View』：视图层（UI 用户界面）

『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）

『Model』：数据层（存储数据及对数据的处理如增删改查）

MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。

Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model 的变化也会立即反映到 View 上显示。

当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。

1.7 Vue的运行机制

1. 初始化

在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化

初始化过程：

①初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等

②通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」

2.挂载组件

调用$mount挂载组件

3.编译

*（如果是运行时编译，即不存在render function但是存在template的情况，需要进行编译步骤。）

①parse（解析）：利用正则将模板转换成抽象语法树（AST）；

②optimize（标记静态节点做优化）：标记静态节点，以后update的时候，diff算法可以跳过静态节点

③ generate（转成字符串）：将抽象语法树（AST）转成字符串，供render去渲染DOM

经过以上步骤，就可以得到render funciton

4. 响应式

当 render function 被渲染时，会对data对象进行数据读取，所以会触发 getter 函数进行依赖收集，依赖收集的目的是将data里的属性放到观察者（Watcher）的观察队列中

在修改对象的值的时候，会触发对应的 setter， setter 通知观察者数据变化，需要重新渲染视图。观察者调用 update 来更新视图

5.虚拟DOM

render funtion 会被转换成虚拟DOM

虚拟DOM实际上就是一个JS对象，从顶层DOM层层描述DOM，有tag, children, isStatic, isComment等等许多属性来做DOM描述

6. 更新视图

updata时，会将新旧VNode 一起传入 patch，经过 diff 算法得出它们的差异，将差异所对应的 DOM 进行修改

1.8 Vue编写

在编写前需要先拿到vue.js的包：

第一种方法：直接引入vue.js

开发环境版本

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第二种方法：下载vue.js的包（介绍 — Vue.js）

开发环境版本和生产环境的版本

开发环境版本： https://cdn.jsdelivr.net/npm/vue/dist/vue.js

生产环境版本： https://cdn.jsdelivr.net/npm/vue

访问后右键另存为即可保存对应的vue.js的包

开发案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 
            1.导入vue。js
            2.创建Vue实例对象，设置el属性和data属性
            3.渲染页面
         -->
        <!-- 1、导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 差值表达式：{{}} -->
        <!-- 3、使用简洁的模板语法把数据渲染到页面上 -->
        <div id="app">
            {{msg}}</br>
            {{age}}
        </div>
        
        <script type="text/javascript">
            // 2、创建Vue实例对象
            let vue = new Vue({
                // 设置元素挂载点
                el:"#app",
                // vue3的时候不能把data声明为一个属性，而只能声明成函数的形式
                // vue2形式
                /*data:{
                    msg:"hello,world!",
                    age:18
                } */
                
                // vue2或vue3形式
                data(){
                    return{
                        msg:"hello,world!",
                        age:18
                    }
                }
            })
        </script>
    </body>
</html>

1.8.1 el属性

vue实例的作用范围是什么

答:el命中的内部可以任意的写值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{msg}}</br>
            {{age}}
        </div>
        
        <script type="text/javascript">
           //这里创建Vue实例时，不推荐var，vue的编写中尽量避免var关键字的出现
           //使用let或者const，const相当于java中的final，作用域更清晰
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                        msg:"hello,world!",
                        age:18
                    }
                }
            })
        </script>
    </body>
</html>

是否可以使用其他的选择器？比如（class name 标签）

答：可以，但是建议使用id选择器。因为id选择器是唯一的语义比较清晰 class选择器和那么选择器可以命中多个内容语义不是很清晰。

是否可以设置其他的dom元素？（span input ）

答：可以，但是只支持双标签选择器（html,body除外，建议使用div因为div没有其他的样式,h标签有样式），不支持单标签选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            使用class关键字； 
            使用span标签
        -->
        <span class="app">
            {{msg}}</br>
            {{age}}
        </span>
        
        <script type="text/javascript">
            let vue = new Vue({
                // 使用类选择器
                el:".app",
                data(){
                    return{
                        msg:"hello,world!",
                        age:18
                    }
                }
            })
        </script>
    </body>
</html>

1.8.2 data属性

vue中所有用到的数据定义在data中，data中可以写复杂类型的数据（复杂的json数据）

渲染复杂的数据类型时，遵守js的语法即可：(对象.属性名数组[下标])

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 差值表达式：{{}} -->
        <div id="app">
           名字是：{{name}}</br>
           人口是：{{people}}亿</br>
           第一个省的名字是：{{province[0].name}}</br>
           第一个省的第一个市的名字是：{{province[0].citys[0]}}</br>
           第二个省的城市包括：{{province[1]["citys"]}}</br>
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                       name:"china",
                       people:14,
                       province:[
                            {name:"河南",citys:["郑州","周口","洛阳"]},
                            {name:"河北",citys:["石家庄","鹤岗"]},
                            {name:"山东",citys:["济宁","青岛"]},
                            {name:"安徽",citys:["合肥","芜湖"]}
                       ]
                    }
                }
            })
        </script>
    </body>
</html>

1.9 Vue指令

vue指令是指以v-为开头的特殊语法

1.9.1 内容绑定和事件绑定

1.9.1.1 text 和 html

语法：v-text="data里面的属性"

语法：v-html：直接把链接解析为html的形式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 差值表达式：{{}} -->
        <!-- 
        v-text :设置标签的文本值（textContext,innerText）在标签内部进行使用
        缺点：不保留原来的值，使用插值表达式{{}}可以替换指定的内容
            v-text="data里面的属性" 
        -->
        <!-- 
        设置标签的innnerHTML    html()
        普通的文本与v-text没有区别，但是使用了含有html标签的的文本话会自动解析成标签
            v-html：直接把链接解析为html的形式 
        -->
        <div id="app">
           <span v-text="lj">原文本内容</span></br>
           <span v-html="lj">原文本内容</span>
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                       msg:"hello second！@@",
                       lj:"<a href='https://www.baidu.com/'>百度</a>"
                    }
                }
            })
        </script>
    </body>
</html>

1.9.1.2 on

鼠标的点击事件（onclick），鼠标的移入事件（onmouseEnter），双击事件（ondblclick）

语法：v-on：click=“方法”，方法写在methods里面

案例：数字的增加或减少

步骤：

1.设置页面

2.data中定义数据eg:num

3.methods中添加方法eg:add(加)，min（减)

4.赋值，将num的值赋给存放数字的标签

5.给-和+绑定add和min事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- v-on:  可以写成@的形式 -->
        <div id="app">
            <input type="button" value="-" v-on:click="min">    
            <span>{{num}}</span>    
            <input type="button" value="+" @click="add">
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                       num:1
                    }
                },
                // 函数编写的位置
                methods:{
                    min(){
                        //实现num的值减1，首先要获取到num的值
                        //1、用对象的方式进行获取
                        // console.log(vue.num);
                        // 2、获取当前实例中的值，直接用this
                        //console.log(this.num);
                        this.num--;
                    },
                    add(){
                        this.num++;
                    }
                    
                }
            })
        </script>
    </body>
</html>

1.9.2 显示切换和属性绑定

1.9.2.1 if else

语法： v-if="表达式/布尔"

表达式成立就显示元素中的内容，表达式不成立就不显示元素中的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- v-if="条件表达式"
            v-if只能出现一次，
            v-else-if可以出现多次或零次
            v-else也只能出现一次
         -->
        <div id="app">
           <span v-if="age>30" >大于三十岁</span>
           <span v-else-if="age>18">还年轻</span>
           <span v-else>好好学习</span>
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                       age:19
                    }
                }
            })
        </script>
    </body>
</html>

1.9.2.2 show

切换元素的显示效果，

语法：v-show="表达式/布尔"

跟v-if类似，但是v-show的效率比较高，始终存在于页面上，只不过更改的是display的状态值，v-if就是直接消失或者显示

案例：

点击显示图片，再点击就隐藏图片，再点击还会显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- v-show="表达式/布尔"   
            boolean值为true时，display=block，
            boolean值为false时，display=none 
        -->
        <div id="app">
           <input type="button" value="改变状态" v-on:click="changeShow()" />
           <img src="./img/xx.jpg" v-show="state" />
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                       state:true,
                       img:["./img/1.jpg"]
                    }
                },
                methods:{
                    changeShow(){
                        this.state = !this.state;
                    }
                }
            })
        </script>
    </body>
</html>

1.9.2.3 for

反复生成多个相同结构的元素

语法：v-for=“ item in items"

或者是：v-for="(val,index) in items"

或则是：v-for="val,index in items"

1、循环普通的数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 循环普通的数组 -->
        <div id="app">
            <!--
                v-for=“ item in items"
                v-for="(val,index) in items"
                v-for="val,index in items"
                第一个变量代表的是值  第二个是索引
            -->
           <ul>
            <li v-for="c,i in province">
                第{{i}}个索引处的省份是{{c.name}}</br>
                该省份{{i}}的第一个城市是{{c.citys[0]}}
            </li>
           </ul>
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                       province:[
                            {name:"河南",citys:["郑州","周口","洛阳"]},
                            {name:"河北",citys:["石家庄","鹤岗"]},
                            {name:"山东",citys:["济宁","青岛"]},
                            {name:"安徽",citys:["合肥","芜湖"]}
                       ]
                    }
                }
            })
        </script>
    </body>
</html>

2、循环对象数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 循环对象数组（获取索引） -->
        <div id="app">
           <ul>
            <li v-for="c,i in province">
               {{c.name}}
               <ul>
                   <li v-for="cc,ii in c.citys">
                       第{{ii+1}}个城市是{{cc}}
                   </li>
               </ul>
            </li>
           </ul>
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data(){
                    return{
                       province:[
                            {name:"河南",citys:["郑州","周口","洛阳"]},
                            {name:"河北",citys:["石家庄","鹤岗"]},
                            {name:"山东",citys:["济宁","青岛"]},
                            {name:"安徽",citys:["合肥","芜湖"]}
                       ]
                    }
                }
            })
        </script>
    </body>
</html>

3、循环对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 循环对象 -->
        <!-- 也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法： -->
        <div id="app">
           <span v-for="(val,key,i) of person">
               值为{{val}},
               键为{{key}},
               索引为{{i}}</br>
           </span>
           <!-- 结果
                值为张三, 键为name, 索引为0
                值为男, 键为sex, 索引为1
                值为15, 键为age, 索引为2
            -->
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                    person:{
                         name:"张三",
                         sex:"男",
                         age:"15"
                    }
                }
            })
        </script>
    </body>
</html>

4、循环数字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 循环数字 -->
        <div id="app">
           <span v-for="i of 4">{{i}}</span>
           <!-- 结果
                1234
                得到的是大于0，小于等于当前数字的值
                
                如果循环的值小于0或者该数字是非整数，会报错：Error in render: "RangeError: invalid array length"
            -->
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                    
                }
            })
        </script>
    </body>
</html>

1.9.2.4 bind

主要是绑定一些属性，给标签加上事件之后可以更改属性

语法： v-bind：属性名=‘属性值’ ，

可以简写为 : 属性名 = ‘属性值’ （也就是省略了v-bind）


<h2 v-bind:class="isActive?'active':''">这是内容</h2>

<h2 v-bind:class="{active:isActive}">这是内容</h2>


这里有两种方式，一种是利用三元运算符，一种是利用{属性名：对应vue的值}，第二种较为方便。

案例：点击一下切换一张图片，切换到最后一张时，下一张图片会调回到第一张

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 
                主要是绑定一些属性，给标签加上事件之后更改属性，
                语法为：v-bind：属性名=‘属性值’ ，
                可以简写为 :属性名=‘属性值’
                比如下面的  :src="img[index]"，使用的是data里面的数据
             -->
           <input type="button" value="切换图片"  @click="right"/>
           <img :src="img[index]" v-show="state" width="100px" height="100px"/>
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                    img:["./img/1.jpg","./img/2.jpg","./img/3.jpg"],
                    state:true,
                    index:0
                },
                methods:{
                    right(){
                        // 当不是最后一张图片时，就让图片数组中的索引++
                        if(this.index < this.img.length-1){
                            this.index++;
                        }else{
                            this.index=0;
                        }
                    }
                }
            })
        </script>
    </body>
</html>

1.9.2.5 model

双向绑定：数据发生改变的时候视图改变，视图改变的时候数据发生改变

你可以用 v-model 指令在表单中的input、textare、select 等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

1、多行文本域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 多行文本域 -->
        <div id="app">
           <textarea v-model="msg"></textarea>
           查看更改后的数据：{{msg}}
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                   msg:"hello"
                }
            })
        </script>
    </body>
</html>

2、单选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 单选框 -->
        <div id="app">
            性别:<input type="radio" value="男" name="sex" v-model="sex">男        
            <input type="radio" value="女" name="sex" v-model="sex">女<br>    
            选中的性别是：{{sex}}
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                   sex:"男"
                }
            })
        </script>
    </body>
</html>

3、复选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 复选框 -->
        <div id="app">
            性别:<input type="checkbox" value="aaa" name="test" v-model="name">aaa       
            <input type="checkbox" value="bbb" name="test" v-model="name">bbb
            <input type="checkbox" value="ccc" name="test" v-model="name">ccc<br>       
            选中的性别是：{{name}}
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                    // 复选框时，这里一定要使用数组
                   name:['aaa']
                }
            })
        </script>
    </body>
</html>

4、下拉框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
        在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。
        因此，更推荐像上面这样提供一个值为空的禁用选项。 -->
        <div id="app">
           <select v-model="opt">
                <option disabled value=""></option> 
                <option>A</option>       
                <option>B</option>        
                <option>c</option>    
           </select></br>
           {{opt}}
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                   opt:''
                }
            })
        </script>
    </body>
</html>

5、使用v-for动态渲染数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 导入js的jar包 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
    <!-- 设置双向绑定的时候第一个为空 disabled -->
        <div id="app">
           <select v-model="selected">
                <option v-for="option in options" v-bind:value="option.value">
                    {{ option.text }}  
                </option>
           </select>
           <span>Selected: {{ selected }}</span>
        </div>
        
        <script type="text/javascript">
            let vue = new Vue({
                el:"#app",
                data:{
                   selected: 'A',
                   options: [      
                        { text: 'One', value: 'A' },      
                        { text: 'Two', value: 'B' },      
                        { text: 'Three', value: 'C' }    
                   ]
                }
            })
        </script>
    </body>
</html>