Vue初识

Vue

v-model

双向绑定。
是vue中唯一一个双向绑定的，其他都不是。

v-text

一般与input使用

v-html

可以解析带标签的信息

v-bind

关联绑定数据名称
v-bind:titile="tip"
与属性无关
简写形式，冒号(:)

v-on

一般是进行事件处理的
v-on:click="函数名"
一般放入methods{函数名()){}}
简写形式，@click @=v-on:

v-if

v-show

v-for

遍历(数组，对象)
{(item,index) in 数组名}
{(value,key,index) in 数组名}

v-privateComponent

私有组件
封装的一部分内容，完全封装的一个个体，一个文件

components：{
"组件名1:{
template:''
},
组件名2{}"
}
=> <组件名1></组件名1>

组件名就是标签名(建议全小写)
写在对象里面的
template：必须加个包围

Vue.component

全局对象
Vue.component('组件名，(组件名可以用-连接)',{})
可以嵌套组件
组件标签内一般不写东西

privateFilter

filters{
//实现一个小写过滤器
toLower(input){
return input.to LowerCase()
}
}

写在对象里面的

Vue.filter

Vue.filter('组件名，(组件名可以用-连接)',{})

route

new-Vuerouter({
router:[
{name,path,component}
]
})

router-link
对a标签的封装
to相当于href

router-view
router展示坑

props
默认接收id值得，固定写法

created()
当前组件全部加载完后调用的方法
this 当前组件
$route 路由(路径)
params.id 参数

get

this.$http.get(url).then( function(response){
}, function(err){
} )

post

this.$http.post(url,{content:'xxx'},{emulateJSON:true}).then( function(response){
}, function(err){
} )

jsonp

this.$http.jsonp(url).then( function(response){
}, function(err){
} )

Vue声明周期

初始化Vue对象
执行beforeCreate事件钩子
监控data数据变化
vue内部初始化事件

执行created事件钩子
已完成监控data数据变化
已完成vue内部初始化事件

这时候会内部判断有没有el
如果没有就会找$mount方法
如果有就执行template
如果有template就会直接渲染
如果没有template但是有el就会获取outHTML作为模板

执行beforeMount挂载钩子
注意，此时还没有生成html到页面

用编译好的html内容，代替el原来页面中的html标签等
执行Mounted事件钩子
这时候html页面渲染完成
mounted只执行一次

Mounted实时监控数据变化
beforeUpdate 更新前的事件钩子
Update 更新后的事件钩子

beforDestroy 实例销毁前执行的钩子
在这一步，实例仍然完全可用

Destroyed 实例销毁后
vue实例所有东西会解绑
所有事件监听会被移除
子实例也会被销毁
Destroyed钩子在服务器渲染期间不会被调用

beforecreate:可以在这加个loading事件，在加载实例时触发

create:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted:挂载元素，获取到DOM节点, 在这发起后端请求，拿回数据，配合路由钩子做一些事情
updated:如果对数据统一处理，在这里写上相应函数
beforeDestroy:可以做一个确认停止事件的确认框

destoryed:当前组件已被删除，清空相关内容

props 用于接收来自父组件的数据

computed 计算属性,getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
methods 可以用来装方法
这里面用箭头函数会有this指向问题

components 实例可用的组件
filters 实例可用的过滤器
directives 实例可用的指令
mixins 接受一个混合对象的数组，按照传入顺序依次调用，并在调用组件自身的钩子之前被调用
extends 允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)