vue的基础知识

概述

Vue 是一套用于构建用户界面的渐进式框架

框架与库的区别

1.就像vue 官网介绍的一样，vue是一个框架，那么前端框架和我们以前了解的jquery库之间有什么区别么？
2.目前框架有哪些？库有哪些?

区别

1.库（插件）：是一种封装好的特定方法集合，对项目的侵入性较小，提供给开发者使用，控制权在使用者手中，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求
2.框架：是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目

种类

1.目前的流行前端框架Angular Vue React
2.流行的一些库jquery ，Zepto

作者

尤雨溪

官网

vue官网

Vue作为前端框架的特点

1.简单，上手方便
2.结合Angular指令与react组件四维
3.生态丰富（插件多）API文档完善

Vue 的方法

基本格式

<div id="app">
			<h1>Vue</h1>
			<p>{{msg}}</p>
			<p v-html="msg2"></p>
</div>
<script type="text/javascript">
			new Vue({
				//指定模板标签
				el:"#app",
				//指定数据
				data:{
					msg:"你好vue！",
					msg2:"<strong>河南</strong>是个好地方!"
					}
			})
	</script>

Vue 的计算

<div id="app">
			<!-- v-on事件指令：click事件参数 -->
			<button v-on:click="num++" type="button">{{num}}</button>
			<!-- @click 是v-on：click的简写 -->
			<button @click="num+=5" type="button">{{num}}</button>
</div>
<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				num:1,
			},
			methods:{
				say(n){
					// alert("一只路过的鸽子");
					// this当前new Vue出来的实例
					this.num+=n;
				}
			}
		})
	</script>

监听

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

watch:{
"num":{
handler(nval,oval){},
deep:true
}}

自定义指令

bind绑定执行一次
insert插入执行一次
update每更新执行一次

directives:{
"v-focus":{
update(el,binding){
if(binding.value){el.focus()}
}}
}

过滤-管道

用来格式化数据

使用

1.{{num|fix}}
2.{{num|fix(2)}}
3.v-text="num|fix"

filters:{
fix(value,age){
return value.toFixed(age)
}
}
//保留小数点两位

指令

指令值可以使最简单的JavaScript命令

文本渲染指令

{{}}、v-text、v-html（渲染html文本）

属性绑定

v-bind:属性="指令值"
简写：:属性="值"

条件渲染

v-show css方式隐藏
v-if、v-else-if、v-else

频繁切换用v-show
一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点

列表渲染

v-for="item in list"
//list 要遍历的数组
//item 当前遍历的项目

v-for="(item.index) in list"
//index 当前遍历项的索引从0开始

使用v-for 务必

v-bind:key=""
:key="值"

值必须是唯一

添加key属性可以优化v-for的渲染让vue更好识别当前渲染的节点，特别是排序，过滤等操作的时候 不建议key的值使用循环的索引

事件命令

v-on:事件类型="响应函数"
v-on:click="say()"

事件的简写

@click="say()"

行内事件响应

@click="num++"

事件修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 只执行一次
@click.stop.once.prevent="num++"

事件的修饰符可以同时写多个

按键修饰符

.up
.down
.left
.right
.delete
.enter
.space
.esc

事件对象

$event

表单绑定指令

让表单的值与数据绑定在一起

v-model

<input type="checkbox">

默认选中值是true
不选中值是false

<input type="checkbox"name="fruit"v-model="list">

如果十多个把选中的值动态添加到list数组中

修饰符

.number 数字
.trim 移除两边空白

类绑定

属性

:class="值"

对象

当对象的属性值为真，该属性作为class绑定

:calss="{'key1':true,'key2':false}"

kye1的值为真，key1会被绑定，key2不会

数组方法

:class="[c1,c2,c3]"

样式绑定

属性名去掉-下个字母大写

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

Vue动画

vue动画在内置组件transition包裹，会自动在动画的进入过程和离开过程添加名

内置组件

transition

name名称
mode：模式
in-out 先进再出
out-in 先出再进
enter-active-class
指定进入类名
leave-avtive-class
指定离开类名

transition-group

动画类

v-enter-active进入过程

v-enter
进入前
v-enter-to
进入后

v-leave-active离开过程

v-leave
离开前
v-leave-to
离开后

创建动画类型

1.动画类6个css创建
2.keyframes关键帧

.fade-enter-active{animate:fadeIn ease 1s}
.fade-leave-active{animate:fadeOut ease 1s}

3.引用第三方动画框

指定进入的class与离开的class

<transition
enter-active-class="slideIn ainmated"
leave-active-class="hinge ainmated">
</<transition>

组件

1.一段可以重复利用的代码段

全局组件

Vue.component("组件名",{template:''})

局部组件

const steper={template:''}

注册组件

new Vue（{
components：{steper}
}）

使用组件

<steper></steper>