在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助
1、 Vue.js !important
2、界面之下：还原真实的MV*模式 !important
3、web前端优化之reflow(减少页面的回流)
4、深度剖析：如何实现一个 Virtual DOM 算法
本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习vue.js需要一定基础.
一、声明式渲染
1、实现Hello World的功能
还是熟悉的Hello World,下面用Vue.js的声明式渲染来实现
<body><div id="tDiv"> ???{{message}}</div></body><script type="text/javascript"> ???var currentPage=new Vue({ ???????el:"#tDiv", //指定绑定的目标dom元素的Id ???????//绑定数据源 ???????data:{ ???????????message:"hello World By Vue!" ???????} ???});</script>此时Vue已经将Dom和数据进行了绑定,所有的元素会随着数据的改变而改变,打开当前页面的控制台,在控制台中改变数据,如下图:
2、通过给dom元素的添加vue指令属性将dom元素的属性和数据进行绑定
下面通过vue指令将数据和dom元素的属性绑定到一起,代码如下:
<body><div id="tDiv" v-bind:title="message"> ???鼠标悬停几秒钟查看此处动态绑定的提示信息！</div></body><script> ???var currentPage=new Vue({ ???????el:"#tDiv", //指定绑定的目标dom元素的Id//绑定数据源 ???????data:{ ???????????message:‘页面加载于 ‘ + new Date().toLocaleString() ???????} ???}); ???//鼠标悬浮效果 ???$(document).ready(function () { ???????var curr=$("#tDiv"); ???????curr.hover(function () { ???????????alert(curr.attr("title")); ???????}) ???})</script>同样的,通过控制台修改数据的时候,dom元素也会发生相应的改变.自行实现
总结:一中的例子展示了Vue.Js将Dom文本绑定到数据的功能.
二、条件与循环(if语句和for语句在Vue中的使用方式)
1、使用vue的类if语句功能
通过v-if条件指令控制元素的显示隐藏,代码如下:
<body><div id="tDiv" v-if="seen"> ???显示</div></body><script type="text/javascript"> ???var currentPage=new Vue({ ???????el:"#tDiv", //指定绑定的目标dom元素的Id ???????//绑定数据源 ???????data:{ ???????????message:‘页面加载于 ‘ + new Date().toLocaleString(), ???????????seen:true ???????} ???});</script>同样在控制台中修改对应的数据,如下图:
结论:上面的例子展示了Vue.Js不仅能将Dom文本绑定到数据,还能将Dom结构绑定到数据
2、使用vue的类for功能
通过v-for指令来遍历数据集合进行展示,代码如下:
<body><div id="tDiv"> ???<ul v-for="model in list"> ???????<li>{{model.name}}</li> ???</ul></div></body><script> ???var currentPage=new Vue({ ???????el:"#tDiv", //指定绑定的目标dom元素的Id ???????//绑定数据源 ???????data:{ ???????????????list:[ ???????????????????{id:1,name:"张三"}, ???????????????????{id:2,name:"李四"}, ???????????????????{id:3,name:"王五"} ???????????????] ???????????} ???});</script>在控制台中给list追加数据,如下图:
会发现ul列表中会多出一条数据,如下图:
三、事件监听
Vue提供了监听Js原生事件的机制,代码如下:
<body><div id="tDiv"> ???<p>{{message}}</p> ???<input type="button" v-on:click="resetPContent" value="点我有惊喜"></div></body><script> ???var currentPage=new Vue({ ???????el:"#tDiv", //指定绑定的目标dom元素的Id ???????//绑定数据源 ???????data:{ ???????????message:"Hello World By Vue" ???????}, ???????methods:{ ???????????resetPContent:function(){ ???????????????this.message=this.message.split(‘‘).reverse().join(‘‘); //reverse颠倒数据元素的顺序 ???????????} ???????} ???});</script>点击之后,如下图:
注意在resetPContent方法中,更改了数据,相当于改变了应用程序的状态,但是注意这里没有任何操作dom元素的代码,因为所有的dom操作都由vue来进行,这里我们主需要关心数据源.更新dom的操作都由vue来进行.
四、表单输入和应用状态之间的双向绑定
通过v-model指令来实现表单输入和应用状态之间的双向绑定,代码如下：
<body><div id="tDiv"> ??<p>{{message}}</p> ???<input type="text" v-model="message"></div></body><script> ???var currentPage=new Vue({ ???????el:"#tDiv", //指定绑定的目标dom元素的Id ???????//绑定数据源 ???????data:{ ???????????message:"Hello World By Vue" ???????} ???});</script>Vue.js系列之一初识Vue
原文地址：http://www.cnblogs.com/GreenLeaves/p/7773716.html