一、模块
1、定义
- 1.动态的 html 页面
2.包含了一些 JS 语法代码
a. 双大括号表达式
b. 指令(以 v-开头的自定义标签属性)
a.双大括号表达式
- 语法: {{exp}}
- 功能: 向页面输出数据
- 可以调用对象的方法
2.指令一：强制数据绑定：
- 功能: 指定变化的属性值
- 完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行
- 简洁写法: :xxx='yyy'
3.指令二：绑定事件监听：
- 功能: 绑定指定事件名的回调函数
- 完整写法:
v-on:keyup='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
- 简洁写法: @keyup='xxx'
@keyup.enter='xxx'
@click="test"
- 绑定事件test未指定参数时，默认传$event,代表事件对象，event.target.innerHTML
- 事件修饰符
.prevent : 阻止事件的默认行为 event.preventDefault()，比如a标签的href和 a中click事件
.stop : 停止事件冒泡 event.stopPropagation()
- 按键修饰符
.keycode : 操作的是某个键的keycode值，如@keyup.13 等于@keyup.enter
.enter : 操作的是enter键
<div id="example">
<h2>1. 绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3('abcd', $event)">test3</button>
<h2>2. 事件修饰符</h2>
<a href="http://www.baidu.com" @click.prevent="test4">百度一</a>
<div style="width: 200px;height: 200px;background: red" @click="test5">
<div style="width: 100px;height: 100px;background: blue" @click.stop="test6">
</div>
</div>
<h2>3. 按键修饰符</h2>
<input type="text" @keyup.13="test7">
<input type="text" @keyup.enter="test7">
</div>
<script type="text/javascript">
new Vue({
el: '#example',
data: {},
methods: {
test1(event) {
alert(event.target.innerHTML)
},
test2 (msg) {
alert(msg)
},
test3 (msg, event) {
alert(msg+'---'+event.target.textContent)
},
test4 () {
alert('点击了链接')
},
test5 () {
alert('out')
},
test6 () {
alert('inner')
},
test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
})
</script>
<div id="app">
<h2>双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.topperCase()}}</p>
<p v-text="msg"></p> <!-- 如textContent-->
<p v-html="msg"></p> <!-- 如innerHtml-->
<h2>一、强制数据绑定</h2>
<a href="url">访问指定站点1</a> <!-- 错误写法 -->
<a v-bind:href="url">访问指定站点2</a>
<a :href="url">访问指定站点3</a>
<img v-bind:src="imgUrl">
<img :src="imgUrl">
<h2>二、强制事件监听</h2>
<button v-on:click="clickButton">点击1</button>
<button @:click="clickButton2(msg)">点击2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
var vm = new vue({
el: '#app',
data: {
msg: 'game over',
url: 'http://www.baidu.com'，
imgUrl:'https://cn.vuejs.org/images/logo.png'
},
method: {
clickButton() {
alert('点击了')；
},
clickButton2(content) {
alert(content)；
}
}
})
二、计算属性和监视
<!--1.计算属性
在computed 属性对象中定义计算属性的方法 ，在页面中使用{方法名}显示计算结果
2 监视属性
通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 通过回调函数：getter/setter 实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次 getter 计算
-->
<div id="demo">
姓：<input type="text" placeholder="姓氏" v-model="firstName">
<br />
名：<input type="text" placeholder="名字" v-model="secondName">
<br />
姓名1（单向）<input type="text" placeholder="姓名" v-model="fullName1">
<br />
姓名2（单向）<input type="text" placeholder="姓名" v-model="fullName2">
<br />
姓名3（双向）<input type="text" placeholder="姓名" v-model="fullName3">
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'a',
secondName: 'b',
fullName2: 'ab',
},
computed: {
// 什么时候执行：初始化显示/相关的data属性数据发生改变时
// 计算并返回当前属性的值
fullName1: function () { //方式一：拼接姓名，是计算属性中的一个方法 ，计算返回值作为属性值
return this.firstName + ' ' + this.secondName;
},
fullName3: {
// 回调函数： 计算并返回当前属性的值
// 回调函数是自己定义的，自己未调用，但执行了；注意：什么时候调用？用来做什么？
// 当需要读取当前属性值时回调，
get() {
return this.firstName + ' ' + this.secondName;
},
// 当属性值发生改变时，回调
set(value) {
const names = value.split(' ');
this.firstName = names[0];
this.secondName = names[1];
}
}
},
watch: {
// 监视secondName
secondName: function (value) {
this.fullName2 = this.firstName + ' ' + value;
}
}
});
vm.$watch('secondName', function (value) {
this.fullName2 = this.firstName() + ' ' + value;
});
</script>
