小记:介绍vue.js

    vue.js是目前比较热门的前端框架之一。它具有易用,灵活,高效等特点。它也提供一种帮助我们快速构建饼开发前端项目的模式。本次分享主要就是介绍vuejs,了解vuejs的基本知识,以及开发流程,进一步了解如何通过vuejs构建一个前端项目。

    主要通过四个部分讲解,介绍vue,vue的实例,以及vue的技术栈,最后是vue插件的使用。

    什么是vue?vue就是一个渐进式的JS框架。主要作用就是动态构建用户界面。

    渐进式是什么意思呢?

    vue的核心功能就是一个视图模板引擎,包含声明式渲染以及组件系统。在核心部件的基础上添加客户端路由、大规模状态管理来构建一个完整的框架,下图就是vue包含的所有部件。这些功能是相互独立的,可以在核心部件基础上选择任意你所需要的部件。这也就是‘渐进式’的概念。 

   开发出vue的作者叫尤雨溪(Evan You)是一个华裔,使得vue很热的原因还有一个就是vue的中文文档写得很好,简单易懂。有兴趣可以去百科看一下他的简介---------链接: https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470

    那么,vue是因何由来的?学习前端的同学就算没接触过Angular和React,也一定听说过,vue和Angular还有React有一定交集。

   Vue集这两者的优点于一身,它具有Angular的模板语法和数据绑定的特性,虽然Angualr的功能齐全,但是上手有点难,Vue上手容易,而且它的中文文档写的很好,适合学习。还有,Vue还具有React的组件化和虚拟Dom的特性,虽然Vue和React上手难易程度差不多,但是vue比react的性能会好点。

    显而易见,vue的特点也就是它的由来,并且vue遵循MVVM模式。

    上图便是MVVM模式的示意图,分为三个部分:View(DOM)层、Model(JS逻辑层)以及ViewModel(Vue)层。

其中,在viewmodel层中包含两个类似监听器的部件,DOM Listeners和Data Bindings,当View层的数据状态发生改变时,那么Dom Listeners

会监听Model层并改变Model层的数据。相反,当Model层的数据发生改变时,ViewModel层的Data Bindings监听并改变View层数据的显示。这也就是vue的一个特性:数据的双向绑定。

    Vue的实例

    

    上图所示为vue的简单实例。其中el表示Vue需要操作的区域范围。'#example'表示操作id为example元素下的范围。

data表示vue实例的数据对象,data的属性可以响应数据的变化。created表示实例生命周期中创建完成的那一步,当实例已经创建完成之后将调用其方法。

    Vue的常用指令:

vue技术栈

  上边的vue.js可以直接在一个html页面里通过引入Vue.js来直接写Vue代码,但是这样的方式并不常用。因为如果我们的项目比较大,项目中会存在很多页面,一旦每个页面都引入一个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-cli构建

单文件组件

在刚刚构建好的vue项目中,有一个App.vue和Hello.vue的文件,那么像这样的以.vue后缀结尾的文件便是我们Vue项目中常见的单文件组件。单文件组件包含了一个功能或模块的html、js及css。在.vue文件中,我们可以在template标签中写html,在script标签中写js,在style标签中写css。这样一个功能或模块就是一个.vue组件,对于组件公用和后期的维护也非常便捷。


父子组件通信

  那么像这样在以单文件组件为核心的项目开发中,我们一定会想到一个问题,就是.vue父子组件之间是如何交换数据来实现通信的呢?在Vue2.0中提供了props来实现父组件向子组件传递数据,通过$emit来实现子组件向父组件传递数据。当然如果是较为复杂和普遍的数据交互,建议大家使用vuex来同一管理数据。

使用props向子组件传递数据

props 是指注册在组件选项上的自定义属性.当一个值,被放置在 props 中,作为其中一个 prop,这个值就会成为组件实例上的一个可访问的属性。

使用events向父组件发送消息

在开发 <blog-post> 组件时,有些功能可能恰好与 props 相反,需要子组件反过来和父组件进行通信。

•添加能放大文章文本字号的辅助功能

使用events向父组件发送消息

在开发 <blog-post> 组件时,有些功能可能恰好与 props 相反,需要子组件反过来和父组件进行通信。

•添加能放大文章文本字号的辅助功能>>>>内容前面添加一个可以加大文本字号的按钮

当点击 button 时,需要和父组件通信,告知它加大所有文章的文本字号。Vue 实例为我们提供了一个自定义事件(custom event)系统,来解决这个问题。想要向父组件发送事件,我们可以调用实例中内置的 $emit 方法,传递事件名称。然后在博客文章组件上,可以通过 v-on 监听这个事件,就如同使用原生 DOM 事件一样:

插件使用

全局使用:

1、index.html 引入。这样的方式不推荐使用,因为存在先后加载顺序的问题,有些插件不支持这一方式。

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

3、import + vue.use()引入。这种方式需要在全局.vue文件中import需要加载的插件,然后通过Vue.use('插件变量名')来实现,不过此方法只支持遵循Vue.js插件编写规范的插件使用,如vue-resourece。

单文件使用:

1、通过import直接引入。这种方式可以在需要调用插件的.vue文件中使用,不过需要注意和实例的创建顺序问题,或者也可以通过require引入

2、import + components注册。此方式为Vue组件的使用方式,可以在一个组件中注册并使用一个子组件。

 

以上是我最近一段时间学习vue的小积累,如果日后更加深入的接触vue,那么有什么感想或心得也会持续更新的。加油吧~

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页