[JavaScript知识库]Vue的概念

一、vue的基本概念

? Vue，读音是/vju:/，是一套用于构建用户界面的渐进式框架，自底层向上应用，Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，可以做复杂的单页应用。简单的说，vue是一套前端的开发框架，vue是目前三大主流的框架之一，其他两个框架是:React、Angular。

vue操作

1. 让指令链接 数据与dom
2. 业务操作数据，实现自动更新dom

二、前端三大基本框架

vue

react

angular

三、特点

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

渐进式javascript框架

四、优点

1. 中文文档完毕
2. 生态丰富（插件多）
3. 上手简单
4. 指令，组件，虚拟dom

五、导入与实例化

1、模板

	<!-- 模板 -->
		<div id="app">
			<h1>{{msg}}</h1>
			<input type="text" v-model="msg"><!-- 指令 -->
		</div>

		<script src="js/vue.min.js"></script>
		<script>
			new Vue({
				el: "#app", //指定模板返回（element）
				data: { //数据
					msg: '你好Vue！'
				}, //指定数据
			})
			//el与data都是固定写法
			//Vue的数据通过指令与模板产生联系
		</script>

2、指令与模板

特点

1. 就是v开头的特殊属性 它的值预期为javascript单行表达式
2. 可以渲染实例的值? ? v-text="msg"
3. 数学运算??v-text="2+3"
4. 使用js表达式??v-text="msg.length"
5. 如果是文本需要加单引号? ?v-text=" '我爱中国，'+msg"

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

3、vue的实例

1. var vm=new Vue（{....}）
2. vm就是 new Vue创建的实例

4、文本渲染指令

1. v-text? 文本渲染指令
2. v-html? Html文本渲染指令

5、条件渲染指令

1. v-if
2. v-else
3. v-else-if
4. v-show

• ? ? ? ? ?隐藏元素以css的方式
• ? ? ? ? ?频繁切换用v-if
• ? ? ? ? 少量切换用v-if

v-if与v-show的区别（面试题）

1. 都是用来控制显示与隐藏
2. v-if是通过dom操作来实现隐藏，v-show通过css方式隐藏
3. 频繁切换v-show反之v-if

6、遍历指令? ?v-for

1. 字符串，数字，列表，对象进行遍历
2. <p v-for="item in list" v-key="item">{{index+1}}{{item}}</p>
3. item 遍历的元素（自定义的名称）
4. index 遍历的下标（键名）
5. list 被遍历的数据

7、属性绑定

1. v-bind:title=“msg”
2. 属性绑定简写形式??：title=“msg”
3. ：class：id：disabled（不可选中状态）

8、事件

1. 事件指令? v-on：click=“num++”
2. 事件绑定简写??@click=“num++”
3. 事件的参数

• ? ? ? ? ?默认传入事件对象? @click=“sayNum”
• ? ? ? ? ?传入实参3? @click=“sayNum（3）”
• ? ? ? ? ?传入事件对象，和参数3? ?@click=“sayNum（$event）”

? ? ?4.事件修饰符

1. .stop阻止事件冒泡
2. .prevent阻止默认事件
3. .once只响应一次

? ? ?5.按键修饰符? keydown? keyup

1. .enter 回车
2. .up上
3. .down 下
4. .space 空格
5. .esc 取消
6. .del 删除

? ? ?6.系统修饰符

? ? ?.ctrl? ?.shift

? ? ?7.鼠标修饰符

? ? ?.left? ?.right? ? .middle

六、表单

v-model=“num”? ??把num的数据和表单的值绑定在一起

1. ：value=“num”
2. @input=“num=$event.target.value"

1、多行

1. 1个默认值
2. 选中为true
3. 未选中为false
4. 多个值，绑定数组动态添加/移除当前元素的value值

2、表单修饰符

1. ? .lazy
   ? change 事件触发数据更新
2. ? .number
   ? 强制转换为数字

七、watch 监听

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

模板

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

八、class

1. 文本? ?:class="active"? ?没有加单引号的active是一个变量不是字符串
2. 对象 :class="{'active':flag}"
3. 数组? :class="list"

九、style

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

css 属性驼峰式写法

十、前景回顾

1、数组

1. indexOf（） 查找对应下标
2. 删除? ? shift头删? ?pop尾删? ?splice 中间删
3. 添加? ? unshift 头加? push尾加? splice也可以添加
4. 反转? ? reverse
5. 转字符串? join()
6. 连接数组? concat()
7. filter 过滤
8. forEach 遍历
9. map 映射
10. reduce? 累计
11. some 有一个
12. every 每一个
13. find 查找符合条件的元素
14. findIndex 查找符合条件的元素下标
15. sort 排序

2、字符串

1. indexOf 查询字符串下标，找不到返回-1
2. split("") 分割为数组
3. slice(start,end)切割字符串
4. subString(start,end)截取字符串（按下标end）
5. subStr（start，len）截取字符串（按长度len）

3、json

1. eval（)字符串当js对象
2. JSON.parse(str)? json 字符串转换为js对象
3. JSON.stringify(obj)? ?把对象转换为json字符串

4、本地存储? localStorage

1. getItem(key)? 获取值
2. setItem(key,value) 存储值
3. removeItem(key) 删除存储
4. clear()? 清空

十一、vue选项

1. el? 模板
2. data 数据
3. methods 方法
4. filters 过滤
5. directives 指令
6. watch 监听
7. computed? 计算

十二、自定义指令

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

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

<input v-focus="true">

1. undate, 更新就执行
2. bind 绑定一次
3. inserted? 插入

十三、过滤、管道

{{3.1415926|fix}}? ? {{3.1415926|fix(4)}}

filter:{
   fix(val,len=2){
        return NUmber(val).toFixed(len)
     }
 }

val 是过滤前的值；return过滤后的值；len fix 过滤的参数

十四、组件

1、作用

1. 组件是vue的一个重要的特点
2. 实现多人协作开发
3. 通过组件划分降低开发的难度
4. 实现复用，降低重复劳动

2、组件解释??

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

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

3、定义与使用

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

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

在父组件中注册 components：{{steper:stepter}}

在组件的模板中使用<steper> </stepter>

4、传参

父传子 ：

父<modal:visible="visible">
子

props:{

visible:{type:Boolean,default:false}

}

子使用

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

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

父 监听事件，修改值

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

5、插槽

插槽：组件的嵌套内容

???????父

<modal>
    <input type="text"/>
    <button>确定</button>
</modal>

子组件 模板中使用

template：`<div><slot></slot></div>`