Vue 去脚手架
上回模仿了一个nw,按照原理说,简单。
今天说Vue,脚手架是个好东西,做项目都给你配置好,nodejs很牛,不过对于我这种只想做一个界面的人来说,有点儿太大了,用不上。
如果说,不用脚手架 nodejs要面临哪些问题呢。
1. 组件,组件文件vue,用的是es6语法,目前大多数浏览器不支持,其实就两个命令 import export,为了这点儿东西,哎,想想就烦。
2. 不用组件呢?,vue的灵魂就两个,一个是mvvm模式的绑定,二个就是组件,确实想用。
没法想,自己加载吧,我们来聊一聊,手动加载vue文件组件吧。
先来分析一下
1.vue是个什么东西:简单说,是一个对象,我们构建新的vue对象时候,要提供一个配置对象options,关键就在这个配置对象上。
它包含了
el:挂载点element
data:数据
methods:方法
.....
那么,
2 . 组件是什么东西呢,嗯,简单的说也是一个对象,这个对象和vue配置类一样啊,多了一个template模板而已
它也和vue配置对象一样,包含那几样东西。
3. vue文件是什么东西呢,vue文件包含了什么呢,简单的说,包含了组件的模板和配置类options。
ok,现在清楚了,如果我们把vue文件解析一下,组合出一个配置类,也就是制造一个options,把模板放进去,他就是一个组件的配置类options
再通过一些文档上指出的组件加载方式,完全可以,自行,动态的,加载vue文件,而不用脚手架,当然了,vue文件,本身也可以自己写,不用es6格式,有什么所谓呢。反正造出来就好了
重点,算是重点吧,具体要分哪几步
1. 加载vue文件,没法,js是前端语言,要想问后端要文件,那就httprequest,httprequest是js原生的请求类,要是觉得麻烦,jquery里面也有ajex是这么写吧,我没用过,vue-resource也提供了一样的功能,此外还有好多,不列举了
重点是,一定要用同步的请求去做我们要做的事,不管你用什么插件,还是用原生的,这里我说,原生的好搞一些。
2. 分析vue,文件读上来了,分析也不叫分析吧,这太简单了,字符串分析,方法太多了,一个一字看,也行,分隔符分割也行,当然还有正则表达式,我们要做的提取个部分,<template>部分,<scripte>部分,<style>部分
3. 组合,制造一个options对象,随你造咯,造好返回一个对象给Vue就好了。
全局对象就Vue.components()
局部对象就,组件options.components上面加一下。
我简单写了一个插件,用作配合非脚手架加载vue,不如看一下,我想也就都不用说了。
var vueloader = {
install : function(Vue,options){ Vue.ImportFrom = function(url){
url = window.location.href + url
var result RequestVue(url,function(r){
var context = r
if(context){
var script = getTagContext('script',context) var options = eval("("+script+")") options.template = getTagContext('template',context) result = options
} })
return result
} }
} function RequestVue(url,cb)
{
let request = new XMLHttpRequest()
request.user=''
request.open('GET',url,false)
request.send(null)
if (request.status === 200){
cb(request.responseText)
}
} function getTagContext(tag,str){
var reg = new RegExp("<"+tag+">([\\s\\S]*)<\/"+tag+">")
var matchs = reg.exec(str)
return matchs[1]
} Vue.use(vueloader)
插件要提供install方法,两个参数Vue,options
往Vue上挂一个方法importVue,然后最下面Vue.use 这个插件。
在你的 html中 <script src="vue-component-loader.js" type="text/javascript" charset="utf-8"></script>
这是我的插件文件名
之后,随便在js里面用了。
经过,我的一顿分析,eval()是个很牛逼的方法,它可以执行script,从而简化了很多麻烦事
我找个vue文件你看
<template>
<div>
<p>this is father:{{msg}}</p>
<p><button @click='say'>Say</button></p>
<cson :msgfrom = msgfromfather></cson>
</div>
}
</template> <script> {
name:'cfather',
data:function(){return{
msg:"",
msgfromfather:'msg from father'
}},
methods:{
say:function(){
this.msg = "hello you!"
this.msgfromfather = 'father:hello from father'
}
},
components:{'cson':Vue.ImportFrom('cson.vue')}
} </script> <style>
</style>
这是我写的vue文件,也是分来来template和script这些
那么,我不需要写 export default了,我直接一个对象就好了,因为我的解析工具里面,直接把这个对象字符串用eval()给实例化了
第二点, components:{'cson':Vue.ImportFrom('cson.vue')}
这里直接把插件里的加载方法写进去了,然后eval直接给执行了,多省事。
那么,该说的就说完了,回见了。
最新文章
- SQL SERVER 2014 各个版本支持的功能
- C#回顾 –5.反射
- centos 6.8 安装 nginx-1.11.4
- jquery对标签属性操作
- 十九、Java基础--------IO流之字节流
- F2工作流引擎之 概述(一)
- 两行代码搞定UITableView无数据无网络显示-b
- Pjax介绍及在asp.net MVC3中使用pjax的简单示例
- SQL代理执行EXE可执行程序
- spring+hibernate项目demo搭建
- 使用Three.js 基本组件以及流程
- IP地址与域名的关系
- java中的异常类
- [转帖]IP /TCP协议及握手过程和数据包格式中级详解
- 将数据以json字符串格式传到前台请求页面
- ‘百度杯’十月场web ---login
- 使用DNSPod解析Freenom域名
- iOS - 国内注册境外 Apple id 账号
- cs231n(三) 误差反向传播
- Java文件写入与读取实例求最大子数组