vue2.0的学习

 vue-router

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

1）router.push(location)

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用router.push(...)。

2）router.replace(location)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

点击<router-link :to="..." replace>等同于调用router.replace(...)。

 

vue组件

注册

1）全局注册

//app.js
Vue.component('ttModal', Vue.asyncComponent('Common','ttModal'));
//ttModal.html
<div class="tt-modal-wrapper">
    <div class="modal-mask" v-bind:class="{'in': isModalIn}" v-on:click="modalClose"></div>
    <div class="modal-content" v-bind:class="{'in': isModalIn}">
        modal-content.
        <slot name="content"></slot>
    </div>
</div>
//topicLeft.html
<tt-modal v-if="isShowCreateTopic" v-on:close="isShowCreateTopic = false">
    <div slot="content">topicLeft.</div>
</tt-modal>

渲染后：

//ttModal.html
methods: {
    modalClose: function(e) {
        if(this.$el.contains(e.target)) {
　　　　　　　//vm.$el：Vue 实例使用的根 DOM 元素
            this.$emit('close');
　　　　　　　//vm.$emit：触发当前实例上的事件即close事件
        }
    }
}

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

2）局部注册

　 通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用。

使用组件时，大多数可以传入到 Vue 构造器中的选项可以在注册组件时使用，有一个例外： data 必须是函数。

//project.js
components: {
    "projectDetail": Vue.asyncComponent('Project', 'projectDetail', 'Project/projectDetail/projectDetail')
},

//project.html
<project-detail></project-detail>

 　　Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

<div class="itemAddRow clearfix">
    <i>项目名</i>
    <textarea v-model="projectName" placeholder="请输入项目名" style="height:32px;"></textarea>
</div>
<div class="itemAddRow clearfix">
    <i>项目描述</i>
    <textarea v-model="projectDescription" placeholder="请输入项目描述" style="height:150px;"></textarea>
</div>
<div class="itemAddRow clearfix">
    <i>项目状态</i>
    <div>
        <input type="radio" name="projectStatus" value="1" v-model="projectStatus">开发中&nbsp;&nbsp;    
        <input type="radio" name="projectStatus" value="2" v-model="projectStatus">已发布  &nbsp;&nbsp;
        <input type="radio" name="projectStatus" value="3" v-model="projectStatus">稳定&nbsp;&nbsp;
        <input type="radio" name="projectStatus" value="4" v-model="projectStatus">停止维护&nbsp;&nbsp;
    </div>
</div>    

data: function() {
    return {
        projectName:'',
        projectDescription:'',
        projectStatus:1
    }
},
methods: {
    addProject:function(){
        var projectName=this.projectName.trim(),
            projectDescription=this.projectDescription.trim();
        if(projectName==''||projectDescription==''){
            alert('请输入完整的项目信息');
            return;
        }
        var postData={
            name:projectName,
            description:projectDescription,
            status:this.projectStatus,
            userId:this.$conf.userInfo.userId
        };
        var self=this;
        Vue.http.post(this.$conf.API_createProject,postData).then(function(response) {
            var data=response.data;
            if(data.ReturnCode == '0000') {      
　　　　　　　　　//vm.$parent：父实例，如果当前实例有的话              
                self.$parent.$parent.isShowProjectAdd = false;
            }
        });
    }
}

 

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。

1）可以使用 props 把数据传给子组件。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用props选项声明 “prop”。

<!--taskAdd.html-->
<tt-popup top="10px" left="20px">
    <div slot="content">users</div>
</tt-popup>
<!--ttPopup.html-->
<div class="tt-popup" v-bind:style="{top:top,left:left}">
    <slot name="content"></slot>
</div>

 

//app.js
Vue.component('ttPopup', Vue.asyncComponent('Common','ttPopup'));//注册组件
//ttPopup.html
props: ['top','left'],

渲染后：

2）在子组件中使用this.$parent获取父组件实例

 

插件通常会为Vue添加全局功能。

1）Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 

2）通过全局方法 Vue.use(plugin) 使用插件

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

//1，添加实例方法
function plugin(Vue) {
    if(plugin.installed) {
        return;
    }
    Vue.prototype.$conf = conf;
}
if(typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin);
}
//2，添加全局方法或属性
function plugin(Vue) {
    if(plugin.installed) {
        return;
    }
    Vue.asyncComponent = asyncComponent;
}
if(typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin);
}