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代码)
Oct 29 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
浅析Ajax语法
Dec 05 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vue Element左侧无限级菜单实现
Jun 10 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与C#分别格式化文件大小的代码
2011/05/14 PHP
preg_match_all使用心得分享
2014/01/31 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python 实现兔子生兔子示例
2019/11/21 Python
Python实现FLV视频拼接功能
2020/01/21 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
利群广告词
2014/03/20 职场文书
教师师德承诺书
2014/03/26 职场文书
慰问信格式规范
2015/03/23 职场文书
参加招聘会后的感想
2015/08/10 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫