Vue项目的一些技巧知识汇总

2020-09-26 23:34 网站建设资讯

 伴随着前端的发展,各类框架、各类插件接踵而来,在这里我介绍下前端三大框架之一的Vue框架,以及基础知识技术总结。

Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。

Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式

    vue.js官网:

  https://cn.vuejs.org

  vue-admin-template:

  https://panjiachen.github.io/vue-element-admin-site/#/

  vue调试:

  chrome插件vue Devtools

  UI 组件库:

  https://github.com/ElemeFE/element

  http://element.eleme.io/#/zh-CN/component/form

  移动UI 组件库:

  mint

  iview

  vonic

  app:

  Weex 是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是 Vue。在此之后,在 Weex 的帮助下,使用 Vue 语法开发的组件不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用。

  vue中less:

  npm安装less-loader插件

  总结:

  vue + vuex+ axios + vue-router + webpack + es6 + less

  安装路由模块

  npm install vue-router --save-dev

  npm install vue-resource --save-dev(http请求)

  json接口

  jsonplaceholder.typicode.com(提供一些常用的接口)

  mock

  https://easy-mock.com/login

  接口访问时url地址要全, post类型时访问看图片

  

Vue

 

  七牛云:

  融合cdn 域名 内容管理

  gif动图七牛云地址:

  http://pbn1z3d57.bkt.clouddn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif

  (我自己的地址,现在不介意用七牛云,原因:现在给的测试域名只有一个月的试用时间!!!所以我改用阿里的,免费还功能强大)

  1234

  阿里云对象存储(图片)

  https://oss.console.aliyun.com/bucket/oss-cn-shenzhen/vue-admin-template/object

  (图像处理-访问管理 在图片url后+‘-logingif’)

  12

  调试工具 vue-devtools

  最简单的:chrome扩展工具应用商店下载,然后

  C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\4.1.5_0

  manifest文件中:“persistent”: false, 改为true

  vue-echarts

  http://npm.taobao.org/package/vue-echarts-v3

  github:https://github.com/xlsdg/vue-echarts-v3-demo

  注意事项:

  空格和注释报错:build-webpack.base.conf.js中:const createLintingRule = () => ({})内容注释饥即可

  接口业务流程:e.g:views/login/index.vue绑定方法---->store/modules/user.js中actions---->api/login.js

  webpack

  执行脚本的命令有点麻烦,因此,我们可以利用 npm,把命令写在 package.json 中:

  "scripts": {

  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

  "start": "npm run dev",

  "build": "node build/build.js",

  "build:report": "npm_config_report=true npm run build",

  "lint": "eslint --ext .js,.vue src",

  "test": "npm run lint",

  "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"

  },

  伴随着前端的发展,各类框架、各类插件接踵而来,在这里我介绍下前端三大框架之一的Vue框架,以及基础知识技术总结。

  Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。

  Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式

  (Model->View->View-Model)

  和一个可组合的组合型组件系统,具有简单的、灵活的API(接口)。

  该框架继承了React的虚拟DOM技术和Angular的双向数据绑定技术,是一款较新的功能性框架。

  在这里介绍下什么是虚拟DOM和双向数据绑定:

  1、虚拟DOM(Virtual DOM),顾名思义,从字面上理解就是虚构的DOM树,当我们用传统的原生API或者jQuery去操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。

  即使计算机硬件一直在更新迭代,但是操作真实DOM的代价仍旧很昂贵,真实的DOM节点,哪怕是一个最简单的div也包含很多属性,所以频繁的操作,会导致页面卡顿,影响用户的体验。

  为了解决这个浏览器性能问题,虚拟DOM(Virtual DOM)就被设计出来了,其核心算法是Diff算法。

  它会将一次操作过程中对真实DOM所有更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,通知浏览器去执行绘制工作,避免了大量的无谓的计算量。

  用js对象模拟DOM节点的好处是:页面的更新可以先全部反应在js对象上,操作内存中的js对象的速度明显要快的多。

  等更新完成后,在将最终的js对象映射成真实的DOM,交由浏览器去绘制。(提高了性能,并且运行速度快)

  2、双向数据绑定,在讲双向数据绑定前,我们要想说下单向数据绑定,单向数据绑定,就是把Model绑定到View上,当我们用Java代码更新Model时,View就会自动更新了(Model-->View)。

  那么双向数据绑定就是,用户更新了View,Model的数据也会自动被更新(Model<-->View)。

  什么情况下用户可以更新View呢?

  举个最直接的例子,填写表单,当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那么就相当于我们把Model和View做了双向数据绑定。

  其原理是我们要对input进行value 的属性绑定(v-bind:value=”...”)

  将Model中的变量绑定到View上(Model->View)

  以及当用户对input进行操作时,进行事件监听(v-on:input=”...”)

  将View上的更新传回Model中(View->Model)

  从而实现双向数据绑定,在Vue中,以上操作过于繁琐,便提供了v-model直接实现双向数据绑定的效果。

  在进行Vue项目开发过程中,我们可以通过标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。

  并且通过new Vue()进行新建一个Vue的实例对象,其下有很多属性,包括el、data、methods、computed、watch等等,el为指向页面的节点元素,data存储数据,数据类型包括simple datatype(简单数据类型)

  以及complex datatype(复杂数据类型)

  用插值表达式{{}}显示,在插值显示的时候,不需要写上data,methods内存储方法,通过fn()的形式调用方法,computed内存储也是方法,但是其为计算数据,复杂逻辑的应该存储在computed中。

  计算属性是基于它们的依赖进行缓存的,由于computed带有一层缓存,所以只有在它的相关依赖发生改变时才会重新运行,而methods则是调用一次生成一次,computed中的方法调用时不需要加()的。

  watch为监听,监控,监听data中的属性值也可以监控对象,存在两个参数(currentValue当前值和prevValue之前值)。

  在Vue中,html的任何属性都不能用{{}}(插值表达式)来进行设置

  要用v-bind:来进行属性绑定,v-bind:可以简写为 :

  当我们需要对事件进行监听的时候需要用v-on:来进行事件绑定,v-on:可以简写为@,v-once单次渲染,v-html渲染html

  在input、select、textarea中我们可以用v-model:进行双向数据绑定,可以用v-for进行数据循环,v-if/v-else-if/v-else进行数据判断

  利用v-show显示与隐藏DOM节点,在Vue中还存在很多修饰符如取消事件冒泡(.stop),回车键(.enter),空格键(.space),取消默认事件(.prevent)等等,可以对DOM设置ref属性进行本地指向,类似于id

  当我们对一个对象进行v-for循环时要对该对象设置key值,起到标识唯一性,便于检测以及提高性能的作用。

  在Vue的实例对象下面还存在很多钩子函数,总体分为三大块(创建、更新、销毁):

  1、创建阶段,存在beforeCreate(){}、created(){}、beforeMount(){}、mounted(){}等钩子函数;

  2、更新阶段,存在beforeUpdate(){}、updated(){}等钩子函数;

  3、销毁阶段,存在beforeDestroy(){}、destroyed(){}等钩子函数;上述钩子函数不包括全部,一个生命周期内存在很多钩子函数,不能一一列举。

  以上就是我对Vue基础知识技术的总结,Vue项目开发部分留待Vue项目开发技术总结。

上一篇:404页面对于网站来说有什么作用呢应该添加吗
下一篇:网站建设是选择定制网站还是模板站好呢

猜你喜欢

手机扫一扫添加微信

余经理15558375523(微信同号)