Vue介绍

MVVM模式

Model：模型层，这里标识JavaScript对象
View：视图层，在这里表示DOM（HTML操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue7个属性

el：
data：将视图层的数据抽象出来存放在data中
template：用来设置模板
methods：放置页面中的业务逻辑，js方法一般放置在methods中
render：创建真正的Virtual Dom
computed：用来计算
watch：
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值

Vue基本语法

<span>标签属性
v-bind:title="message"：鼠标悬停显示文字
判断-循环
v-if、v-else、v-else-if
如：
<h1 v-if="ok">
    Yes
</h1>
v-for
如：
<li v-for="item in items">
    { {item.message} }
</li>

Vue绑定事件

v-on属性可以监听事件
如：
v-on:事件="xxxx"

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"吴吉凯"
        },
        methods:{
            //方法必须定义在Vue的Methods对象中
            sayHi:function (event) {
                alert(this.message)
            }
        }
    });
</script>
<div id="app">
    <button v-on:click="sayHi"></button>
</div>