<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
MVVM模型
1. 模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
2. 双大括号表达式
语法: {{exp}} 或 {{{exp}}}(在老版本的vue有这种语法，现在已弃用)
功能: 向页面输出数据
可以调用对象的方法
3. 指令一: 强制数据绑定
功能:把数据绑定到属性中(属性中可以识别变量了)
完整写法:
angular中的ng-bind:避免语法闪现
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
4. 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
-->
<div id="d1">
<input type="text" v-model="username"/>
<p>{{username}}</p>
<!-- 之前href中是一个字符串，这个字符串是要跳转的网址 -->
<!-- 现在我们要把这个地址写活，(href中放的是变量，然后在vm操作它) -->
<!-- 但是普通的href属性不能识别变量，此时我们就需要用到v-bind指令 -->
<!-- 我们也可以简写为:href -->
<a :href="dz">百度一下</a>
<!-- 绑定事件：v-on:事件名="函数" -->
<button v-on:click="a()">点我</button>
<!-- 简写@click -->
<button @click="b()">别点我</button>
</div>
<script type="application/javascript" src="../js/vue.js"></script>
<script type="application/javascript">
//vm:vue的一个实例，所以我们一般把创建的这个实例命名为vm
var vm = new Vue({
/* 控制的元素 */
el : "#d1",
/* 所有的数据 */
data : {
username : "张三",
dz : "http://www.baidu.com",
s : "我今天很高兴"
},
/* 所有的函数 */
methods : {
a(){
alert("哈哈");
},
b(some){
alert("小明说道："+some);
}
}
});
</script>
</body>
</html>
