Vue基础

 

1、内容渲染指令

1.v-text指令：覆盖元素内部原有的内容。

2.{{}}插值表达式：是内容的占位符，不会覆盖原有内容。

3.v-html指令：吧带有标签的字符串，渲染成真正的HTML内容。

2、属性绑定指令

{{}} 插值表达式，只能用于元素的内容结点中，不能用在元素的属性结点中！

可以使用v-bind: 指令，为元素的属性动态绑定值；（简写是英文的：）

在使用v-bind期间，如果绑定内容需要进行动态拼接，则字符串外面应该包裹单引号

例如：<div :titile:" 'box' + index "> 这是一个div</div>

3、事件绑定指令

v-on:click="a" 简写 @click="a"

当a不传参的时候，a(e){} 方法实现中默认可以获取一个e对象，代表该事件，e.target 表示当前结点

当a有参数时，vue提供了内置变量$event，他就是原生DOM事件对象e

<button @click="a(1,$event)">+1</button>   ----------->      a(n, e){}

4、双向绑定指令

v-model=""

5、条件渲染指令

v-if ：动态移除/创建元素

v-show ：用display:none 控制显示

6、列表渲染指令

v-for="(item. index) in list" :key="item.id" 

key 的值为 字符串或者数字类型，推荐数字类型，即以id作为key，不能重复

可以在子元素和自身上使用列表内容

 7.生命周期（特别重要！！）

beforeCreate -> 没有props data method，啥也没，没啥用

created -> 有props data method，可以打印或者调用，获取不到页面dom节点，用处比较大

beforeMounted -> 还是获取不到页面dom，没啥用

mounted -> 可以获取到页面dom并且渲染，用处超级大

beforeUpdate -> 页面数据更新，data发生变化，但是还没渲染到页面dom上，没啥用

updated -> 页面数据更新，data发生变化，页面dom也更新，有点用

8.$ref 和 $el

ref用在普通元素上，this.$ref.(ref值) 能获取到dom元素

ref用在组件上，this.$ref.(ref值)  获取到组件实例，能使用该组件所有方法

使用for循环多个ref -> <v-for :data="xx" :index="index" :ref="name+index" >

想要获取一个组件componentA的DOM元素offsetA

使用this.$ref.componentA.offsetA无法获取，应使用使用this.$ref.componentA.$el.offsetA

9.this.$nextTick(()->{})

意为在数据修改，dom发生变化并且重新渲染后，调用这个方法里面的内容

10.watch监听函数

监听某一个变量是否发生变化，以 data 中的 something: 1 为例

普通监听：watch: {"something"(newValue,oldValue){}}　　//其中参数位置固定，前一个为新值，后一个为旧值

深度监听：watch: {"something": {handle(newValue,oldValue){},deeo:true}}　　//深度监听，返回的是对象

10.组件传值（重要！！！）

父传子:通过props

子传父:$emit()传

爷传子/子传爷：参考大佬 https://blog.csdn.net/ZYS10000/article/details/116017711 

11.更新对象属性页面未更新

可以使用$set方法，语法：Vue.$set(target, data, '1234') 

 示例：this.$set(this.form, 'userName', 'zhangsan')，就是做了form对象赋予userName=zhangsan的事情，页面就能刷新啦。

 12.CSS样式

用el-dialog时，不能直接用class自定义样式，需要在全局CSS中定义样式，然后用custom-class=""，来赋予样式

看了一些文章，好像说是dialog是编译后产生的，所以写在组件下的<style>中无效

 

坑

1、运算符 - ->  ==  

false、0、''、“” 彼此相等，同理可得，true、1、‘1’彼此相等，undefined、null彼此相等

PS：== 运算逻辑是：先判断类型是否相等，相等则进行===比较；若不相等则进行类型转换后，再进行比较。

　　===是代码严格相同，即类型不同直接返回false。

 2、Vue2 - v-for

场景：

<div v-for="item in workOrderFlowList">
{{item.id}}
</div>

使用时报错： property or method "item" is not defined on the instance but referenced during render.

解决方法：将div标签改为template