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


Posted in Javascript onSeptember 01, 2016

前言

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 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。小编会在后面给更新如何使用计算属性。感兴趣的朋友们请继续关注三水点靠木。

Javascript 相关文章推荐
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
AngularJs directive详解及示例代码
Sep 01 #Javascript
AngularJs concepts详解及示例代码
Sep 01 #Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 #Javascript
AngularJs html compiler详解及示例代码
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 #Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 #Javascript
You might like
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python装饰器原理与用法分析
2018/04/30 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python画双y轴图像的示例代码
2019/07/07 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
保护环境倡议书
2014/04/14 职场文书
大二学习计划书范文
2014/04/27 职场文书
建筑安全标语
2014/06/07 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
归途列车观后感
2015/06/17 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技