- 模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
- 双大括号表达式
语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法
- 指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
- 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
<div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{msg}}</p><!-- textContent -->
<p>{{msg.toUpperCase()}}</p>
<p v-text="msg"></p><!-- textContent -->
<p v-html="msg"></p><!-- innerHTML -->
<h2>2. 指令一: 强制数据绑定</h2>
<!-- <img src="imgUrl" alt="大V"> -->
<!-- <img v-bind:src="imgUrl" alt="大V"> -->
<img :src="imgUrl" alt="大V">
<h2>3. 指令二: 绑定事件监听</h2>
<button v-on:click="test">test1</button>
<!-- <button @click="test2('abc')">test2</button> -->
<button @click="test2(msg)">test2</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
// msg: 'I Will Back!'
msg: '<a href="http://www.baidu.com">百度网</a>',
imgUrl: 'https://cn.vuejs.org/images/logo.png'
},
methods: {
test(){
alert('hihi~~');
},
test2(content){
alert(content);
}
}
})
</script>
</body>
</html>
