探寻vue之美
前言：之前就听说vue是一个非常厉害的mvvm框架，大大小小的介绍文章看了不少。但是没有系统的学习，今天就来系统的学习一下吧。
无论学习那个库，其阅读官方文档是必不可少的: vue官方网站
概述：
vue的核心是一个响应的数据绑定系统，它可以让数据与dom保持同步。vue语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。
一.使用：
Vue的使用非常简单。下载好vue.js文件。在HTML中直接引用即可：
<script src="../vue.js"></script>
先来一个简单的例子：
<body>
<div id="box">
<span class="red">{{ name }}</span>
<span>{{ *name }}</span>
{{{ name }}}
<input type="text" v-model="name">
<input type="text" v-model="name">
</div>
<script src="libs/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
name:"<h1>ZNS</h1>"
}
})
</script>
</body>
vue的{{{ }}}，可以解析字符串
<div id="box">
<input type="text" v-model='name' />
<input type="text" v-model='name' />
<p>{{{name}}}</p>
</div>
<script src="libs/vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
name:'<h1>魏明理</h1>'
}
})
</script>
vue中{{* }}，不可变模板
<body>
<div id="box">
<span class="red">{{ name }}</span>
<span>{{*name }}</span>
<input type="text" v-model="name">
<input type="text" v-model="name">
</div>
<script src="libs/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
name:"zns"
}
})
</script>
</body>
在Vue中为DOM元素绑定事件，通过v-on指令或事件语法糖 @ 为DOM元素绑定事件。
<body>
<div id="box">
<input type="button" value="点击" v-on:click='fun' />
</div>
<script src="libs/vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
name:'<h1>魏明理</h1>'
},
methods:{
fun:function(){
alert(1)
}
}
})
</script>
</body>
@mouseover/@mousemove/@mousedown/@keydown//等等还有好多。