都说Vue2简单,上手容易,但小马过河,自己试了才晓得,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前随便拿全局变量和修改dom的锤子不能用了,变换到关注数据本身。vue的官方文档还是不错的,由浅到深,但是当你用vue-cli构建一个工程的时候,发现官方文档还是不够用,得参考git上开源的项目并去学习es6。而且vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。

1.vue-cli

这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,你只关注开发就好。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

热更新的机制是检测文件的变化并用websocket通知客户端做出相应的更新。详细的可以移步:【webpack】-- 模块热替换

2.vue-router

vue的路由还是很方便的,比ag1的时候要方便很多。这种方便体现在三个方面:

1个是路由和页面(组件)对应:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Chat from '@/components/Chat'
import Firends from '@/components/Firends'
import Logon from '@/components/Logon' Vue.use(Router)
let router=new Router({
routes: [
{
path: '/home',
name: 'Home',
component: Home
},
{ path: '/', redirect: '/home' },//重定向
{
path: '/chat',
name: 'Chat',
component: Chat
},
{
path: '/firends',
name: 'Firends',
component: Firends
},
{
path: '/logon',
name: 'Logon',
component: Logon
}
]
});

常人的思路就是这样,而ag1中还需要带上控制器(vue中没有这个概念,取而代之的是关注组件就行),这样用起来更简单。MVC模式中,需要指到controller下的action,如果导航分类多,对应策略是嵌套路由。

2个是可以具体到元素了:

<router-link    class="footer-item"  exact  to="home">首页</router-link>

这个to后面的home(忽略大小写)就是上面定义的路由名称。这样就很方便了。类似于Asp.net MVC 的路由可以用名称来渲染出路径,而不用什么时候都要输入路径。

3个是事件拦截:

如果我们要做验证,最好不过的就是在用户到达页面之前进行验证:

router.beforeEach((to, from, next) => {
//todo 以后增加不需要验证的地址判断
if(to.path!=="/logon"&&!store.state.userInfo.Account){
next({ path: '/logon' })
return;
}else{
next();
}
})

比如在beforeEach中进行处理。它还有很多功能,就不一一枚举了,官方文档:http://router.vuejs.org/zh-cn/

3.组件中使用组件

看了几个移动UI库,一开始奇怪怎么没有footer组件,现在明白,路由都这么方便了,第三方ui没必要封装了footer,也不方便封装(因为依赖路由)。于是导航可能是你需要自己来写的第一个组件。

比如定义了个Footer.vue
<template>
<footer class="footer">
<router-link class="footer-item" exact to="home">
<span class="icon icon-home">
</span>
<label>首页</label>
</router-link>
<router-link class="footer-item" to="statistics">
<span class="icon icon-stat">
</span>
<label>统计</label>
</router-link>
<router-link class="footer-item" to="more">
<span class="icon icon-more">
</span>
<label>更多</label>
</router-link>
</footer>
</template>

<script>
export default {
name: 'VFooter'
}
</script>

只在App.Vue中就需要引入

import VFooter from './VFooter'

export default {
name: 'app',
data () {
return {
msg: 'this is home'
}
},
components:{VFooter}
}

然后在App.Vue中就可以使用了

<VFooter></VFooter>
如果是要注册到全局 就用先在main.js中引入
import Footer from './components/VFooter'
//
Vue.component('VFooter', Footer)//写在构造函数之前

到了这一步就可以愉快的组装自己的页面了。如果需要给页面加上滑动效果,可以加一个transition(位于app.vue):

  <transition  name="slide-in" mode="out-in">
<router-view></router-view>
</transition>
.slide-out-enter-active,
.slide-out-leave-active,
.slide-in-enter-active,
.slide-in-leave-active {
will-change: transform;
transition: all 400ms;
position: absolute;
}
.slide-out-enter {
opacity: 0;
transform: translateX(-100%); }
.slide-out-leave-active {
opacity: 0;
transform: translateX(100%); }
.slide-in-enter {
opacity: 0;
transform: translateX(100%); }
.slide-in-leave-active {
opacity: 0;
transform: translateX(-100%);

如何做到左右切换呢?

4.vue-resource

页面敲好了,得能发请求。https://github.com/pagekit/vue-resource 而前端如果不是自己写的接口首先关心的还是怎么设置代理,这个位于config/index.js下面的proxyTable。

    proxyTable: {
'/api':
{
target: 'http://11.111.249.12:11',
changeOrigin: true,
pathRewrite:
{
'^/api': ''
}
},

跨域的设置不能少了changeOrigin。另外需要注意最后的这个'^/api': ''。 要注意你选择的"/api"是不是原路径中的一部分,不然容易出错。

然后还有一部分就是设置请求头(main.js):

import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.http.interceptors.push(function(request, next) {// modify method
//request.method = 'POST'; // modify headers request.headers.set('token',“token”);// continue to next interceptor
next();
});

5.vuex

全家桶里面一开始最让我懵逼的就是这个vuex。这是个什么鬼,为什么需要这个。没有玩过React,不知道什么是状态管理。当你想用一个全局变量的时候,你发现之前的招都不灵了。比如设置一个登录状态

let login=(name,pwd,success,fail)=>{
Vue.http.post(loginUrl,{account:name,password:pwd}).then(res=>{
     //....
window.hasLogin=true; },res=>{ fire(fail,"请求失败"); }) }

然后再首页显示出来:

<div @click="toggle">{{hasLogin}}</div>
data () {
return {
hasLogin:window.hasLogin
}
},
methods:{
toggle(){
window.hasLogin=!window.hasLogin;
console.log("clicked",window.hasLogin)
}
},

你发现你登录之后确实显示了true,但怎么点击也不会切换false或true。

需要再赋值一次:

this.hasLogin=window.hasLogin;

为什么呢?因为你自己定义的变量,根本不属于vue的model。也就是没有处理过geter和seter,虽然变量的值是变化了,但仍然无法改变界面上的状态。所以你需要一个状态管理,按照一定的机制把你的变量变换成vue内部的模型。这个东西就是vuex。因为约定比较多,略显复杂点,但是耐心看一下还是很容易接受的。它主要分四个部分,state,getters,mutations,actions。先定义一个user.js如下:

state就是我们放共享变量的地方。比如下面的userInfo.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); const userStore=new Vuex.Store({
state:{
userInfo:{
userName:""
}
},
getters:{
getUserInfo(state){
return state.userInfo;
}
},
mutations:{
setUserInfo(state,userInfo){
state.userInfo=userInfo;
}
},
actions:{
setUserInfo({commit}){
commit('setUserInfo');
}
} }) export default userStore;

而getters顾名思义就是获取接口,mutations(突变)这个词有点唬人,其实就是setters嘛。里面的方法自带state参数。而actions就是mutations的异步方法。然后再main.js中引用一下:

import store from './store/user';
//...
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})

然后我们在设置或获取的时候就可以使用指定的方法:

import store from '@/store/user';
//...
store.commit('setUserInfo',user)

可以直接通过store.state获取变量,也可以通过getters接口:

 computed:{
...mapGetters({username:'getUserName'})
},

这三个点是es6中的扩展运算符。将一个数组转为用逗号分隔的参数序列。

当然这些状态刷新之后就没有了,如果想要暂存下来,可以放到sessionStorage中:

if (window.sessionStorage.user) {
var json=JSON.parse(window.sessionStorage.user);
store.commit('setSessionUser',json)
}

当然要在muations中放进去

  //个人信息
setUserInfo(state,user)
{
state.userInfo=user;
window.sessionStorage.user=JSON.stringify(state.userInfo);
},

官方文档: https://vuex.vuejs.org/zh-cn/

小结:到这儿基本五脏俱全了,可以愉快的玩耍了。还有一个是对生命周期的理解。组件实例每次加载都会执行一遍,所以在生命周期的方法中做请求和绑定的时候要清楚这一点。

其他:

Demo
UI:
 
 
 
 
 
 

学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现。下面讲一下如何定义动态组件。

Vue.extend

思路就是拿到组件的构造函数,这样我们就可以new了。而Vue.extend可以做到:https://cn.vuejs.org/v2/api/#Vue-extend

// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

官方提供了这个示例,我们进行一下改造,做一个简单的消息提示框。

动态组件实现

创建一个vue文件。widgets/alert/src/main.vue

<template>
<transition name="el-message-fade">
<div v-show="visible" class="my-msg">{{message}}</div>
</transition>
</template> <script >
export default{
data(){
return{
message:'',
visible:true
}
},
methods:{
close(){
setTimeout(()=>{
this.visible = false;
},2000)
},
},
mounted() {
this.close();
}
}
</script>

这是我们组件的构成。如果是第一节中,我们可以把他放到components对象中就可以用了,但是这儿我们要通过构造函数去创建它。再创建一个widgets/alert/src/main.js

import Vue from 'vue';
let MyMsgConstructor = Vue.extend(require('./main.vue')); let instance; var MyMsg=function(msg){
instance= new MyMsgConstructor({
data:{
message:msg
}}) //如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
instance.$mount(); document.body.appendChild(instance.$el)
return instance;
} export default MyMsg;

require('./main.vue')返回的是一个组件初始对象,对应Vue.extend( options )中的options,这个地方等价于下面的代码:

import alert from './main.vue'
let MyMsgConstructor = Vue.extend(alert);

而MyMsgConstructor如下。

参考源码中的this._init,会对参数进行合并,再按照生命周期运行:

  Vue.prototype._init = function (options) {
...// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created'); ... if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};

而调用$mount()是为了获得一个挂载实例。这个示例就是instance.$el。

可以在构造方法中传入el对象(注意上面源码中的mark部分,也是进行了挂载vm.$mount(vm.$options.el),但是如果你没有传入el,new之后不会有$el对象的,就需要手动调用$mount()。这个方法可以直接传入元素id。

 instance= new MessageConstructor({
el:".leftlist",
data:{
message:msg
}})

这个el不能直接写在vue文件中,会报错。接下来我们可以简单粗暴的将其设置为Vue对象。

调用

在main.js引入我们的组件:

//..
import VueResource from 'vue-resource'
import MyMsg from './widgets/alert/src/main.js';
//..
//Vue.component("MyMsg", MyMsg);
Vue.prototype.$mymsg = MyMsg;

然后在页面上测试一下:

<el-button type="primary" @click='test'>主要按钮</el-button>
//..

 methods:{
  test(){
  this.$mymsg("hello vue");
  }
 }

这样就实现了基本的传参。最好是在close方法中移除元素:

 close(){
setTimeout(()=>{
this.visible = false;
this.$el.parentNode.removeChild(this.$el);
},2000)
},

回调处理

回调和传参大同小异,可以直接在构造函数中传入。先修改下main.vue中的close方法:

export default{
data(){
return{
message:'',
visible:true
}
},
methods:{
close(){
setTimeout(()=>{
this.visible = false;
this.$el.parentNode.removeChild(this.$el); if (typeof this.onClose === 'function') {
this.onClose(this);
}
},2000)
},
},
mounted() {
this.close();
}
}

如果存在onClose方法就执行这个回调。而在初始状态并没有这个方法。然后在main.js中可以传入

var MyMsg=function(msg,callback){

 instance= new MyMsgConstructor({
data:{
message:msg
},
methods:{
onClose:callback
}
})

这里的参数和原始参数是合并的关系,而不是覆盖。这个时候再调用的地方修改下,就可以执行回调了。

   test(){
this.$mymsg("hello vue",()=>{
console.log("closed..")
});
},

你可以直接重写close方法,但这样不推荐,因为可能搞乱之前的逻辑且可能存在重复的编码。现在就灵活多了。

统一管理

如果随着自定义动态组件的增加,在main.js中逐个添加就显得很繁琐。所以这里我们可以让widgets提供一个统一的出口,日后也方便复用。在widgets下新建一个index.js

import MyMsg from './alert/src/main.js';

const components = [MyMsg];

let install =function(Vue){
components.map(component => {
Vue.component(component.name, component);
}); Vue.prototype.$mymsg = MyMsg; } if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}; export default {
install
}

在这里将所有自定义的组件通过Vue.component注册。最后export一个install方法就可以了。因为接下来要使用Vue.use

安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

也就是把所有的组件当插件提供:在main.js中加入下面的代码即可。

...
import VueResource from 'vue-resource'
import Widgets from './Widgets/index.js' ...
Vue.use(Widgets)

这样就很简洁了。

小结: 通过Vue.extend和Vue.use的使用,我们自定义的组件更具有灵活性,而且结构很简明,基于此我们可以构建自己的UI库。以上来自于对Element源码的学习。

widgets部分源码:http://files.cnblogs.com/files/stoneniqiu/widgets.zip

vue2入坑随记(一)-- 初始全家桶

Vue 插件写法的更多相关文章

  1. Vue插件写、用详解(附demo)

    出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...

  2. 如何制作一个类似jquery插件的vue插件

    vue拿来写插件,会不会太那啥? 请跟我念,"不会,符合业务需求才是你的老板最想要的." 如何封装一个可以全局调用的vue插件 其原理其实相当简单,通过new Vue(vueCom ...

  3. Vue插件编写、用法详解(附demo)

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  4. 开发第一个VUE插件

    背景 项目中用到element-ui,里面用到了弹出组件,但是效果不太满意,于是自己就想写一个简单的弹出组件.目前已经发布到npm:可以通过npm i dialog-wxy -s 进行下载使用页面调用 ...

  5. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

  6. vue插件编写与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...

  7. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  8. 手把手教你写vue插件并发布(二)

    前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...

  9. VUE插件大总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

随机推荐

  1. RTS与CTS的含义【转】

    转自:http://www.cnblogs.com/sunyubo/archive/2010/04/21/2282176.html 一.RS232标准中的RTS与CTS RTS,CTS------请求 ...

  2. Matplotlib安装感想

    刚刚安装完numpy,看完书又涉及到matplotlib,哎,安装它浪费了我很多时间,但收获很多呀 下面介绍一下具体的安装过程: (1)http://matplotlib.org/downloads. ...

  3. C++ Primer读书笔记(3)

    vector: 本科时学C++的时候没学过vector,正好补一下. 第一个要注意的地方是要正确区分列表初始值还是元素数量. 第二点是不能使用范围for向vector对象添加元素,范围for语句体内不 ...

  4. eclipse开发mapreduce程序时出现的问题

    1.报HDFS权限不够:org.apache.hadoop.security.AccessControlException: Permission denied:user=ouqiping, acce ...

  5. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  6. hdu 5038 (2014北京网络赛G 排序水题)

    题意:有n个数字,带入10000 - (100 - ai) ^ 2公式得到n个数,输出n个数中频率最大的数,如果有并列就按值从小到大都输出输出,如果频率相同的数字是全部的n个数,就输出Bad....题 ...

  7. 为什么要做A.prototype.constructor=A这样的修正?

    问题 虽然看过这篇博文JavaScript prototype之后对原型理解不再那么模糊了,但是依然还有很多理解不甚透彻的地方.比如,今天看到一个原型式继承的例子,又有些困惑,于是找了些帖子看看,有了 ...

  8. 富文本编辑器&FileReader

    最近在做一个web版的管理Tool,其中包括一个编辑框,要求能够编辑文字,插入图片,最后导出做成一个Html.对于资深人士看来,这很容易啊,不就是一个富文本编辑框吗?这其实就是一个概念的问题,对有经验 ...

  9. Windows网络命令

    如何查看系统端口 Windows中要查看系统端口,可以使用netstat命令,点击开始---运行---键入cmd,打开命令提示符窗口,在命令提示符状态下键入“netstat -an”,按下回车键后就可 ...

  10. Storm常用操作命令及WordCount

    Storm常用操作命令 1.任务提交命令:storm jar [jar路径] [拓扑包名.拓扑类名] [拓扑名称] storm jar /export/servers/storm/examples/s ...