Vue基础
Vue基本结构和简单指令
<!DOCTYPE html>
<html lang="en">
<style>
[v-cloak] {
display: none;
}
</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<p>---{{ msg }}---</p>
<!-- v-cloak指令 -->
<p v-cloak >---{{ msg1 }}---</p>
<!-- v-text指令 -->
<p v-text="msg2">------------</p>
<!-- v-html指令 -->
<p v-html="msg3">++++++++++++</p>
<!-- v-bind指令 -->
<input type="button" value="按钮1" v-bind:title="msg4">
<input type="button" value="按钮2" :title="msg4"><br><br>
<!-- v-on指令 -->
<input type="button" value="v-on" v-on:click="info"><br><br>
</div>
<script type="text/javascript" src="./lib/vue.js"></script>
<!-- 1. 基本的Vue代码结构 -->
<!-- 2. 插值表达式{{ }} -->
<!-- 3. v-cloak 能解决插值表达式闪烁问题:在加载过程中会将插值表达式显示出来。 -->
<!-- 4. v-text 能解决插值表达式闪烁问题,但会覆盖原有的内容, 插值表达式只会替换-->
<!-- 5. v-html 能将数据按HTML格式显示-->
<!-- 6. v-bind Vue提供的属性绑定机制 缩写是 : -->
<!-- 7. v-on Vue提供的时间绑定机制 缩写是 @-->
<script type="text/javascript">
var vm = new Vue({
// 1.
el: '#app',
data: {
msg:'插值表达式',
msg1:'v-cloak指令',
msg2:'v-text指令',
msg3:'<h1>v-html指令</h1>',
msg4:'v-bind指令'
},
methods:{
info: function() {
alert("v-on指令");
}
}
});
</script>
</body>
</html>