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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
判断用户是否在线的代码
Mar 05 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python自省及反射原理实例详解
2020/07/06 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
电子专业毕业生自我鉴定
2014/01/22 职场文书
2014年实验室工作总结
2014/12/03 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL