Vue语法

Vue

结合了angular的指令与react的组件，虚拟dom

渐进式javascript框架

优点

中文文档完善

生态丰富

上手简单

指令，组件，虚拟dom

导入与实例化

模板

<div id="app">
<h1>{{msg}}</h1>
</div>

引入

<script src="./js/vus.js"></script>

实例化

new Vue({
	el:"#app",
	data:{msg:"你好Vue!"}，
})

文本渲染指令

{

v-text

v-html

条件渲染指令

v-if

v-else

v-else-if

v-show

遍历指令

v-for

字符串，数字，列表，对象进行遍历

<p v-for="(item,index) in list" v-key="item">{{index}}--{{item}}</p>

item 遍历的元素(自定义的名称)

index 遍历的下标(键名)

list 被遍历的数据

v-bind:key

值必须是惟一的

为了让vue更好的优化渲染列表

Vue的实例

var vm=new Vue({...})

vm就是new Vue创建的实例

指令与模板

特点

就是v开头的特殊属性 它的值预期为javascript单行表达式

可以渲染实例的值

数学运算

使用js表达式

如果是文本需要加单引号

指令是联系模板与vue实例的桥梁

属性绑定

v-bind:title="msg"

:title="msg"

属性绑定简写形式

:class :id :disabled

事件绑定

v-on:click="num++"

事件指令

@click="num++"

事件绑定简写

事件的参数

@click="sayNum"

默认传入事件对象

@click="sayNum(3)"

传入实参3

@click="sayNum($event,3)"

传入事件对象事件和实参3

事件修饰符

.stop阻止事件冒泡

.prevent阻止默认事件

.once只响应一次

按键修饰符（keydown keyup）

.enter 回车

.up 上

.down 下

.space 空格

.esc 取消

.del删除

系统修饰符

.ctrl

.shift

...

鼠标修饰符

.left

.right

.middle

表单

v-model="num"

简写

:value="num"

@input="num=$event.target.value"

把num的数据和表单的值绑定在一起

单行，多行

多选

1个默认值

选中为true

未选中为false

多个值，绑定的数组动态添加/移除当前元素的value值

单选

下拉select

表单修饰符

.lazy

change事件触发数据更新

.number

强制转换数字

Vue操作

让指令联接数据与dom

业务操作数据，实现自动更新dom

computed计算

从现有数据计算出新的数据(只读)

computed:{
"total":function(){
return xxx
    }
}

watch监听

监听数据的变化执行回调函数

watch:{
"obj":{
handler(nval){
//执行回调函数
},
deep:true
}
}

class

文本

:class="active"

没有加单引号的active是一个变量不是字符串

对象

:class="{'active':flag}"

数组

:class="list"

style

:style="{color:'red',fontSize:'24px'}"

css属性驼峰式写法

Vue选项

el模板

data 数据

methods 方法

directives 指令

filters 过滤

watch 监听

computed 计算

props 属性

created 创建完毕

组件

作用

1.组件是Vue的一个重要的特点

2.实现多人协作开发

3.通过组件划分降低开发的难度

4.实现复用，降低重复劳动

组件解释

组件就是定义好的一功能模块

建议：多用props，少在组件中使用data(降低组件的耦合性)

定义与使用

1.定义

注意：template有且只有一个根节点

const steper={
template:`<span></span>`
}

2.在父组件中注册

components:{steper:stepter}

3.在组件的模板中使用

<steper></steper>

传参

父传子

父

<model :visible="visible">

子

props:{

​ visible:{

​ type:Boolean,default:false

}

子使用

注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）

this.visible

子传父

子

this.$emit("update:visible",false)

父

监听事件，修改

<model @update:visible="visible=$event">

插槽

插槽：组件的嵌套内容

父

<model>
<input />
<button>确定</button>
</model>

子组件 模块中使用

template:<div><slot></slot></div>

具名插槽

插槽作用域

动画

两个状态形成过渡

进入和离开

v-show、v-if

transition

单个动画元素

属性

name名称

enter-active-class="fadeIn animated"

指定进入class

leave-active-class

指定离开class

产生状态与类

v-enter-active

进入整个状态

v-enter

进入开始状态

v-enter-to

进入结束状态

v-leave-active

v-leave

v-leave-to

transition-group

动画组

属性

tap 用什么标签包裹所有的动画组元素

产生状态与类

通 transition

v-move 正在移动中的元素

自定义指令

作用

操作dom;实例化第三方基于dom的插件

directives:{
"focus":{
update(el,binding){
//el指令所在节点
//binding.value指令的值
  }
 }
}

<input v-focus="true">

update 更新就执行

bind 绑定一次

inserted 插入

被它可爱给打败了

filters 过滤、管道

{{3.1415926|fix}}

{{3.1415926|fix(4)}}

filters:{
fix(val,len=2){
return Number(val).toFixed(len)
}
}

val 是过滤前的值

return 过滤后的值

len fix 过滤器的参数

作用

格式化数据

回顾

数组

查找对应下标

indexOf()

删除

shift 前删除

pop 后删除

splice 中间删

添加

unshift前加

后加

splice也可以添加

翻转

reverse

转字符串

join()

连接数组

concat()

高阶

filter 过滤

forEach 遍历

map映射

reduce 累计

some 有一个

every 每一个

find 查找符合条件元素

findindex 查找符合条件的元素下标

sort 排序

字符串

查询字符串下标

IndexOf

lastIndexOf

找不到返回-1

分割为数组

split("")

切割字符串

slice(start,end)

截取字符串（按下标end）

subString(start,end)

截取字符串（按长度len）

subStr(start,len)

json

字符串当js执行

eval()

json字符串转换为js对象

JSON.parse(str)

js对象转换为json字符串

JSON.stringify(obj)

本地存储locaStorage

获取值

getItem(key)

存储值

setItem(key,value)

删除存储

removeItem(key)

清空

clear()

面试题

v-if与v-show的区别

1.都是用来控制显示和隐藏

2.v-if通过dom操作实现隐藏，v-show通过css方式隐藏

3.频繁切换用v-show反之v-if