Vue

一、常用指令

1 插值表达式：{{msg}}
2 v-text：与插值表达式类似，默认没有闪烁问题。
3 v-html：与v-text类似，将内容按照HTML显示。
4 v-cloak：解决插值表达式的闪烁问题。
5 v-on：绑定事件，简写@
6 v-bind：绑定属性，简写：
7 v-model：实现表单数据和Model之间的双向绑定。只有这一个指令为双向绑定。
8 v-for
8.1 可以迭代数组、对象、数字（从1开始）
8.2 必须与key（字符串或数字类型）一起使用，key作为每个循环对象的键，保证每个对象是不同的。
9 v-if和v-show
区别：
v-if:每次都会插入或删除元素。
v-show:为元素加display属性。
10 watch computed methods比较
watch:监听当前vue实例属性值的变化。当刷新页面时属性值不会改变。
computed:计算属性，能够缓存。含有get、set方法，使用双向绑定。
methods:方法。

二、事件修饰符

1 .stop：阻止冒泡（从里到外）。
2 .prevent：阻止默认行为。
3 .capture：按照捕获触发事件的机制（从外到内）。
4 .self：只有点击当前元素时才会触发事件。
5 .once：只触发一次事件处理函数。

三、在Vue中使用样式

1 使用class样式
2 使用内联样式

四、函数

1 过滤器全局过滤器、私有过滤器。
含义：对输入数据处理并返回，可以连用。
定义语法：Vue.filter(过滤器名称，处理函数)

处理函数的第一个参数为被处理的数据。

调用
可用于插值表达式或v-bind。

• 插值表达式：{{数据 | 过滤器名称1(参数,…) | 过滤器名称2(参数,…) |…}}

2 自定义指令全局指令、私有指令。
定义语法：Vue.directive(指令名，{钩子函数})

1 指令名定义时不用加v，调用时才用加。
2 钩子函数的参数见官方文档。
3 钩子函数主要有3个：bind（在页面中调用，需要改变行为的需求使用该方法。比如为输入框的文本上色）、inserted（在内存中调用，只与渲染有关的需要使用该方法。比如获得输入框的焦点。）、update。

调用语法：直接调用。

五、生命周期

1. beforeCreate
2. Created
3. beforeMount
4. Mounted
   • beforeUpdate
   • Updated
5. destoryed

发送请求

方式一：vue-resource

1. get
2. post
3. jsonp

方式二：axios

1. get
2. post

六、组件

1. 模版必须只包含一个根元素。

全局组件

创建三种方法。
方法一

<script>
//1. 创建组件构造函数
const com1=Vue.extend({
template:<h2>this is a global commponent</h2>
});
//2. 注册组件
Vue.component("mycomm1",com1);
<script>
//3. 调用组件
<div><mycomm1></mycomm1></div>

方式二

<script>
//1. 注册组件
Vue.component("mycomm1",{
template:<h2>this is a global commponent</h2>
});
<script>
//3. 调用组件
<div><mycomm1></mycomm1></div>

方式三
普通

<script>
//1. 构建模版
<template id="tml">
<h2>ddddddd</h2>
</template>
//2. 注册组件
Vue.component("mycomm1",{
template:#tml
});
<script>
//3. 调用组件
<div><mycomm1></mycomm1></div>

自定义模版数据

<script>
//1. 构建模版
<template id="tml">
<h2 @click="show">{{msg}}</h2>
</template>
//2. 注册组件
Vue.component("mycomm1",{
template:#tml
data:function(){
	return {msg:"message"}
}
methods:{
	show(){console.log("show function")}
}
});
<script>
//3. 调用组件
<div><mycomm1></mycomm1></div>

私有组件

在某个Vue实例内定义：

var vm=new Vue({
components:{"mycomm1",template:<h2>dddddd</h2>}
})

切换

<div>
<component v-bind:is="组件名"></component> 
</div>

七、路由

步骤

1. 导入路由包。
2. 创建路由需要操作的组件及路由实例。
3. 将路由实例绑定到Vue对象。