组件嵌套

  • 全局注册组件

    在main.js中注册

    import User from "@/components/User";

Vue.component("User", User);

  • 局部注册组件

    在App.vue中注册

    <script>
    import User from "@/components/User";

    export default {
        name: 'App',
        components: {
            User
        }
    }
</script>

属性传值props

在Users.vue设置props -- users_data

<script>
    export default {
        name: "User",
        props: ["users_data"]
    }
</script>

# 推荐写法
<script>
    export default {
        name: "User",
        props: {
            users_data: {
                type: Array,
                required: true
            }
        }
    }
</script>

之后在App.vue添加data()

//使用v-bind传值
<users v-bind:users_data="users_data"></users>

data() {
    return {
        users_data: [
            {name: 'Ryu', speciality: 'Vue Components', show: false},
            {name: 'Crystal', speciality: 'HTML Wizardry', show: false},
            {name: 'Hitoshi', speciality: 'Click Events', show: false},
            {name: 'Tango', speciality: 'Conditionals', show: false},
            {name: 'Kami', speciality: 'Webpack', show: false},
            {name: 'Yoshi', speciality: 'Data Diggin', show: false}
        ]
    }
}

事件传值(子传父)

在子组件中定义changeTitle方法

changeTitle: function(){
    this.$emit('changeTitle', 'Vue Ninjas');
}

在父组件定义相对应的方法

<app-header v-on:changeTitle="updateTitle($event)" v-bind:title="title"></app-header>

updateTitle: function (updatedTitle) {
    this.title = updatedTitle;
}

路由

首先在项目路径下安装vue-router

cnpm install vue-router --save-dev

在main.js中注册vue-roter

import VueRouter from "vue-router"
import HelloWorld from "@/components/HelloWorld";
import Home from "@/components/Home";

Vue.use(VueRouter)

// 配置路由
const router = new VueRouter({
    routes: [
        {path: "/", component: Home},
        {path: "/helloworld", component: HelloWorld}
    ],
    mode: "history" //去除url里的#
})

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

在App.vue 下添加

<template>
  <div id="app">
    <ul> <!-- 实现路由跳转，相比于<a>标签无需重载页面 -->
      <li><router-link to="/">Home</router-link> </li>
      <li><router-link to="/helloworld">HelloWord</router-link> </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

请求

安装vue-resource

cnpm install vue-resource --save-dev

main.js配置vue-resource

import VueResource from "vue-resource"

Vue.use(VueResource)

使用

this.$http.get("http://jsonplaceholder.typicode.com/users")
    .then((data) => {
        this.users_data = data.body;
    })

Vue运行配置

module.exports = {
    publicPath: './',   // 根路径  ====》   baseUrl: '/',已废弃
    outputDir: 'dist2', // 构建输出目录文件名打包时生成的名字。
    assetsDir: 'assets',   // 静态资源目录（js，css，img，fonts）
    lintOnSave: false,  // 是否开启eslint保存检测，有效值：true || false || ‘error’
    devServer: {
        open: true,      // 运行项目时，是否自动开启新窗口。
        host: '0.0.0.0',  // 手机测试端口号。//主机名字  locahost 或 127.0.0.0 或 真机测试 0.0.0.0
        port: 8081,     // 默认端口号
        https: false,      // 如果开启就会以https开头。
        hotOnly: false,      //安装模块更好的兼容，不需要配置。
        proxy: {
            // 配置跨域
            '/api': {
                target: 'http://jsonplaceholder.typicode.com/',  // 配置跨域接口
                ws: true,  // 是否跨域。
                changOrigin: true,// 是否跨域。
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

自定义指令

  • 直接在main.js全局配置

    Vue.directive('theme', {
    bind(el, binding) {
        //binding.value -> v-theme:column="'narrow'"
        if (binding.value === 'wide') {
            el.style.maxWidth = "1260px";
        } else if (binding.value === 'narrow') {
            el.style.maxWidth = "560px";
        }

        //binding.arg -> v-theme:column="'narrow'"
        if (binding.arg === 'column') {
            el.style.background = "#6677cc";
            el.style.padding = '20px';
        }
    }
})

  • 在vue组件data里定义

    directives: {
    'rainbow': {
        // eslint-disable-next-line no-unused-vars
        bind(el, binding, vnode) {
            el.style.color = "#" + Math.random().toString(16).slice(2, 8);
        }
    }
}

自定义过滤器

filters: {
    snippet(value) {
        return value.slice(0, 120) + "...";
    }
}

# 使用
{{blog.body | snippet}}

hhhhh