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 相关文章推荐
jquery 全局AJAX事件使用代码
Nov 05 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 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+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
js实现表格筛选功能
2017/01/18 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
Python中的列表知识点汇总
2015/04/14 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
python计算n的阶乘的方法代码
2019/10/25 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
军训心得体会
2013/12/31 职场文书
大学校庆邀请函
2014/01/11 职场文书
工地材料员岗位职责
2015/04/11 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
Java后台生成图片的完整步骤
2021/08/04 Java/Android
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle