Vue.js,学习心得(一)
2017-10-28 本文已影响16人
战神飘雪
学习心得,
需要vue.js的链接的直接上地址了:https://vuejs.org/js/vue.js
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的简单demo</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app-1">
{{xiaoxi}}
</div>
<hr>
<div id="app-2" >
<span v-bind:title="xiaoxi">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<hr>
<div id="app-3">
<span v-if="panduan">我需要判断才能显示,能看到我证明是[真值]</span>
</div>
<hr>
<div id="app-4">
<ol>
<li v-for="student in students">{{student.name}}</li>
</ol>
</div>
<hr>
<div id="app-5">
<p>{{xiaoxi}}</p>
<button v-on:click="fzcontent">反转内容</button>
</div>
<hr>
<div id="app-6">
<p>{{xiaoxi}}</p>
<input type="text" v-model="xiaoxi">
</div>
<hr>
<script>
//声明式渲染,app1
var app1 = new Vue({
el:"#app-1",
data:{
xiaoxi:'Hello Vue~~'
}
});
//app2,v-bind指令
var app2 = new Vue({
el:"#app-2",
data:{
xiaoxi:'页面加载于'+new Date().toDateString()
}
});
//app3,v-if指令,例1,数据为1判断为真
var app3 = new Vue({
el:"#app-3",
data:{
panduan:true
// panduan:1
}
});
//app4,v-for 循环语句
var app4 = new Vue({
el:"#app-4",
data:{
students:[
{name:"名字1"},
{name:"名字2"},
{name:"名字3"},
{name:"名字4"},
{name:"名字5"}
]
}
});
//app5,处理用户输入,methods,this指向的是实例
var app5 = new Vue({
el:"#app-5",
data:{
xiaoxi:"我是App5的内容~哦.js"
},
methods:{
fzcontent:function () {
this.xiaoxi = this.xiaoxi.split('').reverse().join('')
}
}
});
//app6,数据双向绑定,v-model="xiaoxi",表单输入和应用状态之间的双向绑定
var app6 = new Vue({
el:"#app-6",
data:{
xiaoxi:"双向绑定,初始化的数据"
}
})
</script>
</body>
</html>
