‘壹’ vue.js和jquery的区别
一、主体不同
1、vue.js:是一套用于构建用户界面的渐进式JavaScript框架。
2、jquery:是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库。
二、特点不同
1、vue.js:Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
2、jquery:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
三、优势不同
1、vue.js:目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2、jquery:提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。
‘贰’ 什么是vue框架
什么是vue
是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层
vue的兼容性
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
vue学习资源
vue.js中文官网:http://cn.vuejs.org/
vue.js源码:https://github.com/vuejs/vue
vue.js官方工具:https://github.com/vuejs
vue.js官方论坛:forum.vuejs.org
对比其他框架-React
React 和 Vue 有许多相似之处,它们都有使用 Virtual DOM;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统
都有支持native的方案,React的RN,vue的Wee下
都支持SSR服务端渲染
都支持props进行父子组件间的通信
性能方面:React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。
不同之处就是:
数据绑定方面,vue实现了数据的双向数据绑定,react数据流动是单向的
virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理(如果要操作直接this.xxx)
组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件
对比其他框架-angular
在性能方面,这两个框架都非常的快,我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话,你可以参考这个第三方跑分。单就这个跑分来看,Vue 似乎比 Angular 要更快一些。
在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。
灵活性:Vue 相比于 Angular 更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范,但也有开发者喜欢更灵活自由的方式。
vue.js的核心特点—响应的数据绑定
传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html元素的数据,就的使用js代码获取元素然后在处理业务逻辑
响应式数据绑定的方式操作页面,可以直接使用像下面代码那样的写法就可以将数据填充到页面中
<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
vue.js的核心特点—可组合的视图组件
一个页面映射为组件树。划分组件可维护、可重用、可测试,也就是一个页面由多个组件组合而成
vue中实现组件引入示例
第一步:import导入需要引入的组件文件;
第二步:注册组件;
第三步:在需要引入组件的文件中加上组件标签(这个标签的标签名就是注册的组件名字,多个单词的和这里有xx-xx的形式)
需要注意的是:组件可以嵌套引入,也就是说组件可以引入其他组件
首先创建一个组件,用于被引入的组件,组件名字叫Hello.vue
————————————————
版权声明:本文为CSDN博主“胡椒粉0121”的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
‘叁’ uniapp和vue有什么区别
vue和uni-app的区别如下:
1、uni-app可以通过打包实现一套代码多端运行,而vue不行。
2、uni-app有自动的框架预载,加载页面的速度更快,vue没有。
3、uniapp使用小程序的标签,vue使用web端的标签。
4、uni不支持vue-router,使用自带的路由。
uni-app的优点
优点一:
uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,网络小程序等。
优点二:
uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一样。
优点三:
uni-app使用HBX进行开发,HBX对于vue语法等支持可以说是比较完备了。
‘肆’ 47道基础的VueJS面试题(附答案)
1、什么是MVVM框架?它适用于哪些场景?
MVVM框架是一个 Model-View-View Model框架,其中 ViewModel连接模型Model)和视图(View)。
在数据操作比较多的场景中,MVVM框架更合适,有助于通过操作数据渲染页面。
2、active- class是哪个组件的属性?
它是 vue-router模块的 router-link组件的属性。
3、如何定义Vue- router的动态路由?
在静态路由名称前面添加冒号,例如,设置id动态路由参数,为路由对象的path属性设置/:id。
4、如何获取传过来的动态参数?
在组件中,使用$router对象的 params.id,即 $route.params.id 。
5、vue- router有哪几种导航钩子?
有3种。
第一种是全局导航钩子:router.beforeEach(to,from,next)。作用是跳转前进行判断拦截。
第二种是组件内的钩子。
第三种是单独路由独享组件。
6、mint-ui是什么?如何使用?
它是基于 Vue.js的前端组件库。用npm安装,然后通过 import导入样式和JavaScript代码。vue.use(mintUi)用于实现全局引入, import {Toast} from ' mint-ui'用于在单个组件局部引入。
7、V-model是什么?有什么作用?
v- model是 Vue. js中的一条指令,可以实现数据的双向绑定。
8、Vue.js中标签如何绑定事件?
绑定事件有两种方式。
第一种,通过v-on指令, 。
第二种,通过@语法糖, input@ click= doLog()/>。
9、vuex是什么?如何使用?在哪种功能场景中使用它?
vuex是针对 Vue. js框架实现的状态管理系统。
为了使用vuex,要引入 store,并注入Vue.js组件中,在组件内部即可通过$ ostore访问 store对象。
使用场景包括:在单页应用中,用于组件之间的通信,例如音乐播放、登录状态管理、加入购物车等。
10、如何实现自定义指令?它有哪些钩子函数?还有哪些钩子函数参数?
自定义指令包括以下两种。
它有如下钩子函数。
钩子函数的参数如下。
11、至少说出vue.js中的4种指令和它们的用法。
相关指令及其用法如下。
12、Vue-router是什么?它有哪些组件?
它是 Vue. js的路由插件。组件包括 router-link和 router-vIew。
13、导航钩子有哪些?它们有哪些参数?
导航钩子又称导航守卫,又分为全局钩子、单个路由独享钧子和组件级钧子。
全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
单个路由独享钩子有 beforeEnter。
组件级钩子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它们有以下参数。
14、Vue.js的双向数据绑定原理是什么?
具体步骤如下。
(1)对需要观察的数据对象进行递归遍历,包括子属性对象的属性,设置set和get特性方法。当给这个对象的某个值赋值时,会触发绑定的set特性方法,于是就能监听到数据变化。
(4)MVVM是数据绑定的入口,整合了 Observer、 Compile和 Watcher三者,通过Observer来监听自己的 model数据变化,通过 Compile来解析编译模板指令,最终利用Watcher搭起 Observer和 Compile之间的通信桥梁,达到数据变化通知视图更新的效果。利用视图交互,变化更新数据 model变更的双向绑定效果。
15、请详细说明你对Vue.js生命周期的理解。
总共分为8个阶段,分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
当使用组件的kep- alive功能时,增加以下两个周期。
Vue2.5.0版本新增了一个周期钩子:ErrorCaptured,当捕获一个来自子孙组件的错误时调用。
16、请描述封装Vue组件的作用过程。
组件可以提升整个项目的开发效率,能够把页面抽象成多个相对独立的模块,解决了传统项目开发中效率低、难维护、复用性等问题。
使用Vue.extend方法创建一个组件,使用Vue.component方法注册组件。子组件需要数据,可以在 props中接收数据。而子组件修改妤数据后,若想把数据传递给父组件,可以采用emit方法。
17、你是怎样认识vuex的?
vuex可以理解为一种开发模式或框架。它是对 Vue. js框架数据层面的扩展。通过状态(数据源)集中管理驱动组件的变化。应用的状态集中放在 store中。改变状态的方式是提交 mutations,这是个同步的事务。异步逻辑应该封装在 action中。
18、Vue- loader是什么?它的用途有哪些?
它是解析.vue文件的一个加载器,可以将 template/js/style转换成 JavaScript模块。
用途是通过 vue-loader, JavaScript可以写 EMAScript 6语法, style样式可以应用scss或less, template可以添加jade语法等。
19、请说出vue.cli项目的src目录中每个文件夹和文件的用法。
assets文件夹存放静态资源;components存放组件;router定义路由相关的配置;view是视图;app. vue是一个应用主组件;main.js是入口文件。
20、在Vue.cli中怎样使用自定义组件?在使用过程中你遇到过哪些问题?
具体步骤如下。
(1)在 components目录中新建组件文件,脚本一定要导出暴露的接口。
(2)导入需要用到的页面(组件)。
(3)将导入的组件注入uejs的子组件的 components属性中。
(4)在 template的视图中使用自定义组件。
21、谈谈你对vue.js的 template编译的理解。
简而言之,就是首先转化成AST( Abstract Syntax Tree,抽象语法树),即将源代码语法结构抽象成树状表现形式,然后通过 render函数进行渲染,并返回VNode( Vue. js的虚拟DOM节点)。
详细步骤如下。
(1)通过 compile编译器把 template编译成AST, compile是 create Compiler的返回值, createCompiler用来创建编译器。另外, compile还负责合并 option。
(2)AST会经过 generate(将AST转化成 render funtion字符串的过程)得到 render函数, render的返回值是 VNode, VNode是 Vue.Js的虚拟DOM节点,里面有标签名子节点、文本等。
22、说一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通过数据驱动的, Vue. js实例化对象将DOM和数据进行绑定,一旦绑定,和数据将保持同步,每当数据发生变化,DOM也会随着变化。
ViewModel是Vue.js的核心,它是 Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化,这个HTML元素可以是body,也可以是某个CSS选择器所指代的元素。
DOM Listeners和 Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层中的DOM元素,当发生变化时,Model层的数据随之变化。Data Bindings会监听 Model层的数据,当数据发生变化时,View层的DOM元素也随之变化。
23、v-show指令和v-if指令的区别是什么?
v-show与v-if都是条件渲染指令。不同的是,无论v-show的值为true或 false,元素都会存在于HTML页面中;而只有当v-if的值为true时,元素才会存在于HTML页面中。v-show指令是通过修改元素的 style属性值实现的。
24、如何让CSS只在当前组件中起作用?
在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用,只需要在Style标签添加Scoped属性,即 。
25、如何创建vue.js组件?
在vue.js中,组件要先注册,然后才能使用。具体代码如下
26、如何实现路由嵌套?如何进行页面跳转?
路由嵌套会将其他组件渲染到该组件内,而不是使整个页面跳转到 router-view定义组件渲染的位置。要进行页面跳转,就要将页面渲染到根组件内,可做如下配置。
首先,实例化根组件,在根组件中定义组件渲染容器。然后,挂载路由,当切换路由时,将会切换整个页面。
27、ref属性有什么作用?
有时候,为了在组件内部可以直接访问组件内部的一些元素,可以定义该属性此时可以在组件内部通过this. $refs属性,更快捷地访问设置ref属性的元素。这是一个原生的DOM元素,要使用原生 DOM API操作它们,例如以下代码。
注意:在Ve2.0中,ref属性替代了1.0版本中v-el指令的功能。
28、Vue. js是什么?
Vue. js的目标是通过尽可能简单的API实现响应式的数据绑定的组件开发。
29、描述vue.js的一些特性。
Vue.js有以下持性。
(1)MVVM模式。
数据模型( Model)发生改变,视图(View)监听到变化,也同步改变;视图(View)发生改变,数据模型( Model)监听到改变,也同步改变。
使用MVVM模式有几大好处。
(2)组件化开发
(3)指令系统
(4)Vue2.0开始支持虚拟DOM。
但在Vue1.0中,操作的是真实DOM元素而不是虚拟DOM,虚拟DOM可以提升页面的渲染性能。
30、描述vue.js的特点。
Vue. js有以下特点。
31、在vue.js中如何绑定事件?
通过在v-on后跟事件名称=“事件回调函数( )”的语法绑定事件。事件回调函数的参数集合( )可有可无。如果存在参数集合( ),事件回调函数的参数需要主动传递,使用事件对象要传递 $event。当然,此时也可以传递一些其他自定义数据。如果没有参数集合,此时事件回调函数有一个默认参数,就是事件对象。事件回调函数要定义在组件的 methods属性中,作用域是 Vue. js实例化对象,因此在方法中,可以通过this使用 Vue. js中的数据以及方法,也可以通过@语法糖快速绑定事件,如@事件名称=“事件回调函数( )”。
32、请说明 组件的作用。
当 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive>是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。
当在 内切换组件时,它的 activated和 deactivated这两个生命周期钧子函数将会执行。
33、axios是什么?如何使用它?
axios是在vue2.0中用来替换 vue-resource.js插件的一个模块,是一个请求后台的模。
用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Mole规范,通过 import关键字将 axios导入,并添加到 Vue. js类的原型中。这样每个组件(包括vue.js实例化对象)都将继承该方法对象。它定义了get、post等方法,可以发送get或者post请求。在then方法中注册成功后的回调函数,通过箭头函数的作用域特征,可以直接访问组件实例化对象,存储返回的数据。
34、在 axios中,当调用 axios.post('api/user')时进行的是什么操作?
当调用post方法表示在发送post异步请求。
35、sass是什么?如何在ue中安装和使用?
sass是一种CSS预编译语言安装和使用步骤如下。
(1)用npm安装加载程序( sass-loader、 css-loader等加载程序)。
(2)在 webpack. config. js中配置sass加载程序。
(3)在组件的 style标签中加上lang属性,例如lang="scss"。
36、如何在 Vue. js中循环插入图片?
对“src”属性插值将导致404请求错误。应使用 v-bind:src格式代替。
代码如下:
‘伍’ VueX(Vue状态管理模式)
VueX 是适用于在 Vue 项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步 data 中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此, Vue 为这些被多个组件频繁使用的值提供了一个统一管理的工具—— VueX 。在具有 VueX 的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。
由于 VueX 是在学习 VueCli 后进行的,所以在下文出现的项目的目录请参照 VueCli 2.x 构建的目录。
以下步骤的前提是你已经完成了Vue项目构建,并且已转至该项目的文件目录下。
打开main.js
例如在App.vue中,我们要将state中定义的name拿来在h1标签中显示
或者要在组件方法中使用
注意,请不要在此处更改 state 中的状态的值,后文中将会说明
在Vue项目开发中,需要监控项目中得各种值,为了提高效率,Vue提供了一款浏览器扩展——VueDevtools。
在学习VueX时,更为需要使用该插件。关于该插件的使用可以移步官网,在此不再赘叙。
在VueX对象中,其实不止有 state ,还有用来操作 state 中数据的方法集,以及当我们需要对 state 中的数据需要加工的方法集等等成员。
成员列表:
首先, Vue 组件如果调用某个 VueX 的方法过程中需要向后端请求时或者说出现异步操作时,需要 dispatch VueX中 actions 的方法,以保证数据的同步。可以说, action 的存在就是为了让 mutations 中的方法能在异步操作中起作用。
如果没有异步操作,那么我们就可以直接在组件内提交状态中的 Mutations 中自己编写的方法来达成对 state 成员的操作。注意, 1.3.3节 中有提到,不建议在组件中直接对 state 中的成员进行操作,这是因为直接修改(例如: this.$store.state.name = 'hello' )的话不能被 VueDevtools 所监控到。
最后被修改后的state成员会被渲染到组件的原位置当中去。
mutations 是操作 state 数据的方法的集合,比如对该数据的修改、增加、删除等等。
mutations 方法都有默认的形参:
( [state] [,payload] )
例如,我们编写一个方法,当被执行时,能把下例中的name值修改为 "jack" ,我们只需要这样做
index.js
而在组件中,我们需要这样去调用这个 mutation ——例如在App.vue的某个 method 中:
在实际生产过程中,会遇到需要在提交某个 mutation 时需要携带一些参数给方法使用。
单个值提交时:
当需要多参提交时,推荐把他们放在一个对象中来提交:
接收挂载的参数:
另一种提交方式
为了配合Vue的响应式数据,我们在Mutations的方法中,应当使用Vue提供的方法来进行操作。如果使用 delete 或者 xx.xx = xx 的形式去删或增,则Vue不能对数据进行实时响应。
可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数
例如
组件中调用
由于直接在 mutation 方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交 mutation 方法。
Actions 中的方法有两个默认参数
例如,我们在两秒中后执行 2.2.2 节中的 edit 方法
由于 setTimeout 是异步操作,所以需要使用 actions
在组件中调用:
改进:
由于是异步操作,所以我们可以为我们的异步操作封装为一个 Promise 对象
当项目庞大,状态非常多时,可以采用模块化管理模式。Vuex 允许我们将 store 分割成 模块(mole) 。每个模块拥有自己的 state、mutation、action、getter 、甚至是嵌套子模块——从上至下进行同样方式的分割。
组件内调用模块a的状态:
而提交或者 dispatch 某个方法和以前一样,会自动执行所有模块内的对应 type 的方法:
如果把整个 store 都放在 index.js 中是不合理的,所以需要拆分。比较合适的目录格式如下:
对应的内容存放在对应的文件中,和以前一样,在 index.js 中存放并导出 store 。 state 中的数据尽量放在 index.js 中。而 moles 中的 Astore 局部模块状态如果多的话也可以进行细分。
‘陆’ uni-app使用Vue.js
说明 :uni-app基于 Vue 2.0 实现,开发者需注意Vue 1.0 -> 2.0 的使用差异,详见 从 Vue 1.x 迁移 。
uni-app不仅支持应用生命周期和页面生命周期,还支持 vue 实例的如下生命周期函数:
注意 :不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的。
几乎全支持 Vue官方文档:模板语法 ,下面讲下不支持的情况。
(1)不支持纯HTML
uni-app的非H5端里所有的 BOM/DOM 都不能用,也就是说 v-html 指令不能用,可以使用 rich-text组件 代替。或者使用三方组件wxparse,在hello uni-app中有示例。
(2)不支持部分复杂的 JavaScript 渲染表达式
非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === > < [] .,剩下的还待完善。
(3)不支持过滤器
编译到 App 和小程序平台时不支持使用过滤器,可以使用计算属性(computed)提前计算出数据(如果是数组类型,就提前计算整个数组),用以代替过滤器。
备注 : 自HBuilderX 1.7.1起,在微信小程序平台支持使用过滤器。
data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。
注意 :在微信小程序端,uni-app 将数据绑定功能委托给Vue,开发者需按Vue 2.0的写法实现数据绑定,不支持微信小程序的数据绑定写法,故如下写法不支持:
需修改为:
支持 Vue官方文档:计算属性 。
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考: uni-app全局变量的几种实现方式 。
非H5端不支持在 template 内使用 methods 中的函数。
备注 : 自HBuilderX 1.7.1起,在微信小程序平台支持支持在 template 内使用 methods 中的函数。
为节约性能,我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。
全支持 Vue官方文档:条件渲染 。
全支持vue列表渲染 Vue官方文档:列表渲染 。只是需要注意一点,嵌套列表渲染,必须指定不同的索引!需要填写 :key="xx" 。
注意 :同级多个 v-for 时 key 的值是不允许重复的,key 的绑定是不支持表达式的,需要按照以下方式处理。
几乎全支持 Vue官方文档:事件处理器 。事件映射表如下所示:
注意 :
(1)事件映射表中没有的原生事件也可以使用,例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。
(2)为兼容各端,事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的bind 和 catch 进行事件绑定。
(3)事件修饰符
(4)若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。
(5)按键修饰符:uni-app运行在手机端,没有键盘事件,所以不支持按键修饰符。
支持 Vue官方文档:表单控件绑定 。建议开发过程中直接使用 uni-app:表单组件 。用法示例:
(1)H5 的select 标签用 picker 组件进行代替
(2)表单元素 radio 用 radio-group 组件进行代替
组件是整个 Vue.js 中最复杂的部分,支持 Vue官方文档:组件 。有且只能使用单文件组件(.vue 组件)的形式进行支持。其他的诸如:动态组件,自定义 render ,和 <script type="text/x-template"> 字符串模版等非H5端都不支持。详细的非H5端不支持列表:
(1)暂不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例:<card class="class-name"> </card> 样式是不会生效的)。
Slot(scoped 暂时还没做支持)
(2)动态组件
(3)异步组件
(4)inline-template
(5)X-Templates
(6)keep-alive
(7)transition
(8)class
(9)style
(10)组件里使用 slot 嵌套的其他组件时不支持 v-for
uni-app提供了丰富的 UI组件 ,比如: picker , map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName" 。如:
uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。 注意 :Vue.component 的第一个参数必须是静态的字符串。示例:
(1)main.js 里进行全局注册
(2)index.vue 里可直接使用组件
在 uni-app 中以下这些作为保留关键字,不可作为组件名。
备注 :除以上列表中的名称外,标准的 HTML 及 SVG 标签名也不能作为组件名。
(1) 如何获取上个页面传递的数据
在 onLoad 里得到,onLoad 的参数是其他页面打开当前页面所传递的数据。
(2) 如何设置全局的数据和全局的方法
uni-app内置了 vuex ,在app里的使用,可参考 hello-uniapp 的 store/index.js 。
(3)如何捕获 app 的 onError
由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:
(4)组件属性设置不生效解决办法
当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。解决办法有两种(以scroll-view组件为例):
备注 :第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
‘柒’ 在App.vue或者main.js中如何获取组件实例
const vm = new Vue()
vm就是实例
如果需要引入其他外部vue文件的组件,并且拿到其实例的话
app.vue
constapp={
data(){
return{}
},
methods:{}
}
exportdefaultapp
然后在主文件中
importgetvuefrom'./app.vue'
console.log(getvue)//这个就是拿到的其他组件中的实例
‘捌’ vue中的app.js是怎么来的
MV*包括MVC、MVP、MVVM
MVVM框架由Model、View、ViewModel构
Model指数据前端应JavaScript象
View指视图前端应DOM
ViewModel观察ModelView变化做更新实现数据双向绑定
前端MVVM框架主要包括:angularJS、reactJS、VueJS
‘玖’ Vue项目启动过程以及配置
我们点击 npm run dev 的时候,这就是启动 Vue 工程项目,那么它启动过程是什么样的呢? Vue 项目启动过程,本文简要介绍。
在执行 npm run dev 的时候,会在当前目录中寻找 package.json 文件,包含项目的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到, 启动 npm run dev 命令后,会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容,其中就包括 config 目录下服务器环境的配置文件。
可以看到,在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置,默认启动端口是 8080 ,这里可以进行修改。
index.html 的内容很简单,主要是提供一个 div 给 vue 挂载。
main.js 中, 引入了 vue 、 App 和 router 模块, 创建了一个 Vue 对象,并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下, 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容,放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到,这个页面的内容由一个 logo 和一个待放置内容的 router-view , router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ,我们发现这里配置了一个路由, 在访问路径 / 的时候, 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以,页面关系组成是 index.html 包含 App.vue,App.vue 包含 HelloWorld.vue 。
到这,我们开始安装 router 、 vuex 。
Ctrl+C 退出启动,继续执行 vue-cli ,脚手架安装插件 router 和 vuex 开始。
输入一个大写Y,按下Enter
vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分:
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下,在命令行输入下面命令,然后,安装 vuex 。
② vuex 的关系图
③ 开始使用,在 mian.js 中,引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中,引入 vuex 并且使用 vuex ,这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来,在main.js中引入store
到这里算是,以及完成了。
我们再重新看一下此时的项目结构,多了router.js和store.js,其它相关的文件也被修改
‘拾’ vue.js开发的app怎么上传数据
安卓市场上传app:首先要保证能正常运行;其次应用信息描述要准确,不得包括链 接 ;软件截图不得少于3张,其中一张作展示应用运行中的画面安卓市场开发者上传APP可以到酷传上传,上传更快,并且完全免费!