VUE的引入

VUE的使用和jQuery一样，我们可以直接通过下载文件后引入也可以直接通过cdn引入，cdn地址如下

1
2
3
4
<!-- 开发环境版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

开发版和生产版的区别是，开发版包含了带有帮助的命令行警告，而生产版则优化了尺寸和速度，没有命令行警告

VUE对象

当我们把vue.js引入后我们就可以实例化Vue对象了

1
2
3
4
5
6
var app = new Vue({
    el:"#app", 
    data:{
        msg:"hello world"
    }
})

实例化Vue对象一般传入一个带有el和data参数的对象，我们可以像上述代码这样写，也可以先创建一个对象，然后传参，如下

1
2
3
4
5
6
7
var options = {
    el:"#app", 
    data:{
        msg:"hello world"
    }
}
var app = new Vue(options)

这里解释一下两个参数，el用于绑定dom，确定vue对象的挂载区域，也就是我们这个Vue对象绑定了id为app的dom，使得这个dom可以使用数据data中的内容，data就是一个可以添加任何数据的对象

VUE简单使用

上面介绍了Vue对象中的参数，现在我们来使用以下这个Vue对象，首先最简单的，我们让Vue的data数据渲染到页面上

我们只要在html标签中按照如下方式写入数据，就可以渲染到页面上，马上就可以看到我们写在Vue中的msg信息，也就是”hello world”

1
<div id="app">{{msg}}</div>

VUE的这种编程方式被称为声明式编程，区别于原生js的命令式编程开发模式，通过使用VUE对象来对数据进行管理

数据绑定

刚才我们知道了html内容使用的规则是在两个大括号中添加数据，那么在属性中该如何使用数据 (比如图片的地址等需要放在标签内使用的内容)

在标签中使用数据的方式是用v-bind指令来实现，它可以往元素的属性中绑定数据

1
<img v-bind:src="picUrl">

在使用中，v-bind是可以省略的，也就是可以直接像如下代码一样直接写

1
<img :src="picUrl">

两种写法是等价的

循环加载数据

当从data中获取数据，数据量大且具有重复性的时候就有了对循环读取数据功能的需求，比如读取歌单，名单并渲染等，这里就要用到Vue的循环命令v-for

比如data中有一个artists数组，里面是多个player，那么我们可以用v-for来循环得到每个歌手的名字

1
2
3
<li v-for="player in artists">
    <h1>{{player.name}}</h1>
<li>

条件判断

对于条件判断语句，Vue也有独特的命令v-if,v-else-if以及v-else

比如我们要根据读取的数据做一个条件判断来在app中显示相应的内容

1
2
3
<h3 v-if="age>18">游戏防沉迷：游玩时间10小时</h3>
<h3 v-else-if="age>12">游戏防沉迷：游玩时间5小时</h3>
<h3 v-else>游戏防沉迷：游玩时间2小时</h3>

结合v-for和v-if我们就可以对数据进行带条件判断地展示

事件的监听

Vue中通过v-on来绑定事件

1
<button v-on:click = "show"> {{msg}} </button>

Vue中还有对应的语法糖，用@来代替v-on:

1
<button @click = "show"> {{msg}} </button>

这里用到的方法show，也可以在Vue对象中作为参数传入，除了el和data之外，Vue还支持methods参数，用来存放方法，示例如下，这样子我们就可以简单实现点击改变按钮内容

1
2
3
4
5
6
7
8
9
10
11
12
var app = new Vue({
    el: "#app",
    data: {
        msg: "click",
        age: 12
    },
    methods: {
        show: function () {
            app.msg = "hello world!"
        }
    }
})

双向数据绑定

如果我们希望修改data中的值，就可以通过数据绑定命令v-model来实现，就比如我们希望去修改data中的年龄，从而改变防沉迷游玩时间，那么我们就可以这么实现

1
<input type="text" v-model="age">

此时我们修改input中的数字，就能改变data中对应的age值，这里的数据绑定是双向绑定，所以我们一开始也能在这个输入区域，看到data中age的初始值12

v-bind是model到view的单向绑定，v-model是model和view的双向绑定

只填充一次数据

如果我们希望用Vue中的data来填充数据，但是不希望随着data中值的改变而发生变化，则Vue中也提供了这样的功能，用v-once即可

1
<h1 v-once>{{msg}}</h1>

插入HTML变量

有时我们会有插入HTML内容的需求，比如直接插入一个图片的dom

1
2
3
4
5
6
var app = Vue({
    el:"#app",
    data:{
        content:"<img src='...'>"
    }
})

如果要使用data里面这个content，我们发现直接用变量的方式插入并不可行，比如说如下代码

1
<div>{{content}}</div>

这样并不能将图片显示出来，而是将html代码显示在了页面了，如果希望使用这个html代码，则需要用v-html命令

1
<div v-html="content"></div>

动态绑定

Vue还支持动态修改属性的名字，比如有些属性在特殊条件下才会使用，那么就可以在特定条件下改变属性名字，比如下列例子中一开始attr变量值为data-src，并不会使得图片显示，当将其值改为src时，图片就可以正常显示，该功能在vue2.6加入

1
<img :[attr]="url">
1
2
3
4
data:{
    url:"..."
    attr:"data-src"
}