详解如何用模块化的方式写vuejs

引子

vuejs 是一个入门简单的框架,具有使用简单,扩展方便的特点。随着webpack的流行,vuejs也推出了自己的load,vue-loader,可以方便的打包代码。最近写了一个json viewer-ac,就是完全使用vue-loader带来的模块化特性,写的比较开心,也得到了不少经验。这里记录一下。

文件结构

 <template>
  <div>
   <app-header></app-header>
  </div>
</template>
<style>
...
</style>
<script>
  import AppHeader from './AppHeader.vue'
  export default {
   name:'app',
   props:['data']
   data() {
    return {}
    },
   methods: {
    handleClick() {}
   },
   components: {
    AppHeader
   }
  }
</script>

template 里是模板代码,这里一般是一个闭合的html标签,比如一个div。

style 里是css代码,这个代码是作用到整个页面的,如果只想作用到当前的模板中,需要用scoped属性

 <style scoped> 

如果想用一些css预处理器,比如sass,只需要声明lang,然后vue-loader就会自动的加载,当然,前提是对应的 sass-loader安装好。

 <style lang="sass">

script 注意这里使用的是 es6 的代码,我是使用babel来编译,所以理所当然需要安装 babel,es6的preset,还要在根目录下自建 .babelrc 文件。具体可以参考我的 ac 或者用官方的 vue-cli 来初始化项目。

template 做不可见标签

template不仅是模板最外面的标签,同时,它也可以作为一个普通的标签使用。比如,当我们需要用 v-if 来控制部分区域的显示与隐藏时,就可以这样。

 <template>
  <template v-if="valid">
    <div></div>
  </template>
  <template v-else>
   <div></div>
  </template>
</template> 

而且,template是不会被渲染的,所以不会影响最终的dom结构。

注意:v-show 不能和 template 一起使用

flux

实际开发的时候,会发现原始的数据管理模式比较混乱,很难区分哪些是临时数据,持久数据,用户数据,后台数据,这个时候,引入 flux是再合适不过了。

如果暂时不想引入别的lib,可以尝试自己实现一个,其实非常简单。准备一个 store.js

 let trim = str => {
 return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, '');
}
export const state = {
  jsons: []
}

export const actions = {
  parse(jsonStr) {
    if(!trim(jsonStr)) return

    let jsonObj = null
    try{
      jsonObj = JSON.parse(jsonStr)
    }catch(err){
      state.jsons.push({err: jsonStr + '', valid: false })

    }
    if(jsonObj){
      state.jsons.push({obj:jsonObj, valid: true})
    }
  }
}

所有视图的数据都来自 state。所有修改必须通过actions来完成。 因为在子组件中对数据的修改并不会影响到父组件,所以可以放心的使用 vuejs 的双向绑定特性。

然后可以在app的根组件下引入 state和actions,然后按需要传递给子组件

import { state, actions } from '../store' data() {
  return {
   state,
   actions
  }
 }, 
<child :state="state" :handleClick="actions.update"></child>

import 公共的css

如果将页面常用的style变量存储到一个公共的文件比如 common.sass

 $width: 80%;
$height: 100%;
$moli-green:#CCF3E4;
$moli-white:#f8f8f8; 

然后在组件的style中引入,岂不是很方便,很强大。

不过遗憾的是我暂时还不知道这个该如何实现。:(

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 通过一个简单的例子学会vuex与模块化

    前言 Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为.但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分. 这篇文章预设你已经了解vue相关的基础知识,因此本文不再赘述.需要学习的朋友可以参考这篇文章:http://www.jb51.net/article/110212.htm 对vuex的定位和解释可以看官方文档,说的很详细了,需要的朋友也可以通过这篇文章进行详细的

  • 深入理解Vuex 模块化(module)

    一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护.为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....},

  • Vuex模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B.当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的.vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯. 项目介绍 待办事项中的一个事件,它可能拥有几个状态,未完成.已完成.已取消或被删除等.这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常

  • 详解如何用模块化的方式写vuejs

    引子 vuejs 是一个入门简单的框架,具有使用简单,扩展方便的特点.随着webpack的流行,vuejs也推出了自己的load,vue-loader,可以方便的打包代码.最近写了一个json viewer-ac,就是完全使用vue-loader带来的模块化特性,写的比较开心,也得到了不少经验.这里记录一下. 文件结构 <template> <div> <app-header></app-header> </div> </template&

  • 详解如何用Python写个听小说的爬虫

    目录 书名和章节列表 音频地址 下载 完整代码 总结 在路上发现好多人都喜欢用耳机听小说,同事居然可以一整天的带着一只耳机听小说.小编表示非常的震惊.今天就用 Python 下载听小说 tingchina.com的音频. 书名和章节列表 随机点开一本书,这个页面可以使用 BeautifulSoup 获取书名和所有单个章节音频的列表.复制浏览器的地址,如:https://www.tingchina.com/yousheng/disp_31086.htm. from bs4 import Beaut

  • 一文详解如何用原型链的方式实现JS继承

    目录 原型链是什么 通过构造函数创建实例对象 用原型链的方式实现继承 方法1:Object.create 方法2:直接修改 [[prototype]] 方法3:使用父类的实例 总结 今天讲一道经典的原型链面试题. 原型链是什么 JavaScript 中,每当创建一个对象,都会给这个对象提供一个内置对象 [[Prototype]] .这个对象就是原型对象,[[Prototype]] 的层层嵌套就形成了原型链. 当我们访问一个对象的属性时,如果自身没有,就会通过原型链向上追溯,找到第一个存在该属性原

  • 详解如何用SpringBoot 2.3.0.M1创建Docker映像

    1.发布 SpringBoot2.3.0.M1刚刚发布,它带来了一些有趣的新特性,可以帮助您将SpringBoot应用程序打包到Docker映像中.在这篇博客文章中,我们将查看创建Docker映像的典型方式,并展示如何通过使用这些新特性来改进这些镜像 2.说明 SpringBoot 2.3.0.M1 暂时不支持Windows, 很鸡肋 暂时在Mac 和Linux 上运行良好 3.常见的Docker 运行方式 一般情况下,通过docker 运行springboot 是这样的 FROM openjd

  • 详解uniapp的全局变量实现方式

    前言 本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看 全局变量的实现方式 一般来说在uniapp中有以下几种方式 本地存储 配置文件 挂载到 Vue.prototype globalData vuex 下面对这5种方式的实现进行介绍 本地存储 永久存储,以app为例即使该应用被关闭,该数据依然会被存储 这是一种永久的存储方式,类似于web的Local Storage(有关于Cook

  • 详解如何用Python登录豆瓣并爬取影评

    目录 一.需求背景 二.功能描述 三.技术方案 四.登录豆瓣 1.分析豆瓣登录接口 2.代码实现登录豆瓣 3.保存会话状态 4.这个Session对象是我们常说的session吗? 五.爬取影评 1.分析豆瓣影评接口 2.爬取一条影评数据 3.影评内容提取 4.批量爬取 六.分析影评 1.使用结巴分词 七.总结 上一篇我们讲过Cookie相关的知识,了解到Cookie是为了交互式web而诞生的,它主要用于以下三个方面: 会话状态管理(如用户登录状态.购物车.游戏分数或其它需要记录的信息) 个性化

  • 详解如何用Python模拟登录淘宝

    目录 一.淘宝登录流程 二.模拟登录实现 1.判断是否需要验证码 2.验证用户名密码 3.申请st码 4.使用st码登录 5.获取淘宝昵称 三.总结 1.代码结构 2.存在问题 看了下网上有很多关于模拟登录淘宝,但是基本都是使用scrapy.pyppeteer.selenium等库来模拟登录,但是目前我们还没有讲到这些库,只讲了requests库,那我们今天就来使用requests库模拟登录淘宝! 讲模拟登录淘宝之前,我们来回顾一下之前用requests库模拟登录豆瓣和新浪微博的过程:这一类模拟

  • 详解如何用js实现一个网页版节拍器

    目录 引言 1. 需求分析 2. 素材准备 3. 开发实现 3.1 框架选型 3.2 模块设计 3.3 数据结构设计 3.4 播放逻辑 3.5 音频控制 3.6 动效 3.7 大屏展示 3.8 新增人声发音 4. 部署 5. 后续工作 5.1 目前存在的问题 ios声音 5.2 TODO 切换不同音效 引言 平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个. 最后实现的效果如下:ahao430.github.io/metronome/. 代码见github仓库:github.com/ah

  • 详解如何用Java实现对m3u8直播流抽帧

    目录 什么是抽帧 什么是 FFmpeg 什么是 JavaCV 最简单的抽帧 抽帧算法 什么是抽帧 抽帧(frame extraction)是指从视频流中提取一些特定的帧,通常是关键帧或者随机帧,以供后续处理.对于m3u8直播流,可以使用Java中的FFmpeg库来实现抽帧功能. 什么是 FFmpeg FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案. 什么是 JavaCV JavaCV

  • 详解如何用JavaScript编写一个单元测试

    目录 为什么要进行单元测试? 范围界定和编写单元测试 保持单元测试简短而简单 考虑正面和负面的测试用例 分解长而复杂的函数 避免网络和数据库连接 如何编写单元测试 创建一个新项目 实现一个类 配置和添加我们的第一个单元测试 添加更多单元测试 修复错误 最后 测试代码是确保代码稳定的第一步.能做到这一点的最佳方法之一就是使用单元测试,确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入,甚至可能有害的输入时. 为什么要进行单元测试? 进行单元测试有许多不同的方法

随机推荐