/*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-bottom: 20px;
}
</style>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.3.min.js"></script>
</body>
</head>
<body>
<!--demo1-->
<div id="app">
{{message}}
</div>
<!--
v-bind被称为指令，指令带有前缀v-，以表示他是vue提供的特殊属性，他会在已经渲染过的dom上应用特殊的响应式行为。
-->
<!--demo2-->
<div id="app2">
<span v-bind:title="message"><!--将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。-->
把你的鼠标悬停在我身上几秒钟，查看动态绑定标题！
</span>
</div>
<!--demo3-->
<div id="app3">
<p v-if="seen">判断一下 是真的时候 你才能看见</p>
</div>
<!--demo4
v-for 指令可以绑定数据到数组来渲染一个列表
-->
<div id="app4">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<!--demo5-->
<!--
v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法
-->
<div id="app5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<!--demo6-->
<!--
v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。
-->
<div id="app6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
/*demo1*/
var app = new Vue({
el:'#app',
data:{
message:'hello vue'
}
});
/*demo2*/
var app2 = new Vue({
el:'#app2',
data:{
message:'您加载此网页上'+new Date()
}
});
/*demo3*/
var app3 = new Vue({
el:"#app3",
data:{
seen:true
}
});
/*demo4*/
var app4 = new Vue({
el:'#app4',
data:{
todos:[
{text:"111111111111111111"},
{text:"222222222222222222"},
{text:"333333333333333333"}
]
}
})
/*demo5*/
/*
* split() 方法用于把一个字符串分割成字符串数组
* reverse() 方法用于颠倒数组中元素的顺序。
* join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
* */
var app5 = new Vue({
el:'#app5',
data:{
message:'hello vue.js'
},
methods:{
reverseMessage:function () {
this.message=this.message.split('').reverse().join('')
}
}
})
/*demo6*/
var app6=new Vue({
el:"#app6",
data:{
message:'hello vue'
}
})
</script>
</body>
</html>
*/