标签:VUE

Vue

Vue 条件渲染

logo 16 2022-03-28

条件渲染: 方式一:v-if 写法: (1)、v-if="表达式" (2)、v-else-if="表达式" (3)、v-else="表达式" 适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。 方式二、v-sho ...

详情...
Vue

Vue 绑定样式

logo 15 2022-03-25

绑定样式: 两种形式 1、class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定,要动态获取。 数组写法适用于:要绑定多个样式,个数不确定,名字也不确定。 对象写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 2、st ...

详情...
Vue

Vue 之监视属性

logo 49 2022-03-23

监视属性watch: 监视属性当前在Vue文档中叫做 侦听器,知道是一回事就行。 1、当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2、监视的属性必须存在,才能进行监视!! 3、监视的两种写法: (1)、new Vue 时传入 watch 配置 (2)、通过 vm.$watch 监视 代码 ...

详情...
Vue

Vue 之计算属性

logo 34 2022-03-22

姓名案例 修改姓和名输入框实时更新全名展示 插值语法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_插值语法实现</ti ...

详情...
Vue

Vue 之事件处理

logo 20 2022-03-22

事件的基本使用 1、使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名; 2、事件的回调需要配置在methods对象中,最终会在vm上; 3、methods中配置的函数,不要用箭头函数!否则this就不是vm了; 4、methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例 ...

详情...
Vue

Vue 之数据代理

logo 28 2022-03-22

Object.defineproperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>回顾Object.defineproperty方法 ...

详情...
Vue

Vue 之 MVVM 模型介绍

logo 32 2022-03-22

MVVM模型 M:模型(Model) :data中的数据 V:视图(View) :模板代码 VM:视图模型(ViewModel):Vue实例 观察发现: 1、data中所有的属性,最后都出现在了vm身上。 2、vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。 参考代码 <!DOCTY ...

详情...
Vue

Vue el与data的2种写法

logo 25 2022-03-22

el与data的2种写法 1、el有2种写法 (1)、new Vue时候配置el属性。 (2)、先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。 2、data有2种写法 (1).对象式 (2).函数式 如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。 3 ...

详情...
Vue

Vue 数据绑定

logo 34 2022-03-22

数据绑定 Vue中有2种数据绑定的方式 1、单向绑定(v-bind):数据只能从data流向页面。 2、双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。 备注 1、双向绑定一般都应用在表单类元素上(如:input、select等) 2、v-model:value 可以简写为 v- ...

详情...
Vue

Vue 模板语法

logo 35 2022-03-22

Vue模板语法有2大类 1、插值语法: 功能:用于解析标签体内容。 写法:{\{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。 2、指令语法: 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。 举例:v-bind:href="xxx" 或 简写为 :hr ...

详情...