详解如何用模块化的方式写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 相关文章推荐
jquery easyui使用心得
Jul 07 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
使用js和canvas实现时钟效果
Sep 08 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
美国时尚在线:Showpo
2017/09/08 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
数学教研活动总结
2014/07/02 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
房屋所有权证明
2014/10/20 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
教导主任个人总结
2015/03/03 职场文书
焦点访谈观后感
2015/06/11 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android