内部指令

1、v-if v-else v-show 指令
v-if="isLogin"
2、v-for指令 ：解决模板循环问题 for in

3、v-text & v-html {{}}
v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签输出
4、v-on：绑定事件监听器
v-on:事件类型=“事件处理函数名”
5、v-model指令 双向数据绑定

6、v-bind 指令
绑定标签属性，：后面是标签属性名

生命周期

new Vue({
el:'#app', //实例挂载元素
data:{
message:1
},
beforeCreate:function(){
console.log('1-beforeCreate 创建之前');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted 挂载之后');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
beforeDestroy:function(){
console.log('7-beforeDestroy 销毁之前');
},
destroyed:function(){
console.log('8-destroyed 销毁之后')
}

})

beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

单向绑定
<div id="app">
{{ message }}
</div>

<script>
new Vue({
el: '#app',
data: {
message: '一行白鹭上青天'
}
})
</script>

双向数据绑定
1、使用v-model指令，实现视图和数据的双向绑定。
2、双向数据绑定就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view。
3、修改输入框的值可以影响外面的值
<div id="app">
{{ message }}


<input v-model="message"/>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '一枝红杏出墙来'
}
})
</script>

<template>模板

image.png

Component 组件
组件可以扩展HTML元素，封装可以重复使用的代码
如导航、列表、弹窗、下拉菜单，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除
其实组件就是制作自定义的标签，这些标签在HTML中是没有的。比如：<ma-dongmei></ma-dongmei>
var maDongmei= {
template: '<div>一行白鹭上青天</div>'
}
new Vue({
// ...
components: {
// <ma-dongmei>
maDongmei
}
})
1、新建一个.vue结尾的文件 import 导入
2、components 注册组件
3、<ma-dongmei></ma-dongmei> 组件直接和普通的html标签一样的使用,要小写

三.父子组件通信
父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过自定义事件给父组件发送消息。
1.prop
prop是父组件用来传递数据的一个自定义属性。子组件需要用props选项声明”prop”
父
<ma-dongmei message="hello!"></ma-dongmei>

子
export default {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 也可以在模板中使用
// 也可以在实例中通过 this.message 来使用
template: '<span>{{ message }}</span>'
}
动态 Prop
用v-bind动态绑定props的值到父组件的数据中。当父组件的数据变化时，变化也会传给子组件
把构造器中data的值传递给组件，只要进行绑定就可以
<ma-dongmei :message="msg"></ma-dongmei>

image.png

2.自定义事件
使用 v-on 绑定自定义事件
子组件可以使用 $emit 触发父组件的自定义事件
<ma-dongmei @clickMdm="clickMe" :message="msg"></ma-dongmei>

image.png

image.png