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