vue的使用
1.生命周期和生命周期应用
2.create：data 和 methods初始化完毕，此时可以使用methods 中的方法和data 中的数据 （一般在created阶段处理http请求获取数据或者对data）
3.beforeMount：template模版已经编译好，但还未挂载到页面，此时页面还是上一个状态
4.mounted：此时Vue实例初始化完成了，DOM挂载完毕，可以直接操作dom或者使用第三方dom库 （mounted阶段操作dom，比如使用jquery，或者其他第三方dom库。）
5.beforeUpdate： 此时data已更新，但还未同步页面
6.updated：data和页面都已经更新完成
7.beforeDestory：Vue实例进入销毁阶段，但所有的 data 和 methods ， 指令， 过滤器等都处于可用状态
8.destroyed： 此时组件已经被销毁，data，methods等都不可用
2.vue常用的指令
1.v-bind 用于响应式地更新 HTML属性 缩写：
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
2.v-on 用于监听 DOM 事件
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
3.v-if 根据表达式的值的真假来决定是否插入/移除元素
4.v-show 用于决定是否展示该元素，底层通过display：none实现
5.v-html 在dom内插入html内容
6.v-for 循环
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
{{item.value}}
</div>
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。
7.v-text 渲染指定dom的内容文本
8.v-cloak 和CSS规则如 [v-cloak] { display: none } 一起用，可以隐藏未编译的 Mustache 标签直到实例准备完毕, 例子
3.vue常用修饰符及作用
事件修饰符
- .stop 阻止事件冒泡
- .prevent 阻止事件默认行为
- .self 事件绑定的元素本身触发时才触发回调
- .once 事件只能触发一次，第二次就不会触发了
- .native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件 具体使用
表单修饰符
- .lazy 在输入框输入完内容，光标离开时才更新视图
- .trim 过滤首尾空格
- .number 如果先输入数字，那它就会限制你输入的只能是数字;如果先输入字符串，那就相当于没有加.number
4.组件之间，父子组件之间的通信方案
父组件如何将数据传到子组件中
父组件可以通过Prop传递数据到子组件中，单向绑定
// 父组件 index.vue
<template>
<div class="content">
<child :lists="lists"></child>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data() {
return {
lists: []
};
},
mounted() {
this.lists = [{
name: '01',
content: 'hi,'
}, {
name: '02',
content: 'my name is Ellyliang'
}];
}
};
</script>
// 子组件 child.vue
<template>
<ul class="content">
<li v-for="(list, index) in getLists" :key="index" v-html="list.name + list.content"></li>
</ul>
</template>
<script>
export default {
props: ['lists'],
data() {
return {
getLists: this.lists
};
},
mounted() {
this.getLists.push({
name: '03',
content: '不要在乎内容，我就是测试'
});
}
};
</script>
子组件如何将数据传到父组件中
子组件可通过vm.$emit 将数据传递给父组件
vm.$emit 是啥 触发当前实例上的事件。附加参数都会传给监听器回调链接
// 父组件 index.vue
<template>
<div class="content">
<child :lists="lists" @listenToChild="getChildMsg"></child>
<!--@后面“istenToChild”是监听器于子组件相关，里面包含参数注入在"getChildMsg"-->
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data() {
return {
lists: []
};
},
mounted() {
this.lists = [{
name: '01',
content: 'hi,'
}, {
name: '02',
content: 'my name is Ellyliang'
}];
},
methods: {
getChildMsg(val) {
alert(val); // 'hello'
}
}
};
</script>
// 子组件 child.vue
<template>
<div class="content">
<ul class="lists">
<li v-for="(list, index) in getLists" :key="index" v-html="list.name + list.content"></li>
</ul>
</div>
</template>
<script>
export default {
props: ['lists'],
data() {
return {
getLists: this.lists
};
},
mounted() {
this.getLists.push({
name: '03',
content: '不要在乎内容，我就是测试'
});
setTimeout(() => {
this.$emit('listenToChild', 'hello');
}, 15000);
}
};
</script>
子组件给父组件传数据是不是也很方便。实现方法是就是在子组件中$emit数据，然后在父组件中通过事件@事件名接收值。
Event Bus（bus总线）
事件巴士这种方法，不仅能处理父子组件传递，子父组件传递，还是处理平级组件之间的数值传递。其实现方法就是在全局new一个vue实例，然后传值给bus, 就是let bus = new vue();。通过这个全局的bus中的emit,$on等等去实现数据的传递。这样处理有个问题，由于event bus处理数据传递很方便，不管在哪里都可以传递，这样导致滥用，从而导致代码很难去理解。
Event Bus实现
let bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected', 1);
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
});
具体组件的封装和使用，可参考链接
5.vue实现按需加载组件
组件的按需加载是项目性能优化的一个环节，也可以降低首屏渲染时间
1.用() => import()， 具体代码如下
<template>
<div>
<ComponentA />
<ComponentB />
</div>
</template>
<script>
const ComponentA = () => import('./ComponentA')
const ComponentB = () => import('./ComponentB')
export default {
// ...
components: {
ComponentA,
ComponentB
},
// ...
}
</script>
2.使用resolve => require(['./ComponentA'], resolve)，使用方法如下：
<template>
<div>
<ComponentA />
</div>
</template>
<script>
const ComponentA = resolve => require(['./ComponentA'], resolve)
export default {
// ...
components: {
ComponentA
},
// ...
}
</script>
