Vue.js快速入门实例教程


Posted in Javascript onOctober 15, 2016

什么是vue

vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。

一、基本结构

index.html代码:

<script src="../vue.js"></script> 
<div id="app"> 
{{ message }} 
</div> 
<script src="app.js"></script> 
<!--注意:app.js要最后引入,因为要先有id为app的div,vue才能获取相应的元素。否则会报错: [Vue warn]: Cannot find element: #app-->

app.js代码:

new Vue({ 
el: '#app', //选定要使用vue的部分 
data: { //定义数组,可以在该部分使用{{}}引用 
message: 'Hello Vue.js!' 
} 
})

二、双向数据绑定

index.html代码:

<script src="../vue.js"></script> 
<div id="app"> 
<p>{{ message }}</p> 
<!--设置双向数据绑定,v-model,属性值为要绑定的数据--> 
<input v-model="message"> 
</div> 
<script src="app.js"></script>

app.js代码

new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
} 
})

三、渲染列表

index.html代码:

<script src="../vue.js"></script> 
<div id="app"> 
<ul> 
<!--v-for进行循环遍历--> 
<li v-for="todo in todos"> 
{{ todo.text }} 
</li> 
</ul> 
</div> 
<script src="app.js"></script>

app.js代码:

new Vue({ 
el: '#app', 
data: { 
todos: [ //在data中定义todos数据 
{ text: 'Learn JavaScript' }, 
{ text: 'Learn Vue.js' }, 
{ text: 'Build Something Awesome' } 
] 
} 
})

四、处理用户输入

index.html代码:

<script src="../vue.js"></script> 
<div id="app"> 
<p>{{ message }}</p> 
<!--vue中使用v-on:前缀绑定各种事件触发的方法--> 
<button v-on:click="reverseMessage">Reverse Message</button> 
</div> 
<script src="app.js"></script>

app.js代码:

new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
}, 
methods: { //methods字段内容用来定义处理方法 
reverseMessage: function () { 
//通过this.message可以更改message数据的值,这里进行了颠倒 
this.message = this.message.split('').reverse().join('') 
} 
} 
})

以上所述是小编给大家介绍的Vue.js快速入门实例教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的.

Javascript 相关文章推荐
javascript中clipboardData对象用法详解
May 13 Javascript
js实现tab切换效果实例
Sep 16 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
详解JS预解析原理
Jun 16 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
JavaScript随机生成颜色的方法
Oct 15 #Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 #Javascript
js控制div层的叠加简单方法
Oct 15 #Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 #Javascript
js控制li的隐藏和显示实例代码
Oct 15 #Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 #Javascript
JS常用函数和常用技巧小结
Oct 15 #Javascript
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
JavaScript简介
2015/02/15 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
python编写的最短路径算法
2015/03/25 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
pandas数值计算与排序方法
2018/04/12 Python
python 实现生成均匀分布的点
2019/12/05 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
高级Java程序员面试题
2016/06/23 面试题
小区消防演习方案
2014/02/21 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
小学教师师德承诺书
2014/05/23 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
学生检讨书怎么写
2015/05/07 职场文书