欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue.js入门教程之基础语法小结

程序员文章站 2023-10-26 17:54:58
前言 vue.js是一个数据驱动的web界面库。vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是vue.js最简单的例子, 当...

前言

vue.js是一个数据驱动的web界面库。vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。

以下代码是vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化。

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new vue({
 el: '#demo',
 data: {
 message: 'hello vue.js!'
 }
})

vue.js的基础语法

插入文本

<span>message: {{ text }}</span>

插入html格式的文本,在页面显示为html的格式

<span>message: {{{ html }}}</span>

内容不跟随data的变化

<span>message: {{ * text }}</span>

属性上绑定数据

<div id="item-{{ id }}"></div>

在{{}}中使用js表达式

{{ number + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ message.split('').reverse().join('') }}

在{{}}中使用js语句

{{ var a = 1 }}
{{ if (ok) { return message } }}

if指令

<p v-if="greeting">hello!</p>
这里 v-if指令将根据表达式 greeting值的真假删除/插入 <p>元素。

href指令

<a v-bind:href="url"></a>
或者
<a href="{{url}}"></a>

click指令

<a v-on:click="dosomething">

回车指令

<input v-model="newtodo" v-on:keyup.enter="addtodo">

缩略写法

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<button v-bind:disabled="somedynamiccondition">button</button><!-- 缩写 -->
<button :disabled="somedynamiccondition">button</button>

v-on

<!-- 完整语法 -->
<a v-on:click="dosomething"></a>
<!-- 缩写 -->
<a @click="dosomething"></a>

总结

模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。小编会在后面给更新如何使用计算属性。感兴趣的朋友们请继续关注。