1.MV*的简单理解
//MVC框架模式:基于分职责的原则,实现视图,数据,算法的分离。
Model(模型)+View(视图)+controller(控制器)
1.model盛放的就是需要展示的数据和状态变化的数据;
2.view通过controller控制器与Model产生联系;
3.controller是其他两者的协调者;
4.使用场景:用户以控制器来看数据的变化,再更新视图;
//MVVM框架模式:View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。
Model(模型)+View(视图)+ViewModel(监控者)
1.View 是HTML文本的js模板;
2.ViewModel是业务逻辑层(负责监控view和model的变化);
3.Model 数据层 对数据的处理(比如增删改查);
4.vue和angular都属于这种开发模式;
2.vue的特点有哪些
1.MVVM框架:易于实现数据和DOM的双向监控。
2.数据驱动:数据可直接生成或改变DOM,改变会重新渲染。
3.组件化:符合现在对于前端开发的需求,可实现最大化的可维护性。
4.轻量级:vue文件及其依赖的各功能脚本文件都不大。
5.简洁性:清爽的使用数据驱动,避免了很多的DOM操作。
6.高效性:学习成本低,并且已成熟,开发效率高。
3.vue和其他框架的区别
//与angular的区别:
相同点:
都支持内置指令和自定义指令;
都支持内置过滤器和自定义过滤器;
都支持双向数据绑定;
都不支持低端浏览器。
不同点:
学习成本:AngularJS的学习成本高,而Vue.js的API都比较简单、直观。
在性能上:AngularJS依赖对数据的脏检查,Vue数据都是独立触发的,只是观察者的思维。
//与React的区别:
相同点:
编译方式:react采用特殊的JSX语法,Vue.js在组件开发用.vue,两者都需要编译后使用。
中心思想:一切都是组件,组件实例之间可以嵌套。
钩子函数:都提供合理的钩子函数,可以让开发者定制化地去处理需求。
功能脚本:都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。
混入语法:在组件开发中都支持mixins(混入)的特性。
不同点:
React依赖Virtual DOM,而Vue.js使用的是DOM模板。
React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。
4.如何理解vue的渐进式
自由组合,不需要遵守譬如angular等框架的强主张或者React的函数式编程,vue使用比较自由一些,可以把多个
小单元进行合并,并且也提供了不少的指令和修饰,DOM更新自动了,使得编程更可以得心应手。
5.声明&命令式渲染模式有什么区别
命令式渲染:按程序一步步执行(js脚本关于渲染的语句);
声明式渲染:按最终效果,程序来执行;
6.生命周期的整体过程
7.组件相关注意事项
1.组件命名:驼峰命名&串联式命名(直接在DOM中(非字符串模板)引用自定义组件只能用这个,如:home-page-admin2);
2.局部组件,只能在当前使用,其子组件无法使用,要想用也是有办法的:1.重新自定义组件;2.使用import导入组件;
3.全局注册方式必须在(通过 new Vue
创建的)Vue 根实例创建(生命周期中mounted)之前置入组件;
4.props是向下传递,父组件传给子组件,反过来无法传递,且不要试图修改因为会报错;
5.$root(访问根组件)$parent(访问父组件),props就可以不用了,其实不然,如:组件间不用重新渲染,只需传值做逻辑;
6.自定义事件向上传递,子组件传给父组件,命名时推荐使用串联式,当然全部小写也是可以的,切记不要书写提供的事件名称;
7.对于表单的向上,向下传递,有个特殊的存在,那就是model(2.2+以后才有)定义值与自定义事件触发,例:
<div id="app">
<one-checkbox v-model="checkVal"></one-checkbox>
</div>
<script>
Vue.component('one-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: "<input type='checkbox' v-bind:checked='checked' v-on:change="$emit('change', $event.target.checked)"/>"
})
var v=new Vue({
el:"#app",
data:{
checkVal:false
}
})
</script>
8.$refs最好不要乱用,容易出现意想不到的错误,其基本用法如下:
<div id="app">
<one ref="oneInput"></one>
<button @click="foc">获取焦点</button>
</div>
Vue.component("one",{
template:'<input ref="input2"/>'
})
new Vue({
el:"#app",
methods:{
foc:function(){
this.$refs.input2.focus();
}
}
})