在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助
1、Vue.js !important
2、界面之下：还原真实的MV*模式 !important
本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习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>
