这篇文章我们将学习vue.js的基础语法，对于大家学习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指令

1 2	`<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">

回车指令

1	`<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简单入门

这篇文章我们将学习vue.js的基础语法，对于大家学习vue.js具有一定的参考借鉴价值，有需要的朋友们下面来一起看看。

最新文章

热门文章