Vue模板语法
2018-09-28 本文已影响0人
qianxun0921
vue模板语法
1、引入Vue.js
2、创建Vue对象
el : 指定根element（选择器）
data : 初始化数据（页面可以访问）
3、双向数据绑定 ： v-model
4、显示数据：{{xxx}}
5、理解Vue的mvvm实现
<div id="app">
<input type="text" v-model="username">
<p>Hello {{username}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 创建Vue实例（Vue是一个vue.js库提供的构建函数）
const vm = new Vue({//配置对象（属性名必须是指定的一些名称）
el: '#app',//element:选择器，表明将页面哪个元素交给Vue管理
data: {//数据（Model）
username: 'Vue'
}
})
vm.username = 'kobe';
</script>
模板语法
<body>
<!--
1. 模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
2. 双大括号表达式
语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法
3. 指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
4. 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
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>
