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


Posted in Javascript onDecember 16, 2017

引子

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中引入,岂不是很方便,很强大。

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

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

Javascript 相关文章推荐
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
浅谈 Vue 项目优化的方法
Dec 16 #Javascript
在vue-cli中组件通信的方法
Dec 16 #Javascript
动手写一个angular版本的Message组件的方法
Dec 16 #Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 #Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 #Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 #Javascript
微信小程序左右滑动的实现代码
Dec 15 #Javascript
You might like
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP 正则表达式小结
2015/02/12 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python实现二维曲线拟合的方法
2018/12/29 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python3列表List入门知识附实例
2020/02/09 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
大学军训自我鉴定
2013/12/15 职场文书
教育局长自荐信范文
2013/12/22 职场文书
大学毕业感言一句话
2014/02/06 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
志愿者事迹材料
2014/12/26 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Hive常用日期格式转换语法
2022/06/25 数据库