网站建设 技术要求,设计平台模式,打车小程序源码,专业建设规划ppt一、初始Vue
1.想让Vue工作#xff0c;就必须创建一个Vue实例#xff0c;且要传入一个配置对象#xff1b; 2.root容器里的代码依然符合html规范#xff0c;只不过混入了一些特殊的Vue语法#xff1b; 3.root容器里的代码被称为【Vue模板】#xff1b; 4.Vue实例和容器是…一、初始Vue
1.想让Vue工作就必须创建一个Vue实例且要传入一个配置对象 2.root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新 Vue.js为什么称为“渐进式”的前端框架因为你可以随着你的学习进度或者应用场景变化使用Vue逐渐来增强原来的HTML、CSS、JS而不是说用Vue就把原来那一套完全就覆盖掉了,因此称为渐进式。对于已有前端基础的学习者来说这是一个灵活且重要的特性 二、Vue模板语法
1.插值语法
功能用于解析标签体内容。 写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。
2.指令语法
功能用于解析标签包括标签属性、标签体内容、绑定事件…。 举例v-bind:href“xxx” 或 简写为 :href“xxx”xxx同样要写js表达式可以直接读取到data中的所有属性。 备注Vue中有很多的指令且形式都是v-???此处我们只是拿v-bind举个例子。
三、数据绑定
Vue中有2种数据绑定的方式 1.单向绑定(v-bind)数据只能从data流向页面。 2.双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。 备注 1.双向绑定一般都应用在表单类元素上如input、select等 2.v-model:value 可以简写为 v-model因为v-model默认收集的就是value值。
四、el和data的两种写法
1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例随后再通过vm.$mount(‘#root’)指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择目前哪种写法都可以以后学习到组件时data必须使用函数式否则会报错。 3.一个重要的原则 由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了。
五、Vue模型
虽然没有完全遵循 MVVM 模型但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
六、vm数据代理
1.Vue中的数据代理 通过vm对象来代理data对象中属性的操作读/写 2.Vue中数据代理的好处 更加方便的操作data中的数据 3.基本原理 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性都指定一个getter/setter。 在getter/setter内部去操作读/写data中对应的属性。 当读取data中的属性值时通过对应的getter方法读取当修改属性值时通过setter方法修改并且重新解析vue模板用到此属性值的DOM节点都重新渲染。如下为Vue数据代理原理的一个简单实现
七、事件处理 v-on
事件的基本使用 1.使用v-on:xxx 或 xxx 绑定事件其中xxx是事件名 2.事件的回调需要配置在methods对象中最终会在vm上 3.methods中配置的函数不要用箭头函数否则this就不是vm了 4.methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象 5.click“demo” 和 click“demo($event)” 效果一致但后者可以传参
Vue中的事件修饰符 1.prevent阻止默认事件常用 2.stop阻止事件冒泡常用 3.once事件只触发一次常用 4.capture使用事件的捕获模式 5.self只有event.target是当前操作的元素时才触发事件 6.passive事件的默认行为立即执行无需等待事件回调执行完毕
键盘事件
八、计算属性 computed
当页面元素中需要一个由多个属性计算出的值时可以在vue实例中设置一个计算属性避免在模板中写过于复杂的表达式。 computed内的属性即为计算属性在模板中使用时会直接调用其内部的get函数返回结果并且当函数内用到的变量动态更新时计算属性也会同时更新。
九、监视属性 watch
用于监听属性变化当属性变化时执行回调函数handler
十、绑定样式
绑定class样式 绑定style样式
