快捷搜索:  汽车  科技

vue.js教程实例学习(vue.js应用从创建到运行)

vue.js教程实例学习(vue.js应用从创建到运行)模板语法响应式vue.js是怎么构成一个spa应用组件vue实例

目录

一个简单vue应用的创建
  • 选择什么方式创建vue应用

  • 创建

  • 项目结构分析

  • 运行

vue.js知识点的学习
  • vue.js是怎么构成一个spa应用

  • 组件

  • vue实例

  • 响应式

  • 模板语法

vue.js细化学习
  • 过滤器——后台得到的数据格式不是你想要的?过滤器帮你!

  • 指令——还想用DOM操作节点?指令帮你实现!

  • 混合——个个组件重复写方法很麻烦?混合帮你解决!

  • 组件——如何开发出灵活的组件

  • 过渡——页面没动画?过渡可以做的很完美!

正篇

昨天写了一篇webpack vue.js element打造大型项目,看到网友们反应不错,于是小编一大早编起来编写接下来未完成的章节,今天完成的是Vue.js知识点的学习,它涵盖了开发中需要的知识,也涉及了一些大家开发中没主要的知识点和细节,希望的、能够帮助到广大网友们,如果大家有什么疑问和要求,大家可以在下方留言或者加我的微信:Neho_Developer

一个简单vue应用的创建
  • 选择什么方式创建vue应用

写完了上一篇文章,我一直考虑有什么方式创建一个vue应用而纠结,用CDN引入的方式,从传统开发转过来的人很好理解,但事实上我们用vue.js开发都是比较大型的应用,这种方式学到最后是不需要的,最后还是选择了webpack开发vue应用,在创建之前,我们要确认电脑上安装了运行环境node.js和npm管理包。

  • 创建一个vue应用

在这里我们使用vue.js官方提供的vue脚手架vue-cli创建一个应用,所谓的脚手架,通俗来讲,就是通过人家定义好的一个应用文件模板,通过脚手架,我们可以下载下来供开发者自己使用。我们先安装vue-cli

npm install -g vue-cli

使用vue-cli初始化项目 这个过程中,大家可以选择一直enter就好了,当要选择y/n时,选择n

项目文件分析

安装好了之后我们打开项目的文件

vue.js教程实例学习(vue.js应用从创建到运行)(1)

创建好的项目文件

  • node_modules

这个文件夹是在npm install后,将npm包放在此文件夹内,我们不需要修改

  • src

我们开发修改的目录

  • babelrc

使用bable转化文件,一般我们不需要修改

  • gitignore

当我们协同开发项目时,我们往往需要通过版本控制工具协同开发,比如git,关于git后续会讲解git的使用技巧教程,这个文件就是配置git版本时,忽略不需要上传文件的目录清单

  • index

vue应用为spa(单页面应用),这个为打包之后在浏览器运行的html文件,一般不需要修改

  • package.json

npm包安装的目录清单,一般不需要修改

  • README.MD

markdown格式的文件,可以在里面写一些这个项目的操作记录和介绍,一般不需要修改

  • webpack.config.js

webpack模块开发工具的配置文件,我们在这里主要修改加载器的配置信息

vue.js知识点的学习
vue.js是怎么样构建一个spa应用的
  • 理解

学过html的人都知道,一个html文件是如何将超文本信息展示给用户的,是通过一个个元素,更加普遍的是通过DIV元素,像建屋子一样叠一个美丽的网页。类似的,vue也是通过一个个类似DIV一样的东西,我们称其为组件,他也想DIV一样,可以嵌套,叠加,还有DIV不能实现的其他功能,通过vnode渲染在index这个文件上,从而得到了我们常见的div组成的html文件。而我们开发的经理,则是去实现一个个组件的功能。

vue.js教程实例学习(vue.js应用从创建到运行)(2)

一个页面可以看作由组件树组成的

组件
  • webpack中vue组件的文件体现形式及实现页面的现实

在webpack中组件以文件.vue格式体现。一个vue文件则为一个组件,我们来看看一个vue文件包含什么。

vue.js教程实例学习(vue.js应用从创建到运行)(3)

根组件app.vue文件

我们可以看到,一个vue文件包含三部分<template><style><script> 这三个部分正好是网页的上个基本元素HTML CSS JAVASCRIPT 一个spa页面,通过一个或多个以vue文件格式体现的组件便可以构成一个页面,我们看看他是怎么实现通过组件展示一个网页

vue.js教程实例学习(vue.js应用从创建到运行)(4)

vue文件的实现方式

  • 组件的作用域

在组件中,变量是独立的,也就是说在<script>中定义的变量,在其他的vue文件中是不可以访问的,当组件间需要交互数据,怎么办呢,下面就全面的介绍了

  • 父子组件的通信

子组件获取负组件的变量:在子组件中this.$parent 返回父组件的实例,便可以访问父组件的变量,也可以通过props向子组件注入变量。

子组件获取父组件的html:可以通过slot分发父组件的html。

当组件之间的关系并不是父子关系,那怎么办呢,这时我推荐大家使用vue的插件vuex,接下来的文章会专门介绍vuex

vue实例
  • 理解

如果一个应用只有一个vue组件构成的话,从MVC框架来看的话,template标签定义的就是应用的视图层VIEW,script标签中的定义的就是model层了,这样说其实不是很准确,更加确切的说应该的实例中的data对象

<script> data对象:model层

export default {

data(){

return{

//这里是一个应用的model层

text:'你好,Neho'

}

}

}

<template> 视图层

<template>

<div id="app">

{{text}}

</div>

</tempalte>

页面

你好,Neho

  • vue实例

一个vue组件对应一个vue实例,在script标签中,我们通过new Vue()方式创建一个vue实例,通常来说,不通过的组件vue实例是不一样的,我们可以通过向这个方法传入一个对象来实例化不同的vue实例。对象中常用的属性有data属性——定义数据,methods属性——定义操作data数据的函数,created属性——实力在一个vue实例中,不同的生命周期会调用不同的函数钩子,我们来看看一个简单的代码

vue.js教程实例学习(vue.js应用从创建到运行)(5)

根组件

效果

vue.js教程实例学习(vue.js应用从创建到运行)(6)

页面效果

响应式

vue的一个很出色的特点是视图层view(template标签)和数据层model(data中定义的数据)是时时同步的,我们来看看简单的例子

  • 写好代码我们看看效果

代码

vue.js教程实例学习(vue.js应用从创建到运行)(7)

代码

页面

vue.js教程实例学习(vue.js应用从创建到运行)(8)

页面

这是一个很简单的页面,但我们试图去修改input标签的内容时,发现页面显示的内容也跟着改了

页面

vue.js教程实例学习(vue.js应用从创建到运行)(9)

修改后页面

敢于v-model的使用,下面会介绍到,这里我们只需要知道它可以同步input的内容到它绑定的data属性edit上。

模板语法
  • 理解,写过后台的人对模板这个概念估计不会陌生,通常来说,在一个html文件中,我们不能直接将js代码写在html标签中,这样是会报错了,为了解决这个问题,模板诞生了,使用模板,通常来说,不同模板有不同后缀名,比如ejs模板,他的后缀名为ejs。在vue文件中,模板的文件后缀名就是vue,使用vue的模板,我们可以直接在temlate标签中使用js代码如上面的{{}},他可以是我们在里面写js表达式。我们来看看vue模板有什么语法

  • {{}}——将里面的变量(script标签中data定义的变量)输出在页面上

通过{{}},我们可以在里面写入data定义好的变量,从而显示在页面上。

  • v-html——将传入的变量(script标签中data定义的变量)输出在页面上(不包括节点)

使用{{}}很方便,但有时我们需要拼接节点的时候,他会把div这类节点字符串也输出出来,这是我们不愿看到的,我们可以使用v-html来解决这个问题,我们来看下代码

代码

vue.js教程实例学习(vue.js应用从创建到运行)(10)

代码

页面效果

vue.js教程实例学习(vue.js应用从创建到运行)(11)

页面

  • v-if——控制节点元素的显示,传入的变量为false时,该指令绑定的元素不显示

代码

vue.js教程实例学习(vue.js应用从创建到运行)(12)

代码

  • 页面——我们可以看到,页面并没有出现我们在div中写的文本


vue.js教程实例学习(vue.js应用从创建到运行)(13)

  • v-for——循环输出文本,这对于我们创建一些重复的节点非常有用

代码,我们需要输出5行li列表,以前我们需要重复写5个li,现在只要写一个就好了

vue.js教程实例学习(vue.js应用从创建到运行)(14)

代码

页面效果

vue.js教程实例学习(vue.js应用从创建到运行)(15)

页面

  • v-bind——每种标签都有自己的属性,当我们需要将实例定义好的变量传入属性中,怎么办呢,v-bind可以帮我们解决这个问题,这个例子中,input有一个value属性,我们需要要将data中定义好的变量输出到页面上

代码

vue.js教程实例学习(vue.js应用从创建到运行)(16)

代码

页面

vue.js教程实例学习(vue.js应用从创建到运行)(17)

页面

  • v-on——我们知道,web是事件驱动的应用,当我们需要在模板中添加事件监听怎么办呢,这里我们使用v-on,在这里我们在节点中添加点击事件,事件会调用实例中定义的函数clickMe 然后弹出警告框

代码

vue.js教程实例学习(vue.js应用从创建到运行)(18)

代码

页面点击前

vue.js教程实例学习(vue.js应用从创建到运行)(19)

页面

页面点击按钮后

vue.js教程实例学习(vue.js应用从创建到运行)(20)

页面

  • v-model——在处理表单的时候,开发者最感到头疼的是如何获取表单的信息,在vue.js中,我们可以通过v-model时时将绑定的input元素内的文本同步到传入v-model的值,而且这个过程是双向的,用户修改input内的文本,data中的变量会跟随改变,通过方法改变data中的变量,页面input的文本也会随着改变。

  • 结语

vue.js知识点就将这么多了,这已经可以满足打开日常开发的需求,如果有什么不足或者不明白之处,大家可以下方留言或者加我的微信^_^ 接下来讲讲大家不怎么注意,但在开发中合理运用会大大简化我们的开发

vue.js细化学习
过滤器——后台得到的数据格式不是你想要的?过滤器帮你!
  • 为什么使用过滤器

在开发当中,常常遇到一些后台返回的数据并不是我们想展示在页面上的,比如后台对于时间的处理,往往返回给前段的是时间戳,然而我们不可以能将时间戳展示在页面上,这样的话过滤器就排上用场了

  • 怎么使用过滤器

vue2.0后,过滤器只在模板语法{{}}中使用,对于时间戳处理我们可以这样

{{时间戳|时间戳过滤器}}

过滤器实战——金额过滤器
  • 解决问题

后台返回的金额往往只是一个number数据类型,但我们在页面显示时候,往往需要在金额前面加上金额符号¥,之时候我们可以使用过滤器解决这个问题

  • 首先创建一个全局的过滤器priceFormat

代码

vue.js教程实例学习(vue.js应用从创建到运行)(21)

代码

  • 将过滤器引入入口文件main.js

import './filters'

  • 在组件中使用

vue.js教程实例学习(vue.js应用从创建到运行)(22)

  • 页面

vue.js教程实例学习(vue.js应用从创建到运行)(23)

指令——还想用DOM操作节点?指令帮你实现!
  • 指令的定义

指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

  • 有哪些指令

上面我们学到了模板语法,其中v-if v-model等等都是官方封装好的指令,但有时候我们需要自己定义属于自己的指令

  • 指令解决的问题

vue.js开发应用的时候,大多时候,vue是不支持我们用DOM去看开发的,但有时候我们必须使用DOM的方式去解决一些问题,比如在用户点击购买按钮的时候会弹出一个信息输入组件,我们往往需要弹出的信息输入框会自动聚焦,方便用户的输入。这时候我们就需要写一个自动对焦的指令

  • 首先我们先创建一个指令

代码

vue.js教程实例学习(vue.js应用从创建到运行)(24)

  • 将指令引入入口文件main.js

import './directives'

  • 在需要绑定的元素上绑定自定义指令v-focus

代码

vue.js教程实例学习(vue.js应用从创建到运行)(25)

代码

页面——我们在页面添加一个购买按钮,当用户点击按钮,会弹出一个蒙版输入框,这时候输入框会自动获得焦点。

点击前

vue.js教程实例学习(vue.js应用从创建到运行)(26)

点击前的页面

点击购买后——可以看到,这时候输入框已经自动获得焦点了

vue.js教程实例学习(vue.js应用从创建到运行)(27)

点击后的页面

混合——个个组件重复写方法很麻烦?混合帮你解决!
  • 解决的问题

在开发的过程中,有些方法似乎并不是单独一个组件使用,很多的组件都会使用到这种方法,比较典型的就是在大型的单页面开发中,往往会涉及到路由的转跳,在使用编程路由的时候,由于组件的作用域是独立的,methods中定义的方法并不能在所有组件中使用,为此我们必须在每个组件中重复的编写this.$router.push()这一简单方法,这时候我们可以通过定义一个全局的混合methods,便可以在所有的组件中使用路由转跳的方法

  • 在这里,由于没有涉及路由的概念,我们通过一个简单的全局methods方法,来演示一下怎么使用混合

  • 定义一个全局混合

vue.js教程实例学习(vue.js应用从创建到运行)(28)

代码

  • 在webpack入口文件main.js引入mixin

import './mixins'

  • 在组件中使用全局混合方法

vue.js教程实例学习(vue.js应用从创建到运行)(29)

代码

  • 点击前

vue.js教程实例学习(vue.js应用从创建到运行)(30)

页面

  • 点击后

vue.js教程实例学习(vue.js应用从创建到运行)(31)

页面

  • 结语

Vue的知识点介绍就在这里了,在开发过程中常用的的知识都有所讲解,如果大家有什么不懂得,意见或者想重点介绍的,可以留言下方或者加我们QQ564648147 我们一起探讨进步吧^_^ 新手期,觉得小编写的不错的点个赞或者转发分享给周围的朋友吧(ง •̀_•́)ง

下期vue-router从入门到精通——开发一个CMS登陆界面 有兴趣的关注我吧,定期更新

猜您喜欢: