详解如何用模块化的方式写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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
javascript填充默认头像方法
Feb 22 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 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实现Soap通讯的方法
2014/11/03 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
用Python解数独的方法示例
2019/10/24 Python
python统计文章中单词出现次数实例
2020/02/27 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
J2EE包括哪些技术
2016/11/25 面试题
小区门卫工作职责
2013/12/14 职场文书
幼儿园小班评语
2014/04/18 职场文书
音乐教师求职信
2014/06/28 职场文书
科技活动总结范文
2015/05/11 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Go语言基础知识点介绍
2021/07/04 Golang
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
一文解答什么是MySQL的回表
2022/08/05 MySQL