mvc和mvvm其实区别并不大。 都是一种设计思想。 主要就是mvc中controller演变成mvvm中的viewmodel。 mvvm主要解决了mvc中大量的dom 操作使页面渲染性能降低, 加载速度变慢,影响用户体验。 区别: vue数据驱动, 通过数据来显示视图层而不是节点操作。 场景: 数据操作比较多的场景,更加便捷
低耦合。 视图(view)可以独立于model变化和修改, 一个viewmodel可以绑定到不同的"view"上, 当view变化的时候model可以不变, 当model变化的时候view也可以不变。 可重用性。 你可以把一些视图逻辑放在一个viewmodel里面, 让很多view重用这段视图逻辑。 独立开发。 开发人员可以专注于业务逻辑和数据的开发(viewmodel), 设计人员可以专注于页面设计。 可测试。 界面素来是比较难于测试的, 而现在测试可以针对viewmodel来写。
第一步: 在components目录新建你的组件文件(indexpage.vue), script一定要export default {} 第二步: 在需要用的页面(组件)中导入: import indexpage from '@/components/indexpage.vue' 第三步: 注入到vue的子组件的components属性上面,components:{indexpage} 第四步: 在template视图view中使用, 例如有indexpage命名, 使用的时候则index-page
created: 实例已经创建完成之后调用, 在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见 mounted: el被新创建的 vm.$el 替换, 并挂载到实例上去之后调用该钩子。 如果 root 实例挂载了一个文档内元素, 当 mounted 被调用时 vm.$el 也在文档内。 activated: keep-alive组件激活时调用
html代码: <div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }} </div> js代码: var vm=new vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.tostring() return value.charat(0).touppercase() + value.slice(1) } } }) 全局定义过滤器 vue.filter('capitalize', function (value) { if (!value) return '' value = value.tostring() return value.charat(0).touppercase() + value.slice(1) }) 过滤器接收表达式的值 (msg) 作为第一个参数。 capitalize 过滤器将会收到 msg的值作为第一个参数。
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论