vue语法简述

vue介绍

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue注意事项

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

构建Vue实例

new Vue{{
el：" "
data:{
}
}}

常见指令directive

*插值指令
{{key}}
v-text
v-html
v-bind
javascript表达式

流程控制指令

条件渲染
v-show
v-if
区别：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
数字循环
对象循环
数组循环
v-if
v-for v-for优先级大于v-if
状态维护key

事件绑定v-on

监听事件

事件处理方法
在methods对象中定义方法

内联处理器中的方法
$event传入方法

事件修饰符
.stop
.prevent
.capture

键盘修饰符
.enter
.tab
.esc
.space

系统修饰符
.ctrl
.alt
.shift
.meta
.exact

双向绑定v-model

文本框绑定
多行文本框绑定
复选框绑定
单选框绑定
下拉选择框绑定
修饰符
.lazy
.number
…trim
自定义指令

生命周期

钩子函数
beforecreate()
created()
beforemount()
mounted()
beforeupdate()
updated()
beforedestory()
destoryed()

倾听器watch

在数据变化时执行异步或开销较大的操作时、可以采用 watch监听响应式数据

监听响应式数据的变化

计算属性computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,

对于任何复杂逻辑，你都应当使用计算属性。

计属性通常会有返回值

过滤器filter

组件component

组件的全局定义
Vue.component(componentName,options)用来定义全局组件
componentName：组件名 是一个字符串
组件的名称 多个单词 推荐使用中划线拼接 用来区分html网页中的标签

	  options：定义组件的内容 结果类似于Vue结构
	 		没有el选项
	 		data：给组件定义响应式数据
	  			组件中的data是一个函数，且函数必须返回一个对象
	  			对象中定义的属性，会自动生成组件中的响应式数据
	  		methods：组件使用的方法
	 		template：用来定义组件的模板（内容），格式是一个字符串
	 			常用反逗号进行定义

组件传值

父向子组件传值
静态
动态

子向父组件传值
在 组件中使用 @eventName 来监听 子组件 向 父组件发送的的数据
$event 代表的 是 子组件 向 父组件 传递的 第一个数据
如果 子组件 向父组件 传递了多个 数据，则 推荐使用 methods 来接收

其他组件间传值
非父子组件数据进行传输， 可以使用 消息总线 bus

动态组件
component 是用来定义动态组件的
动态组件在每次进行 切换的时候， 组件中的内容 会 重新进行渲染

如果想要保持组件的状态 、可以通过 keep-alive 组件 来保持状态

模板
template
render函数

插槽

插槽: 进行内容的分发的
slot: 在模板中,充当一个占位符
在使用组件的时候, 组件的标签体中的内容, 会被 分发到 对应的 插槽中

具名插槽
具名插槽进行内容分发

独占默认插槽
独占默认插槽: 在组件中只有一个插槽,且插槽是默认插槽

**作用域插槽**

**动态插槽名**

边界处理

$root : 访问 Vue 根组件
$parent : 访问 Vue 组件的 父组件实例对象
$refs : 在组件中 使用 ref 定义一个 ID ,然后， 通过 $refs. 获取指定组件的实例对象
$children : 获取 子组件 实例，返回一个 数组

$slots : 获取插槽
$scopedSlots: 获取作用域插槽