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>

本文分享自微信公众号 - 萌兔it(mengtu_it)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券