详解如何用模块化的方式写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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
在JavaScript中实现命名空间
Nov 23 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
详解python中的线程与线程池
2019/05/10 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
关于VPN
2012/06/10 面试题
护理专业的自荐信
2013/10/22 职场文书
运动会广播稿300字
2014/01/10 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
员工辞职信范文大全
2015/05/12 职场文书
幼儿园六一主持词
2015/06/30 职场文书