关于vue标签的笔记

v-once通常用message单项绑定（可以这样理解），只显示初始message的值

v-html 可以使这个标签变成点击跳转、

 

v-cloak当vue载入时会去除这个标签，所以没有载入的时候配合display进行隐藏

关于v-on的修饰符

关于V-for 的遍历使用

 

关于数组响应式的写法

sort

reverse反转

 

 

可以动态的使那几个标签变色

 

 

 

js中的高阶函数的使用

filter   map  reduce

const nums =[10,20,30,40,50,100]

let newNum = nums.filter(function(n){

return n<40 (当判断为true的时候，内容将会加入到新的数组)

})

let newNums = newNum.map(function(n){

return n*2

})

newNums.reduce(function(preValue,n){

return 100

},0)

//第一次 : preValue 0 n 10

//第二次 : preValue 100 n 20

//第三次 : preValue 100 n 30

let total =nums,filter(n => n<100).map((n => n*2).reduce((pre,n) => pre+n)

 

v-model 用来双向绑定，实现表单提交

配合单选框进行绑定，有label的话，点击文字也能选中

设置了sex为女的话，初始化的时候就是选中的女单选框

v-model.lazy在失去焦点或者敲回车的时候进行绑定

 

组件的案例

 

写在里面就是局部组件

在别的id里面就无法使用

 

关于父组件传递参数给子组件 必须使用v-bind绑定

 

可以指定父组件传入的类型

一。计算属性

1.1计算属性的本质 fullname:{set(),get()}

1.2计算属性和methods对比

计算属性多次使用时。只会调用一次

他是由缓存的

二事件监听

2.1事件监听的基本使用v-on

2.2 参数问题

btnClik 如果没有传参，那么默认传入的时event

btnClik(event)

btnClik(abc,event)如果传入两个参数，有一个参数想要event，那么必须要加上$event

2.3修饰符

stop

prevent

.enter

.once

.native

三条件判断

3.1 v-if/v-else-if/v-e;se

3.2 登陆小案例 ，切换input时里面内容不变，要增加key值实行绑定

3.3v-show(用于常常隐藏或者现实用，因为原理使用display隐藏)和v-If(用来判断是否创建标签)

四循环遍历

4.1遍历数组

4.2循环遍历对象

value

value,key

value,key,index

五v-model的使用

5.1v-model=》v-bind:value + v-on:input

5.2v-model和radio/checkbox/select

5.3修饰符

lazy

number

trim

六组件化开发

全局组件和局部组件

父组件和子组件

6.1数据的存放

子组件不能直接访问父组件

子组件中有自己的data，而且必须是一个函数（如果不是函数他们会互相影响）

6.2父子组件的通信

父传子:props

子传父:$emit

父组件直接访问子组件

第一是使用$children（使用少）

他返回是$一个数组形式，创建几个组件就有几个数组，可以通过.吧属性点出来，但是要通过下标取数据 

第二 使用$refs

例：在组件标签上面加上一个ref="aaa"

就可以this.$refs.aaa.name就可以了

子组件直接访问父组件

直接$parent.上一级父组件的属性就行（$parent.name）

$root时直接访问根目录，用法也是直接.

 

组件中为了解耦，提高复用性，有slot（插口）标签，可以替换自己想要的标签