<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak来解决插值表达式{{msg}}的闪烁问题（防止在取到数据以前闪烁出来的msg） -->
<!-- v-cloak和v-text之间作用相似，都能表达出msg，但是也有区别 -->
<p v-cloak>{{msg}}</p><!-- v-cloak会将标签中的内容全都显示，即使在插值表达式前后加数据也都会显示出来 -->
<h4 v-text="msg"></h4><!-- v-text只会显示msg，标签之间如果添加其他东西则会被msg覆盖掉；v-text没有闪烁问题 -->
<!-- v-html是将msg2数据中的数据转换为html的页面 -->
<div v-html="msg2"></div>
<!-- v-bind是提供用于绑定属性的指令，也就是说，如果title中的值是定值则不需要v-bind，如果是一个变量，
则需要绑定v-bind才能显示变量；也可以变量加上一个表达式 -->
<input type="button" value="按钮" v-bind:title="mytitle +'123'">
<input type="button" value="按钮" :title="mytitle+'123'"><!-- v-bind的简写形式就是: -->
<!-- v-on来提供时间绑定机制（如点击按钮触发弹窗，鼠标覆盖到按钮触发弹窗） -->
<input type="button" value="按钮" v-on:click="show">
<input type="button" value="按钮" @mouseover="show"><!-- v-on的简写形式就是@ -->
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"123",
msg2:"<h1>我是一个大大的标签，我大，我骄傲</h1>",
mytitle:"这是一个自定义title"
},
methods:{//这个methods属性中定义了Vue中所有可用的方法
show:function(){
alert("hello")
}
}
})
</script>
</body>
</html>
