使用Vue.js初次真正项目开发-2018/07/14

一、组件化

使用Vue.js进行开发,按照MVVM模式,围绕数据为核心,进行开发。

开发过程根据业务和功能组件化,组件化一方面让我们开发思路更加清晰,另一方面对于数据的处理和控制变得更加简单,毕竟一个大功能交给一个组件去实现,总是会显得很复杂,但是将大功能进行细分,交给多个人,每个人负责不同的小功能,就会变得清晰简单。

1. 父子组件数据交互通过prop和事件来实现双向数据绑定。

父组件传递到子组件的prop数据,需要在子组件的props属性中进行注册,意为预期传入的数据。

然后子组件不能直接在子组件修改父组件传入的数据,可以通过this.$emit(‘eventName‘, args)来触发父组件传递给子组件的时间,进而通知父组件改变数据。

对于兄弟组件和跨组件数据交互,可以通过Vuex或者bus来实现。

2. 父组件嵌入使用子组件

首先通过import引入子组件

然后在父组件的components属性中注册,才能在父组件中使用。

二、关于图片引入使用

1. 如果是在css中引入图片,直接按照相对路径引入使用即可。

2. 如果是想在组件模板中使用img标签使用图片:

首先需要在script中使用import把图片引入,引入路径使用相对路径即可。

然后在data或者computed中把引入图片注册,不能直接使用,会报错

最后在img标签中绑定src为data中属性或者计算属性即可。

import tipImg from "../assets/img/tip.png";

export default {

    data () {
      tipImg: tipImg
    }
 }

<img class="tip-icon" :src="tipImg" >

三、ElementUI组件配合Vue.js的开发

ElementUI是饿了么团队使用Vue.js开发的组件库,使用该组件库可以节省很多时间。

使用方法如下:

import Vue from ‘vue‘
import ElementUI from ‘element-ui‘
Vue.use(ElementUI)

 

四、对于ElementUI中的table组件虽然提供了行和列合并的方法,但是比较死板,对于数据行列合并的不确定性无法实现动态合并,有必要对改组件进一步封装,根据传入的数据动态合并单元格。

五、开发过程有疑问一定要及时的询问产品和相关人员,避免错误的开发,避免人力和时间的浪费。

---------

原文地址:https://www.cnblogs.com/Walker-lyl/p/9310906.html

时间: 2024-11-10 04:09:18

使用Vue.js初次真正项目开发-2018/07/14的相关文章

【前端】Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

2018 07 14 题解

2018 07 14 T1 Description给出一个长度为 n 的序列 A,求这个序列的最长上升子序列的长度. HintO(NlogN)模板题,不赘述了 Code #include <set> #include <cmath> #include <queue> #include <cstdio> #include <string> #include <cstring> #include <iostream> #inc

Vue.js的复用组件开发流程

本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表. 首先看看quiList.vue //quiList.vue <template> <div class="qui-list"> &

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue.js搭建官方项目的步骤

搭建官方项目模板步骤:  1.npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法.这两个有一定的区别,我们都知道package.json  中有一个 "dependencies" 和 "devDependencies" 的.dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runt

Vue.js系列之项目搭建

项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm,故不再安装) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 安装模块时安装方法 $ cnpm install [name] 3.快速学习Vue2.0教程 (中)http://cn.vuejs.org/ (英)htt

Vue.js系列之项目搭建(1)

项目搭建具体步骤如下: 1.安装node 到官网下载安装,我这里是win7系统. (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm,故不再安装) ? 1 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 安装模块时安装方法 ? 1 $ cnpm install [name] 3.快速学习Vue2.0教程 (中

前端开发之走进Vue.js

Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型的前端项目,同时做好相应的部署与优化工作. 文章将以PPT图片附加文字介绍的形式展开,不会涉及知识点的具体代码,点到为止.有兴趣的同学可以查看相应的文档进行了解. Vue.js简介 从上图的介绍中我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架,其和jQuery最大的