Vue.JS快速上手(指令和实例方法)

时间:2023-03-10 01:19:05
Vue.JS快速上手(指令和实例方法)

1.声明式渲染

首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做。与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行。

比如Vue通过插值表达式实现声明式渲染;功能:向视图输出内容,语法{{常量|变量|表达式|函数}}。

2. vue指令

Vue提供的以v-打头的标签属性, 控制指令所属的标签(行为/外观),Vue的指令分为内置指令和自定义指令: Vue.directive

2.1 vue.js常用内置指令

1.内容指令:

v-text: 即innerText ; v-html:即innerHTML ; 用v-cloak:解决插值表达式的延迟加载

Vue.JS快速上手(指令和实例方法)

 2.属性指令:

v-bind: 给元素属性绑定动态值;用法: v-bind:DOM属性=常量|变量|表达式|函数

Vue.JS快速上手(指令和实例方法)

3.样式指令:

行内样式:

Vue.JS快速上手(指令和实例方法)

类样式:

Vue.JS快速上手(指令和实例方法)

 4.事件绑定指令

基本语法 : v-on:事件名=”表达式|方法名|方法名(参数)”

事件参数

<!-- 无括号, 自动向方法传递事件参数event -->

<!-- 有括号无实参, 不会向方法传递任何参数 -->

<!-- 推荐$event参数放在所在参数之后 -->

事件修饰符

1.控制事件行为(作用)

2.常用的事件修饰符

prevent: 阻止默认事件

stop: 阻止冒泡

self: 只当事件在该元素本身触发时触发回调

once: 事件只触发一次

Vue.JS快速上手(指令和实例方法)

3.自定义修饰符

Vue.config.keyCodes.键名 = ascii码;

Vue.JS快速上手(指令和实例方法)

Vue.JS快速上手(指令和实例方法)

 5.结构指令

v-if与v-show

Vue.JS快速上手(指令和实例方法)

v-for指令

Vue.JS快速上手(指令和实例方法)

 6.双向绑定指令

单向绑定:

M –> V : 插值表达式|属性绑定

V -> M: 事件参数

双向绑定:

M <-> V: v-model

Vue.JS快速上手(指令和实例方法)

2.2 directives(自定义指令)

指令: 标签的自定属性,以v-开头,控制指令所在标签外观/行为

类型:内置指令和自定义

自定义指令:

 Vue.JS快速上手(指令和实例方法)

Vue.JS快速上手(指令和实例方法)

3. Vue.js 实例选项

1.el

提供一个在页面上已存在DOM 元素作为 Vue 实例的挂载目标(绑定目录)。可以是 CSS 选择器,也可以是一个 HTMLElement 实例 , el实现vue实例(Model)与视图绑定(MV)

Vue.JS快速上手(指令和实例方法)

2.data

Vue 实例的数据对象, 数对象中的成员可以在视图中直接访问, 这里数据支持响应式 , 如果在vue实例成员(mthods/computed....)中访问需要通过this, data可以存储任意类型的值

 3.methods

Vue实例方法,可以被视图直接访问或通过事件来调用.

Vue.JS快速上手(指令和实例方法)

 4.computed

计算属性, 对vue实例的data属性再次封装, 相比方法的实现,性能会更好.

Vue.JS快速上手(指令和实例方法)

Vue.JS快速上手(指令和实例方法)

 5.watch

监听vue实例属性的变化. 用法:

Vue.JS快速上手(指令和实例方法)

【注】

监听的是属性,如果属性为基本类型,直接可以监听,但如果监听是对象类型,需要特殊处理

当对对象重新赋值,才会触发监听器, 对象的成员发生变化,并不会触发watch

若要监听对象的成员,需要通过对象名.成员名进行监听

1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

直接监听对象--代码如下:

Vue.JS快速上手(指令和实例方法)

监听对象下某个属性--代码如下:

Vue.JS快速上手(指令和实例方法)

2.利用computed配合watch实现单个属性的深度监听;代码如下:
Vue.JS快速上手(指令和实例方法)

 6.filter

即过滤器,通过管道号|调用 的格式化输出的方法,用法如下:

Vue.JS快速上手(指令和实例方法)

Vue.JS快速上手(指令和实例方法)

4.mixin(混入)

什么是mixin: 封装了组件可以复用的实例选项(data, methods,computed,watch),实现方法:

Vue.JS快速上手(指令和实例方法)

Vue.JS快速上手(指令和实例方法)

Vue.JS快速上手(指令和实例方法)