语法、数据代理、监听事件相关笔记"/>
Vue——模板语法、数据代理、监听事件相关笔记
文章目录
- 前言
- 一、模板语法
- 1. 插值语法
- 2. 指令语法
- 二、使用步骤
- 1.MVVM 模型
- 2.数据代理
- 3. vue中的数据代理
- 三、监听事件
- 3.1 语法格式
- 3.2 参数传递与默认形参
- 3.3 事件修饰符
- 3.4 常用键盘修饰符
- 3.5 自定义键盘修饰符
- 总结
一、模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
1. 插值语法
概念: 双大括号形式 ,用于解析标签体内容:{{msg}} msg: 为表达式,也就是说大括号内的内容应该是JS表达式。
举例:
<div id="root">{{hello}}</div>
<script src="js/vue.js"></script>
<script>
Vue.config.productionTip = false;//阻止默认生成提示
new Vue({
el:"#root",
data:{
hello:"hello,vue!"
}
})
</script>
2. 指令语法
概念:vue中有很多指令,他们用于解析标签属性、解析标签体内容、绑定事件,以v-开头。
2.1 v-html
使用 v-html 指令用于输出 html 代码:
<div id="app"><div v-html="message"></div>
</div>
<script>
new Vue({el: '#app',data: { message: '<h1>菜鸟教程</h1>' }
})
</script>
2.2 v-bind
HTML 属性中的值应使用 v-bind 指令,单向绑定(v-bind):数据只能从data流向页面。
以下实例判断 use 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
v-bind 缩写
<!-- 完整书写形式 -->
<a v-bind:href="url">跳转到百度哦!</a>
<!-- v-bind 的简写形式 -->
<a :href="url">跳转到百度哦!</a>
<div id="app"><label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"><br><br><div v-bind:class="{'class1': use}">v-bind:class 指令</div></div><script>new Vue({el: '#app',data:{use: false}});</script>
2.3 v-model
双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。多用于表单元件
<div id="root"><input type="text" name="" v-model="msg"/>
</div>
<script>Vue.config.productionTip = false;new Vue({ el:"#root",data:{msg:"张三"}})
</script>
2.4 v-if
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。
<div id="app" :class="{'class1':use}">{{type}}<span v-if="see">沾衣欲湿杏花雨</span></div><script>// 模板语法 v-html,但最好不要使用这种方式渲染页面const vm = new Vue({el:'#app',data:{see: true,}})</script>
2.5 v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块:
<div id="app"><div v-if="Math.random() > 0.5">Sorry</div><div v-else>Not sorry</div></div><script>new Vue({el: '#app'})</script>
2.6 v-else-if
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用
<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
</div><script>
new Vue({el: '#app',data: {type: 'C'}
})
</script>
2.7 v-show
我们也可以使用 v-show 指令来根据条件展示元素:
<div id="app" :class="{'class1':use}">{{type}}<span v-show="see">沾衣欲湿杏花雨</span></div><script>// 模板语法 v-html,但最好不要使用这种方式渲染页面const vm = new Vue({el:'#app',data:{see: true,}})</script>
2.8 v-click
以v-on:事件名称(v-on:click),简写方式:@click。
说明:
1:用methods来配置事件的函数,最终会在VM身上。
2:methods不可用箭头函数,否则this就不是VM。
<div id="root"><button @click="show">单击事件</button>
</div>
<script type="text/javascript">new Vue({el:"#root",methods:{show(){alert("vue中的单击事件");}}})
</script>
二、数据代理
1.MVVM 模型
概念:M:模型(Model) :data中的数据 V:视图(View) :模板代码 VM:视图模型(ViewModel):Vue实例。
理解:VM用来把数据放到视图上,data中的所有属性都会放到VM上,在视图中都可以使用。
如下图所示,vue中的MVVM模型就可以这样理解
2.数据代理
2.1 什么是数据代理?
数据代理——通过一个对象代理另一个对象属性的操作(读 / 写)
2.2 Object.defineproperty( ) 方法
“Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
可能会有小伙伴好奇,数据代理和这个方法又有什么关系呢? 其实数据代理其实这样理解:就是在自身追加了所要代理的属性,然后再设置了其他的方法操作属性(具体的方法下文会讲述)此时就可以利用Object.defineproperty( )方法实现。
2.3 Object.defineproperty( ) 方法相关参数
参数一: 将要添加属性的对象名。
参数二: 将要代理的属性名。
参数三: 相关配置项。
相关配置项目详解——
enumerable: true, //控制该属性是否可以被枚举(遍历),默认为false
wrtiable: true, // 控制该属性是否可以被修改,默认为false
configurable: true, //控制该属性是否可以被删除,默认为false
也就是说通过Object.defienproperty( )追加的属性默认是不会被遍历的以及修改、删除的,通过上述配置参数可以实现。
举例与思考:
有一名为person的对象,现要求为这个对象追加属性名为 age 值为 20的属性,有多少种方法呢?有聪明的小伙伴可能会想到,直接利用对象追加属性的方法,设置属性名和属性值的方法,直接追加,但如果后续这个追加的属性的值有所改变,这就不得不每次都要修改原码十分不方便,此时就可以在vue中使用数据代理的方式,随后借助vue中的 “响应式”系统就可以实现 data中的数据与页面中的数据实时更新的功能。
实现代码以及代码解释:
// 当有人读取person 的age 属性时,getter方法就会被调用,且返回值就是age 的值。
get( ){
return p1.x;
},
// 当有人修改person 的age 属性时,setter方法就会被调用,且返回值就是修改的具体值。
set(value){
console.log('有人修改了p2的值,是'+value);
}
// 数据代理案例const p1 = {x:1};const p2 = {y:2};Object.defineProperty(p2,'x',{enumerable: true,get( ){return p1.x;},set(value){console.log('有人修改了p2的值,是'+value);}})Object.defineProperty(p2,'age',{value: 24,enumerable: true,writeable: true,})let res = Object.keys(p2);console.log(res); </script>
3. vue中的数据代理
3.1 vue数据代理概念
通过vm对象来代理data对象中属性的操作(读/写)
3.2 vue数据代理优势
更加方便的操作data中的数据
3.3 vue数据代理的原理
通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter去操作(读/写)data中对应的属性。
3.4 数据代理图示
如图所示,vm存储data数据的方式是将其赋值了一份,存储在_data,此时还未发生数据代理,所以在此时的vm中需要读取_data中的数据,还需要_data才能够读取,这时候vue又做了一个举动就是将_data中的数据,又分别存放在了vm自身上,这就是为什么data中的数据在 vm身上都能够访问的原因,此时也就完成了数据代理。
也就是说 vm._data == data ——true
三、监听事件
3.1 语法格式
以v-on:事件名称(v-on:click),简写方式:@click。
<div id="root"><button @click="show">单击事件</button>
</div>
<script type="text/javascript">new Vue({el:"#root",methods:{show(){alert("vue中的单击事件");}}})
</script>
说明:
1:用methods来配置事件的函数,最终会在VM身上。
2:methods不可用箭头函数,否则this就不是VM。
3.2 参数传递与默认形参
语法:@click="fun($event,123)",@click="fun"等价于@click="fun($event)"
接收:
<script type="text/javascript">
new Vue({
el:"#root",
methods:{
fun(event,a){
alert("接收的参数是:",a);
}
}
})
</script>
3.3 事件修饰符
· prevent : 阻止事件的默认行为
· stop : 停止事件冒泡
<div @click="show">
<button @click.stop="show">单击按钮</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="/" @click.prevent.stop="showInfo">
点我提示信息</a> --></div>
· once :事件只触发一次
<button @click.once="show">单击按钮</button>
·capture:使用事件捕获
·self:只有event.target 是当前做操的元素时才触发事件
<div @click.self="show">
<button @click="show">单击按钮</button>
</div>
·passive:事件的默认行为立即执行,无需等待事件回调执行完毕
<ul @wheel.passive="demo" >
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
Wheel:鼠标滚轮事件,不加上passive,需要等待事件结束后执行滚动,加上则滚轮不受回调影响
3.4 常用键盘修饰符
·回车 => enter
·删除 => delete (捕获“删除”和“退格”键)
·退出 => esc
·空格 => space
·换行 => tab (特殊,必须配合keydown去使用)
<input type="text" v-model="age" @keydown.tab ="fun">
·上 => up
·下 => down
·左 => left
·右 => right
举例:
<input type="text" value="" placeholder="按下回车显示信息" @keyup.enter = "show"/>
系统修饰键(用法特殊):ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
(2).配合keydown使用:正常触发事件。
3.5 自定义键盘修饰符
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
按下crtl+y 提示。
不推荐
总结
今日的分享到此结束,最后依旧诚挚祝福屏幕前的你健康幸福、平安喜乐!
更多推荐
Vue——模板语法、数据代理、监听事件相关笔记
发布评论