Vue开胃小菜

1.样式处理

Vue中标签元素的样式主要区分为两种：

• 固定样式：传统的css语法，直接修饰标签元素
• 动态样式：可能会根据不同的条件发生变化，需要通过Vue变量数据实现控制

1.class样式绑定

class样式的绑定方式有三种：字符串拼接、数组格式、对象格式

2.style样式绑定

style样式的设置，主要包含对象格式和数组格式；操作过程中对象格式的语法比较常用

Vue中对行内样式的设置，提供了什么强化功能？

Vue结合多种浏览器的兼容性问题，对行内样式进行了自动探测，可以在v-bind:style添加样式时自动检测对应的样式是否需要css前缀并完成添加，最大程度的保障样式的一致性！

2.侦听器

Vue中提供了一种特定功能，可以监听一个受控制的变量（data选项中声明的变量）内部的数据是否发生更新，一旦发生更新就**可以被监听（自动执行）**并执行一些后续的操作！

基本语法：

const app = new Vue({
    ....
    watch: {
    	被监听的变量: function(oldVal, newVal) {
    		当变量中的数据一旦发生改变，自动执行的函数
		}
	}
})

描述侦听器和普通函数的区别？

侦听器也是一种函数；和普通函数不同的是，侦听器函数会在监听的变量数据发生更新时自动调用执行；普通函数必须通过函数名称主动调用或者事件触发才能执行

3.计算属性

Vue中结合项目中需要频繁运算的处理逻辑，封装了一个可以执行自动运算的实例选项，称为计算属性；可以监听参与运算的变量数据是否发生更新，如果没有发生改变直接返回上一次运算的结果；如果发生改变自动运算并返回结果

基本语法：

const app = new Vue({
    el: "#app",
    ....
    computed: {
    	计算属性名称: 函数() {
    		自动运算并返回结果
		}
	}
})

计算属性和普通函数的区别？

计算属性，自动监听参与运算的多个变量
如果变量的数据没有发生变化，获取数据时会直接返回上一次运算的结果，不再重复运算-达到节省系统资源的目的
如果变量的任意数据发生了更新，计算属性才会再次运算函数内部的代码并返回结果，临时存储本次运算结果

普通函数必须调用才能执行，并且每次调用都会重复执行!

计算属性和侦听器函数的区别？

计算属性和侦听器，都可以监听变量的数据是否发生了变化
计算属性可以监听多个变量的数据是否发生变化，并将多个变量数据执行运算并缓存运算结果
侦听器只能监听一个数据的变化，在对应的处理函数中完成业务处理

4.过滤器

Vue框架针对页面上展示的数据，数据格式可以通过固定的函数进行规范；对展示数据进行格式规范的选项称为过滤器（filter）

基本语法：

// 全局过滤器：一旦声明，所有的Vue实例中都可以使用
Vue.filter('过滤器名称', function(val) { 格式处理函数 })

// 局部/私有过滤器：一旦声明，只在当前Vue实例中可以使用
new Vue({
    ...
    filters: {
        '过滤器名称': function(val) {
            格式处理函数
        }
    }
})

5.事件处理

事件绑定

Vue中提供了v-on的指令，用于给指定元素绑定操作事件，同时也提供了事件操作简介语法

代码操作：

<div id='app'>
    <h2>1、事件的绑定</h2>
    <div class="box" v-on:click="handler">
        v-on:事件名称，可以直接给元素绑定事件
    </div>
    <div class="box" @click="handler">
        @事件名称，同样可以直接给元素绑定事件
    </div>
</div>

事件 对象

事件触发之后，可以通过事件对象，对事件处理进行功能拓展，获取事件发生对象的标签、获取鼠标位置等等

代码操作：如何在不同的情况下，事件处理函数中获取并使用事件对象

<h2>2、事件对象</h2>
    <div class="box" @click="handler2">
      如果没有传递参数给处理函数，默认处理函数的第一个形式参数就是事件对象
    </div>
    <div class="box" @click="handler3($event, 'id12')">
      如果事件处理函数需要参数；Vue默认提供了一个显式的事件对象$event，可以传递给对应的处理函数
    </div>
</div>

const app = new Vue({
    el: '#app',
    data: {},
    watch: {},
    computed: {},
    methods: {
        handler() {...},
        handler2(e) {
            console.log(e, "事件对象")
        },
        handler3(e, id){
            console.log(e, id, "传递参数的事件对象")
        }
    }
})

事件修饰符

通过原生JS事件的操作，包含很多需要预处理的问题，如事件冒泡、元素默认行为等等

// event 原生JS中如何阻止事件冒泡？
if(event.stopPropagation){
    event.stopPropagation()
} else {
    event.cancelBubble = true
}

// event 原生JS中如何阻止浏览器默认行为？
if(event.preventDefault){
    event.preventDefault()
} else {
    event.returnValue = false
}

Vue中将原生JS中操作繁琐的方式，转换成了通过修饰符实现功能的操作方式：

• .stop：阻止事件冒泡
• .prevent：阻止默认行为
• .capture：转换触发机制，从冒泡触发事件转变为捕获触发机制
• .self：指定事件只能由当前标签自身触发
• .once：一次性事件
• .passive：2.3.0Vue 还对应 addEventListener 中的 passive 选项]提供了 .passive 修饰符

按键修饰符

一般标签上的事件在操作 过程中，也可以结合键盘按键触发对应的 事件，如按下回车执行！

原生JS中主要通过事件对象的keyCode属性判断某个按键被按下；Vue中提供了内建的按键修饰符以及扩展的可以让开发人员自定义的按键修饰符，让键盘按键完全参与到事件操作中

内建按键修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统按键修饰符

• .ctrl
• .alt
• .shift
• .meta

表单数据绑定

Vue针对网页交互中的表单元素的数据处理，提供了专门的数据处理指令：v-model，实现了逻辑数据和网页视图之间的双向绑定，对表单中操作的数据有很大的功能性提升

Vue框架中的数据，提供了声明式渲染特性，数据的双向绑定是Vue非常重要的特性之一，专业术语中被称为MVVM，Vue2.x底层通过数据劫持的方式实现的、Vue3.x底层是通过对象代理的方式实现！