前端框架——Vue小驿站（1）

时间  2021-08-14 标签 css html 前端 vue node webpack web vue-router vuex vue-cli

在这里插入图片描述

 

在这里插入图片描述

  • Vue.js是一款轻量级的以数据驱动的前端JS MVVM框架
  • 提供了一种帮助咱们快速构建并开发前端项目的新的思惟模式
  • 构建用户界面的渐进式框架
  • 只关注视图层， 采用自底向上增量开发的设计
  • 尽量简单的 API 实现响应的数据绑定和组合的视图组件
    在这里插入图片描述
  • 其和jQuery最大的不一样点在于jQuery经过操做DOM来改变页面的显示，
  • 而Vue经过操做数据来实现页面的更新与展现

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

Vue数据驱动的概念模型

在这里插入图片描述

  • Vue.js主要负责的是上图绿色正方体ViewModel的部分
  • 其在View层（即DOM层）与Model层（即JS逻辑层）之间
  • 经过ViewModel绑定了DOM Listeners与Data Bingings两个至关于监听器的东西
  • 当View层的视图发生改变时，Vue会经过DOM Listeners来监听并改变Model层的数据
  • 当Model层的数据发生改变时，其也会经过Data Bingings来监听并改变View层的展现
  • 实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在

一个html文件中 直接能够经过script标签引入Vue.jscss

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  • 能够在页面里写Vue.js代码
  • 经过new Vue()构建了一个Vue的实例
  • 实例中
    能够包含挂在元素（el），数据（data），模板（template），方法（methods）
    生命周期钩子（created等）等选项
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

（1）el代表咱们的Vue须要操做哪个元素下的区域，’#demo’表示操做id为demo的元素下区域。
（2）data表示Vue 实例的数据对象，data 的属性可以响应数据的变化。
（3）created表示实例生命周期中建立完成的那一步，当实例已经建立完成以后将调用其方法。html

Vue经常使用指令 -----<<< Vue数据驱动

在这里插入图片描述
（1）v-text: 用于更新绑定元素中的内容，相似于jQuery的text()方法
（2）v-html: 用于更新绑定元素中的html内容，相似于jQuery的html()方法
（3）v-if: 用于根据表达式的值的真假条件渲染元素，若是上图P3为false则不会渲染P标签
（4）v-show: 用于根据表达式的值的真假条件 显示隐藏元素，切换元素的 display CSS 属性
（5）v-for: 用于遍历数据渲染元素或模板，如图中P6为[1,2,3]则会渲染3个P标签，内容依次为1，2，3
（6）v-on: 用于在元素上绑定事件，图中在P标签上绑定了showP3的点击事件前端

在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述

  • 网速慢插值 闪烁特别明显
  • 因此v-clock 搭配这个 style样式属性选择器 在这里插入图片描述在这里插入图片描述
关于更多的Vue指令能够查看Vue2.0文档，地址：https://vuefe.cn/api/#指令

在这里插入图片描述

  • 在一个html页面里经过引入Vue.js来直接写Vue代码， 不经常使用。 不利于后期的维护和代码的公用
  • 须要用到Vue提供的技术栈来构建强大的前端项目。
除了Vue.js咱们还须要用到：

（1）vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
（2）vue-router： Vue提供的前端路由工具，利用其咱们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现先后端分离。
（3）vuex：Vue提供的状态管理工具，用于同一管理咱们项目中各类数据的交互和重用，存储咱们须要用到数据对象。
（4）ES6：Javascript的新版本，ECMAScript6的简称。利用ES6咱们能够简化咱们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
（5）NPM：node.js的包管理工具，用于同一管理咱们前端项目中须要用到的包、插件、工具、命令等，便于开发和维护。
（6）webpack：一款强大的文件打包工具，能够将咱们的前端项目文件同一打包压缩至js中，而且能够经过vue-loader等加载器实现语法转化与加载。
（7）Babel：一款将ES6代码转化为浏览器兼容的ES5代码的插件
在这里插入图片描述vue

  • 中大型Vue项目 如何利用vue-cli来自动生成咱们项目的前端目录及文件
  • 了解Vue中一切皆组件的概念及父子组件的通讯问题
  • 讲解在Vue项目中咱们如何使用第三方插件，最后利用webpack来打包及部署咱们的项目。

在这里插入图片描述

  • 使用vue-cli以前咱们须要安装node.js，
  • 利用其提供的npm命令来安装vue-cli。
  • 安装node.js只需去其官网下载软件并安装便可，地址为：https://nodejs.org/en/
安装完成以后咱们打开电脑的cmd命令行工具依次输入上图中的命令：

（1）npm install -g vue-cli：全局安装vue-cli
（2）vue init webpack my-project: 利用vue-cli在目录地址生成一个基于webpack的名为’my-project‘的Vue项目文件及目录
（3）cd my-project：打开刚刚建立的文件夹
（4）npm intall：安装项目所依赖的包文件
（5）npm run dev：利用本地node服务器在浏览器中打开并浏览项目页面node

VUE下载webpack

NPM 安装方法
  • NPM是随同NodeJS一块儿安装的包管理工具， NodeJS代码部署
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
命令行工具
  • Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli

在这里插入图片描述

# 建立一个基于 webpack 模板的新项目

  • 这里须要进行一些配置，默认回车便可
    在这里插入图片描述
    在这里插入图片描述
  • 刚构建好的vue项目中，咱们会发现一个App.vue和Hello.vue的文件，
  • 那么像这样的以.vue后缀结尾的文件即是咱们Vue项目中常见的单文件组件。
  • 单文件组件包含了一个功能或模块的html、js及css。
  • 在.vue文件中，咱们能够在template标签中写html，
  • 在script标签中写js，
  • 在style标签中写css。
  • 这样一个功能或模块就是一个.vue组件，对于组件公用和后期的维护也很是便捷

父子组件通讯

在这里插入图片描述

  • 以单文件组件为核心的项目开发中
    • vue父子组件之间是如何交换数据来实现通讯
  • 提供了props来实现父组件向子组件传递数据
  • 经过$emit来实现子组件向父组件传递数据。固然若是是较为复杂和广泛的数据交互，建议你们使用vuex来同一管理数据。
    详情请见：https://vuefe.cn/guide/components.html#使用Props传递数据
    在这里插入图片描述
  • 基于webpack的vue项目中咱们是如何使用插件的

（一）全局使用web

（1）在index.html引入：
这样的方式不推荐使用，由于存在前后加载顺序的问题
有些插件不支持这一方式。vue-router

（2）经过webpack配置文件引入：
主要经过plugin配置webpack.ProvidePlugin()方法实现，
不过只适合支持CommonJs规范并提供一个全局变量的插件，
如jQuery中的$。vuex

（3）经过import + Vue.use()引入：
这种方式须要在全局.vue文件中import须要加载的插件，
而后经过Vue.use(‘插件变量名’)来实现，不过此方法只支持遵循Vue.js插件编写规范的插件使用，
如vue-resourece。vue-cli

（二）单文件使用

（1）经过import直接引入：
这种方式能够在须要调用插件的.vue文件中使用，
不过须要注意和实例的建立顺序问题，或者也能够经过require引入。

（2）import + components注册：
此方式为Vue组件的使用方式，
能够在一个组件中注册并使用一个子组件。
在这里插入图片描述

  • 搞定整个Vue项目的前端编码阶段后，咱们须要对咱们的前端项目文件进行部署和优化工做，主要的几个方式以下：

（1）使用webpack的DefinePlugin指定生产环境：
经过plugin中的DefinePlugin配置，咱们能够声明’process.env’属性为’development’(开发环境)或者’production’(生产环境)，
结合npm配置文件package.json中scripts的命令来切换环境模式十分方便。

（2）使用UglifyJs自动删除代码块内的警告语句：
通常在生产环境的webpack配置文件中使用，
经过newwebpack.optimize.UglifyJsPlugin()来进行配置，
删除警告语句能够缩减文件的体积。

（3）使用Webpack hash处理缓存：
当咱们须要对发布到线上的文件进行修改时，从新编译的文件名若是和以前版本的相同会引发浏览器没法识别而加载缓存文件的问题。
这样咱们须要自动的生成带hash值的文件名来阻止缓存。详见：https://segmentfault.com/a/1190000006178770#articleHeader7

（4）使用v-if减小没必要要的组件加载：
v-if指令其实颇有用处，
它可让咱们项目中暂时不须要的组件不进行渲染，
等须要用到的时候在渲染，好比某个弹窗组件等。
这样咱们能够减小页面首次加载的时间和文件量。

除了以上几点的优化，还有不少优化选择，有兴趣的童鞋能够好好地了解下webpack的API文档，毕竟webpack的功能十分强大。

联系我们 沪ICP备13005482号-10