这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章我们将学习 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 指令
- <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 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。小编会在后面给更新如何使用计算属性。感兴趣的朋友们请继续关注 phperz。
来源: http://www.phperz.com/article/17/0503/332175.html