本文深入探讨Vue.js框架的关键特性，包括数据绑定、事件处理、计算属性和侦听器等，通过实例展示如何高效地利用这些特性进行前端开发。
1、指令下
-
v-bind（单向数据绑定）
用途：属性和数据进行绑定（绑定一个数据在某一个属性身上）
为什么要绑定？
答：通过操作数据就可以改变V中DOM的样式，相当于操作了DOM。
一下演示的代码都是基于此实例。
new Vue({ el: '#app', // 挂载 data: { imgUrl: 'https://www.baidu.com/img/bd_logo1.png', msg: 'hello Vue.js', size: 'size', bg: 'bg', flag: true, color: 'color', w: '100px', h: '100px', backg: 'blue', styleObj: { width: '100px', height: '100px' }, styleColor: { background: 'yellow' } } })-
绑定类名
-
数组的写法(推荐写法)
<h4> 类名绑定 - 数组写法 </h4> <p :class = "['size','bg']"></p> //数组中的类名与data中的数据无关 <p :class = "[size,bg]"></p> //数组中的类名是从data中获取的 -
对象的写法
<h4> 类名绑定 - 对象写法 </h4> <p :class = "{size: true,bg: true}"></p> //对象中的类名与data中的数据无关 <p :class = "{[size]: true,[bg]: true}"></p> //对象中的类名从data中获取
-
-
绑定样式
-
数组的写法(推荐写法)
<h4> 样式绑定 - 数组写法 </h4> <p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p> <p :style = "[ styleObj,styleColor ]"></p> -
对象的写法
<h4> 样式绑定 - 对象 </h4> <p :style = "{width: '100px',height: '100px',background: 'blue'}"></p> <p :style = "{width: w,height: h,background: backg}"></p>
-
-
引申
-
绑定input的value值
<input type="text" v-bind:value = "msg"> <!-- 简写 --> <input type="text" :value = "msg"> -
绑定图片的src属性
<h4> v-bind 可以绑定任意一个dom身上的属性 </h4> <img :src="imgUrl" alt=""> -
v-bind绑定类名不会与原来已经存在的类名产生互相覆盖
<p class = "text" :class = [size,bg]></p> -
绑定类名时候的灵活运用
<p :class = "{ [size]: flag,[bg]: flag}" ></p> <p :class = "[ size, flag?bg:color ]"></p> <p :class = "[ size, flag && bg || color ]"></p>
-
-
-
v-model(双向数据绑定)
单向：数据改变，试图改变
双向：数据改变，视图改变，反之，视图改变，数据改变。
new Vue({ el: '#app', // 挂载 data: { msg: 'haha' } })-
v-model默认绑定表单元素的value值
-
什么叫做表单元素？
from叫做表单标签，form里面的input textarea…叫做表单元素。
<h3> v-model 双向数据绑定 </h3> <input type="text" v-model = "msg"> //对比单向绑定可以看出，此处少了value，因为v-model默认绑定表单的value值。
-
-
-
小例子单向数据绑定实现双向数据绑定效果
实例：
new Vue({ el: '#app', // 挂载 data: { msg: 'haha' }, methods: { //事件处理程序 change: function ( e ) { this.msg = e.target.value } } })V的实现：
<input type="text" :value = "msg" v-on:input = "change"> <-- 简写 --> <input type="text" :value = "msg" @input = "change"> -
v-on 事件
-
基础事件绑定
Vue中写事件，要先写逻辑，再进行事件的绑定。
-
事件传参
业务：点击button按钮，弹出input的value
实例：
new Vue({ el: '#app', data: { val: '' }, methods: { fn(val) { alert(val) } } })V的实现：
<input type="text" v-model="val"> <button @click="fn( val )"> 点击 </button> -
事件对象
业务：如果我们的fn函数接收2个参数，其中一个参数是事件对象，这个时候我们看一下效果
问题：事件对象e丢失了（输出undefined）
解决方案：在调用方法时，传入一个实际参数： $event。
实例：
new Vue({ el: '#app', data: { val: '' }, methods: { fn(e, val) { console.log(val) console.log(e) } } })V的实现：
<input type="text" v-model="val"> <button @click="fn( $event,val )"> 点击 </button> -
事件修饰符和按键修饰符
为什么会有修饰符？
如果有三个尺寸不同的嵌套的盒子，需要给每个盒子加点击事件，这是需要考虑事件冒泡问题，如果要阻止冒泡，需要给每个盒子的事件添加ev.stopProgation，代码就会变得繁琐，Vue提供修饰符解决这个问题。
-
事件修饰符(.stop;.prevent;.capture;.self;.once;.passive)
<div class="large" @click.stop = "largeHandler"> <div class="middle" @click.stop = "middleHandler"> <div class="small" @click.stop = "smallHandler"> </div> </div> </div> -
按键修饰符(按键码;按键码的别名;系统新增修饰符)
<input type="text" @keyup.13="fn( val )" v-model='val'> <hr> <input type="text" @keyup.enter="fn( val )" v-model='val'> <hr> <input type="text" @keyup.p="fn( val )" v-model='val'>
-
-
-
模板语法mustache （双大括号{{}}）
-
所有的数据类型都是支持的，但是console.log，alert这些输出语法是不支持的。
实例：
new Vue({ el: '#app', data: { num: 10, str: 'hello Vue.js', bool: true, nul: null, und: undefined, arr: [1,2,3], obj: { name: 'zhangsan' } } })V的实现：
<p> number: {{ num }} </p> <p> string: {{ str }} </p> <p> boolean: {{ bool && 1 || 2 }}</p> <p> null: {{ nul && 3 || 4 }}</p> <p> undefined: {{ und && 5 || 6 }} </p> <p> array: {{ arr[1] }}</p> <p> object: {{ obj.name }}</p> <!-- <p> function: {{ ( function() { console.log('fn')} )() }}</p> --> //报错
-
2、method（用来存储事件处理程序）
3、computed计算属性
-
计算属性产生的原因
实例：
new Vue({ el: '#app', data: { msg: 'I Love eat 葡萄 ' }, computed: { //计算属性中存放的都是方法 newMsg () { return this.msg.split('').reverse().join('') } } })V的实现：
//V应该是用于数据展示，但是我们这么处理，发现V做了一部分逻辑判断，违背了MVVM。 {{ msg.split('').reverse().join('') }} <hr> //这时就用到了计算属性，把逻辑放到VM中实现。 <p> {{ newMsg }} </p>总结：1、计算属性是一个选项，选项值是一个对象，对象中存放的是方法。
2、方法必须要有返回值。
3、直接将方法名当做全局变量一样直接使用。
-
计算属性的使用
实例：
new Vue({ el: '#app', data: { firstName: '', lastName: '' }, computed: { fullName: { get () { //getter return this.firstName + this.lastName }, set ( val ) { //setter //val就是当前绑定元素的value值 this.firstName = val.slice( 0,1 ) this.lastName = val.slice( 1 ) } } } })V的实现：
<div> 姓： <input type="text" v-model = "firstName"> </div> <hr> <div> 名： <input type="text" v-model = "lastName"> </div> <hr> <div> 全名： <input type="text" v-model = "fullName"> </div>总结：1、什么时候使用计算属性？
必须有逻辑处理，还有返回值。
我们使用的结果，要当做全局变量一样使用。
2、计算属性一旦确定就不可修改了。
4、watch侦听属性
-
watch的使用
实例：
watch是一个选项，选项值是一个对象。
对象中可以存放的类型：
{[key:string]:string|Function|Object|Array}
常用的是方法和对象。
new Vue({ el: '#app', data: { firstName: '', lastName: '', fullName: '' }, watch: { // 侦听 谁 -> 指的是data中的数据 // watch中可以存放方法 firstName(val) { this.fullName = val + this.lastName }, lastName(val) { this.fullName = this.firstName + val }, // fullName ( val ) { // this.firstName = val.slice( 0,1 ) // this.lastName = val.slice( 1 ) // } fullName: { deep: true, //深度监听 handler(val) { // 处理程序 this.firstName = val.slice(0, 1) this.lastName = val.slice(1) } } } })V的实现：
<div> 姓： <input type="text" v-model="firstName"> </div> <hr> <div> 名： <input type="text" v-model="lastName"> </div> <hr> <div> 全名： <input type="text" v-model="fullName"> </div>总结：由一个数据改变，引起的新的数据请求。
扫一扫
4825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
