Vue系列（二）——Vue之模板语法

Vue的引用方式

Vue有两种使用方式：

1）同别的库一样，通过<script>标签，来引入。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2）另一种方式就是通过webpack-cli来实现。

淘宝镜像 cnpm：https://npm.taobao.org/：下载淘宝镜像压缩包

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$cnpm install --global vue-cli

$vue init webpack my-project(项目名称)

安装依赖：$cd my-project

$npm install

$npm run dev

知道了怎么引用，下面我们就去看一下Vue的基本语法吧~

Vue的基本语法

数据驱动视图：还记得上一篇提到的数据双向绑定吗？我们就在这里看一下双向绑定在Vue中是怎么体现的吧！

<div id="app">

hello {{name}} // 4.渲染

</div>

<script>

let vm = new Vue({ //创建一个实例 1.创建实例语法

el:"#app", //3. 挂载元素

data:{

name:"Rabbit" //2.设置数据

}

});

</script>

如上图所示，从创建Vue实例到成功渲染需要分为四步，首先要创建一个实例，然后在实例的data处设置数据，并将其挂载，然后才能够进行渲染。在此之后，一旦我们改变了设置的数据，页面中的数据便可以同步更改，而不需要再去获取dom节点等操作了。

模板语法

下面就到了今天的主角，让我们详细介绍一下ta吧~~Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据，所以就照着HTML的写法来写就没毛病！

1）插值：在Vue中文本、HTML甚至JavaScript代码都可以写在模板中。

文本：<span>RabbitName: {{ SnowBall }}</span>

文本指令是最简单也是最常见的，上面是我们用的最多的写法。

还有一种写法是：<span v-text="SnowBall"></span>

2) HTML: 如果通过{{}}应用HTML，则会直接被打印出来，而不是作为HTML对象去执行；因此html需要不同的写法：v-html

<span v-html="SnowBall"></span>

3）JavaScript表达式：在Vue的模板中，写入JS表达式也不是梦：

比如：{{ number + 1 }}

2）指令：指令是啥呢，很好判断，就是前面带个v-的，这里和angular有点像，只不过angular是ng-辣~指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，就像上面的v-text和v-html，它们就要通过指令来实现。那么还有哪些指令呢？想一想常需要写的功能，写业务的小伙伴第一下想到的一定是条件语句：

我们有v-if呀：

<p v-if="white">我是一只白兔兔！</p>

上面的代码，可以通过给white设定一个boolean来控制‘我是一只白兔兔’这句话是否显示。

再一个我们会想到的一定是for循环：

v-for：通过对一个数据的遍历来轮询对象。

<ul id="rabbitFamily">

<li v-for="rabbit in rabbits">

{{ rabbit.name }}

</li>

</ul>

还有什么呢？v-bind听说过吗，有了它，我们就可以响应式的更新HTML特性咯~

<a v-bind:href="url">...</a>

也可以写成：<a :href="url">...</a>

再比如说触发事件：

<button v-on:click="happy">click me</button>

也可以写成<button @click="happy">click me</button>