洞察如何利用智能座舱系统架构提升车联效率和用户体验
668
2022-12-20
本文目录一览:
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻辑,Vue框架能够提高开发的效率。
科普时刻 :
黑马程序员vue前端基础教程-4个小时带你快速入门vue
前端开发利器vue,微信小程序快速开发实战
web前端基础必备教程-2小时玩转Vue单元测试
黑马程序员Vue2.0+Vue3.0入门到精通,大厂前端岗位必备技能
1、Vue.js是什么?
Vue是一个js库,且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层,非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。
Vue.是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2、Vue的MVVM设计模式是什么?
如果了解前端一定知道MVVM和MVC这两种设计模式,且很有可能对mvp也有一些了解。MVC即model,view,control,jQuery就是采用的这种设计模式。MVVM即model,view,viewmodel,是数据驱动模式,即所有的一切通过操作数据来进行而尽量避免操作DOM树。
不关注DOM结构,考虑数据该如何储存,用户的操作在view通过viewmodel进行数据处理,分情况是否通过ajax与model层进行交互,再返回到view层,在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作,而是专心于对用户的操作进行处理,避免MVC中control层过厚的问题。
在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目,在console控制台选择vue面板。在Devtools对象中,可以选择组件,查看对应组件内的数据信息。也可以选择Vuex选项,查看该项目内Vuex的状况变量信息。
3、Vue.js有哪些优点?
声明式,响应式的数据绑定;组件化的开发;Virtual DOM;响应式的数据绑定
(1)jQuery首先获取到DOM对象,然后对DOM对象进行进行值的修改等操作;
(2)Vue首先把值和js对象进行绑定,然后修改js对象值,Vue框架会自动把DOM的值就行更新;
(3)简单理解为Vue帮我们做了DOM操作,以后用Vue就需要修改对象的值和做好元素和对象的绑定,Vue框架会自动做好DOM相关操作;
(4)DOM元素跟随JS对象值的变化而变化叫做单向数据绑定,若JS对象的值也跟随着DOM元素。
4、需要学习哪些Vue.js框架相关知识点?
Vue.js 安装、Vue.js 目录结构、Vue.js 起步、Vue.js 模板语法、Vue.js 条件语句、Vue.js 循环语句、Vue.js 计算属性、Vue.js 监听属性、Vue.js 样式绑定、Vue.js 事件处理器、Vue.js 表单、Vue.js 组件、Vue.js 组件自定义事件、Vue.js 自定义指令、Vue.js 路由、Vue.js 过渡 动画、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 响应接口、Vue.js 实例等。
Vue.js 是一个JavaScriptMVVM库,一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的,采取自底向上增量开辟的设计。比拟于Angular.js,Vue.js供给了加倍简洁、更易于懂得的API,使得我们快速地上手并应用Vue.js。
本小节小程序开发教程vue技术我们介绍 Vue 中如何进行事件处理。在章节 2.2 中我们已经介绍了指令 v-on 小程序开发教程vue技术,本章节我们将详细介绍在 v-on 小程序开发教程vue技术的一些用法。包括如何传递参数、如何使用事件修饰符等。其中,事件修饰符是本章节的难点。事件修饰符很多,同学们不需要一下子都记住,只要学会如何使用它,在开发过程中如果有所遗忘,可以通过翻看文档来使用。
使用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
实例演示
"运行案例" 可查看在线运行效果
代码解释: 在 html 第 3 行,我们使用 v-on 指令给 button 元素绑定来一个 click 事件,并在点击的时候执行 count + 1 的操作。
在上面的例子中,我们把事件处理函数直接写在模板中,然而许多事件处理的逻辑都很复杂,所以直接把JS代码写在 v-on 指令中有时并不可行,v-on 指令可以接收一个定义的方法来调用。示例如下:
实例演示
"运行案例" 可查看在线运行效果
代码解释: 在 html 第 3 行,我们使用 v-on 指令给 button 元素绑定来一个 click 事件,并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行,我们定义了方法 add小程序开发教程vue技术;触发该方法时给 count + 1。
有时候我们需要在事件触发的时候传递一些参数,
实例演示
"运行案例" 可查看在线运行效果
代码解释: 在 html 第 3 行,我们使用 v-on 指令给 button 元素绑定了一个 click 事件,并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行,我们定义了方法 add;触发该方法时给 count + 1。
有时我们需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:
实例演示
"运行案例" 可查看在线运行效果
代码解释: 在上述 JS 代码第 9-12 行,我们定义了事件函数 setCount。 在按钮点击事件中,我们将 $event 对象传递给函数,因此,在函数 setCount 中可以访问到原生事件对象。
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。
Vue 提供了以下事件修饰符:
接下来,我们用一个完整的示例来看下这些修饰符的使用方法。
实例演示
"运行案例" 可查看在线运行效果
代码解释: 代码第 4-7 行,stop 案例中,当我们给按钮 click 事件添加 .stop 修饰符之后,点击按钮,事件不会向上传递。 代码第 10-16 行,submit.prevent 案例中,当给 submit 事件添加 .prevent 修饰符之后,提交事件不再重载页面。 代码第 19-21 行,capture 案例中,我们给父容器添加了 capture 事件,当点击按钮的时候,会先触发 capture 中的事件函数,然后再触发按钮绑定的点击事件。 代码第 24-26 行,self 案例中,我们给父容器的点击事件添加了 .self 的修饰符,所以只有点击父容器的时候才会触发该方法,当点击按钮的时候并不会触发父容器绑定的事件。 代码第 29-31 行,once 案例中,我们给按钮的点击事件添加了 .once 的修饰符,所以只有首次点击按钮的时候会触发事件函数,再次点击之后将不会触发事件函数。
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的-。
注意:在 Mac 系统键盘上,meta 对应 command 键 ( )。在 Windows 系统键盘 meta 对应 Windows 徽标键 ( )。在 Sun 操作系统键盘上,meta 对应实心宝石键 ( )。在其小程序开发教程vue技术他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。
例如:
Vue提供了.exact修饰符,实现单独的系统按键的事件。
例如:
本节,我们带大家学习了事件处理。主要知识点有以下几点:
本小节我们会介绍数据管理工具 vuex 。包括什么是 Vuex、Vuex 的安装、以及如何创建和使用 Vuex 数据仓库。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
让我们从一个简单的 Vue 计数应用开始:
实例演示
"运行案例" 可查看在线运行效果
这个状态自管理应用包含以下几个部分:
以下是一个表示 “单向数据流” 理念的简单示意:
但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。
因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的 “视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护。
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行衡量。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此 —— 如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
我们可以在官网 (vuex) 上直接- vuex 。 在 Vue 之后引入 vuex 会进行自动安装:
在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:
当使用全局 script 标签引用 Vuex 时,不需要以上安装过程。
每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
实例演示
"运行案例" 可查看在线运行效果
代码解释 在 JS 代码第 4-8 行,通过 new Vuex.Store ({…}) 创建数据仓库。 在 JS 代码第 12 行,我们可以通过 store.state.count 访问仓库中定义的数据。
本节,我们带大家学习了 vuex 的基本概念。主要知识点有以下几点:
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~