VUE知识体系
- 数据
- data：类型：Object|function；在组件中只能接受函数也就是 data () {……}
- props：数组或者对象，用于接收来自父组件传的数据
- computed：计算属性，结果会被缓存，会加入到Vue中
- methods：方法
- DOM
- el ：Vue 实例挂载目标，挂载之后可以通过$el访问
- template：字符串模版，被使用后会代替挂载元素
- render：字符串模版的替代方案
- 实例属性
- vm.$data：数据对象
- vm.$props：组件接收到的props对象
- vm.$el：实例使用的根DOM元素
- vm.$slots：访问被插槽分发的内容
- vm.refs：引向子组件
- is特性：添加一个字符串模版
- API
- Vue.extend(options):创建一个构造器
- Vue.set(target, key,calue):设置对象的属性
- Vue.directive(id,[definition]):注册或获取全局指令
- Vue.filter(id,[definition]):注册或获取全局过滤器
- Vue.component(id,[definiton]):注册或获取全局组件，注册还会自动使用给定的id设置组件名称
- 生命周期钩子(函数)
- beforeCreate：实例初始化之后
- created：实例创建完成之后被调用
- beforeMount：在挂载开始之前被调用
- mounted：el被新创建的vm.$el替换，挂载到实例上
- beforeUpdate：数据更新前调用
- updated：数据更新后调用
- beforeDestory：实例销毁前调用
- destoryed：实例销毁后调用
- 指令
- v-if
- v-for
- v-on（简写@）
- v-bind（简写：）
- v-moudel
- v-show
一个简单的vue实例
new Vue() -----> 设置数据data -----> 挂载元素 ----- > 成功渲染
代码：
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>自定义指令</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<p v-tack class='p'>
I will now be tacked noto the page
<input v-focus type='text'>
<input v-border type='text'>
</p>
</body>
<script type="text/javascript" src='js/vue.min.js'></script>
<script type="text/javascript">
// 自定义全局指令
Vue.directive('border',{
bind(el){
el.style.border='1px red solid'
}
})
new Vue({
el:'.p',
//自定义局部指令
directives:{
tack:{
inserted(el){
el.style.color='red'
}
},
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
})
</script>
</html>
vue组件
Vue.component('myarticl',{
props:[],
template:'',
render:function(){},
data:function(){},
computed:{},
components:{},
methods:{}
watch:{},
mounted:{},
filters:{}
})
vue实例
new Vue({
//实例挂载目标
el:'#app',
//设置数据对象
data:{
},
//计算属性
computed:{
},
//方法
methods:{
}
//监听 观察
watch:{
},
//生命周期钩子函数
mounted:{
},
//自定义局部组件
directives:{
},
//局部注册组件
components:{
}
//过滤器
fillters:{
}
})
