数据驱动以及vue功能原生js实现

JavaScript05

数据驱动以及vue功能原生js实现,第1张

把界面要变化的部分，抽取到动态数据中，通过数据变化，自动更新视图

react: 新建.js文件， 书写class，render

vue： 新建.vue文件， 书写template

react: state = { a: xxx, b : xxx }

vue: data(){

return {

a: xxx,

b: xxx

}

}

react: this.setState({状态名: 新的值})  (基于MVC，需要让setState通知更新)

vue: this.状态名 = 新的值    (基于MVVM会触发set通知watch更新)

当key相同时，且元素类型相同，会进行最小粒度更新，而key不同的时候，新旧虚拟dom对比，react||vue会认为是不同的两个元素，会直接进行替换。

使用数组的map方法，将每一个结构return出去

例：typeList.map(item=>{

          return <Button getBtn={getBtn} type={item.type} key={item.id}>{item.name}</Button>

       })

v-modal是表单控件的双向绑定指令，将表单控件的value值交给状态管理，在表单控件上绑定change事件，当表单控件的value值改变，立即触发change方法，在change方法中通过拿到事件对象改变value的状态并通知视图更新，便实现了双向绑定的原理！

因为函数的作用域是独立的，防止data中的数据被同一种组件的不同实例所影响。

在Vue.js中使用jquery插件需要利用 ProvidePlugin导入jquery全局库。 1、在build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可