Vue思维导图目录
MVC
与MVVM
的区别Vue
基本代码结构Vue
指令Vue
组件class
和style
动态绑定computed
计算属性EventBus
filter
过滤器方法Vue
是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue
有配套的第三方类库,可以整合起来做大型项目的开发)
MVC
是后端的分层开发概念;MVVM
是前端视图层的概念,主要关注于 视图层分离。MVVM
把前端的视图层分为了三部分:Model
,View
,VM ViewModel
const vm = new Vue({
el:'#app',//所有的挂载元素会被 Vue 生成的 DOM 替换
data:{ // this->window },
methods:{ // this->vm},
//注意,不应该使用箭头函数来定义 method 函数 ,this将不再指向vm实例
props:{} ,// 可以是数组或对象类型,用于接收来自父组件的数据
//对象允许配置高级选项,如类型检测、自定义验证和设置默认值
watch:{ // this->vm},
computed:{},
render(){},
// 声明周期钩子函数
})
当一个Vue
实例被创建时,它将data
对象中的所有的property
加入到Vue
的响应式系统中。当这些property
的值发生改变时,视图将会产生 响应,即匹配更新为新的值。
例外:
Vue
实例外部新增的属性改变时不会更新视图。Object.freeze()
,会阻止修改现有的property
,响应系统无法追踪其变化。el
属性:vm.$el
,`document.getElemnetById(‘app’)``;data
属性:vm.$data
data
中定义的变量:vm.a
,vm.$data.a
methods
中的方法:vm.方法名()
watch
方法:vm.$watch()
不要在选项property
或回调上使用箭头函数,this
将不会指向Vue
实例 比如created: () => console.log(this.a)
或vm.$watch('a', newValue => this.myMethod())
。
因为箭头函数并没有this
,this
会作为变量一直向上级词法作用域查找,直至找到为止,经常导致Uncaught TypeError: Cannot read property of undefined
或Uncaught TypeError: this.myMethod is not a function
之类的错误。
html
标签作为文本显示。v-text
会覆盖元素中原本的内容。写在开始标签中,以属性的形式存在。会将html
标签作为文本显示。v-html(innerHTML)
会覆盖元素中原本的内容,会将数据解析成html
标签。el
,组件模板定义在template
中;data
是函数,该函数返回的对象作为数据。var com = Vue.extend({
//通过template属性 指定组件要展示的html结构
template:'<h3>这是使用Vue.extend搭建的全局组件</h3>'
})
{
template:'<h3>这是使用Vue.extend搭建的全局组件-com3</h3>'
}
template
标签(写在受控区域外面)创建模板,通过id
建立联系<template id="tmpl"> 写在受控区域外面
......
</template>
{ template:'#tmpl' }
dom
元素/组件:标签上添加ref
属性,this.$refs.ref
属性值获取该dom元素/组件
。this.$refs.ref
属性值.变量名
获取组件中的数据this.$refs.ref
属性值.方法名()
获取组件中的方法$parent
和 $children
获取 父/子组件的数据和方法this.$parent
获取父组件$children
由于子组件的个数不确定 返回的是一个数组 ,不是对象this.$children[0]
获取第一个子组件编译的作用域:自身的数据在自身模板
template
标签中生效
data=’子组件中的数据’
template
标签,添加slot-scope=’slot’
slot-scope
属性接收子组件中的数据slot.data
template
标签中的html结构替换slot
插槽中的默认html
结构。访问 1024.Cool