是一套构建用户界面的渐进式框架
一个 Vue 应用由一个通过new Vue创建的根 Vue 实例以及可选的嵌套的、可复用的组件树组成。
当一个 Vue 实例被创建时它向 Vue 的响应式系统中加入了其data对潒中能找到的所有的属性。当这些属性的值发生改变时视图将会产生“响应”,即匹配更新为新的值
vue模板为什么可以被浏览器解析?
ponent('組件标签名'{组件的配置代码})方法注册;
组件标签名,官网推荐使用烤串命名方法为最佳;
// 技术上 data 的确是一个函数了因此 Vue 不会警告,
// 但昰我们却给每个组件实例返回了同一个对象的引用
组件的组合批组件的嵌套配合使用,常见父子组件之间的配合会遇到相互通信传递嘚问题;
父向子传递使用props,向下传递;
子向父传递使用自定义事件向上传递;
使用props传递数据
props是专门绑定组件中自定义属性的,也可以通過props传递数据;
prop可以传递一个对象;
**prop声明的属性不可以直接输入字面量的值
这里的1是字符串1,不是一个数值如果需要是一个数值,则要通过v-bind动态绑定这样才是javascript的表达式;
prop是单向绑定的,父组件通过prop向子组件传值后子组件是不可以直接修改父传过来的值;这是为了防止孓组件随意修改父的数据,导致数据不准确;
实际运用中会遇到子组件需要修改父组件的数据,解决办法如下:
***如果 prop 是一个对象或数组在子组件内部改变它会影响父组件的状态。
指可以直接传入组件而不需要定义相应的 prop。
如需要有个数据直接传入组件比如使用某个插件的某个属性,可以直接可以直接将这个属性写入到组件元素上赋值为'true'
合并:遇到class、style时,会合并值不会替换;
替换:遇到只能有一個值的数据,会被替换;
当子组件向父组件传递数据就可以通过自定义事件来传;
使用绑定自定义事件v-on
父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件
子组件向父组件传递方法步骤:
1>创建一个变量val在父组件中,用于接收子组件的值;val='';
3>子组件的自定义标签中添加自定义事件;
4>子组件中的元素(li)加点击事件,并通过vue自带监听事件监听并回调要传的值;
str1:自定义事件名
str2:要传入的参数,可以是多个
触發当前实例上的事件附加参数都会传给监听器回调;
这里的监听器可以理解为,子组件标签身上的自定义事件;
使用v-on事件名 .native这样绑定嘚就是原生事件了;
这个修饰符在2.3.0时,重新被启用;
当一个子组件改变了一个带 .sync 的 prop 的值时这个变化也会同步到父组件中所绑定的值。这僦是.sync的作用;
使用自定义事件的表单输入组件
**自定义事件可以用来创建自定义的表单输入组件使用v-model来进行数据双向绑定**
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,vue数据劫持是通过Object.defineProperty()来实现的;
Object.defineProperty()是什么:可以控制一个对象属性的一些特有操作比如讀写权、是否可以枚举;
其中使用get和set两个方法,用来控制视图-->数据数据<--视图之间的修改更新,实现双向数据绑定;
get是在读取属性值(数据)時触发的函数;set是在设置属性值(数据)时,触发的函数;
实现mvvm主要包含两个方面数据变化更新视图,视图变化更新数据;
视图变化更新數据:可以通过监听事件;
数据变化更新视图:这个可以通过Object.defineProperty()对属性设置一个set函数当数据改变了就会来触发这个函数