vuejs笔记

使用脚手架vue-cli初始化工程

• 使用npm淘宝源
• npm i -g @vue/cli
• vue create vue-learn
• npm run serve

vue

• 模板语法

  • 模块化
    • 方法
    • 自定义指令
    • 组件
  • 缩写
    • v-bind:href => :href
    • v-on:click => @click

• 计算属性

  • 应用场景：具有依赖关系的数据监听

    computed: function() {
        return this.data1 - this.data2;
    }
    

• 类与样式

  • v-bind:class="[a1, a2]"

  • v-bind:class="obj"
    data() {
        return {
            obj: {
                'class-1': true,
                'class-2': false
            }
        }
    }
    

• 条件和列表渲染

  • if else

  • for

    可以使用template进行for

• 组件

  • props

    • 组件的参数传递

      props: ['age'],
      

  • 双向数据绑定

    • 方式1：父组件监听事件
      子组件

    <template>
    <div>
        <input type="number" placeholder="手机号" @input="handleinputchange">
        <input type="text" placeholder="邮编">
    </div>
    </template>
    
    <script>
    export default {
        methods: {
            handleinputchange(e) {
                this.$emit("change", e.target.value)
            }
        }
    }
    </script>
    

    父组件

    <my-model @change="handleinput"/>
    

    • 方式2：使用v-model
      子组件

    <template>
    <div>
        <input type="text" placeholder="姓名" v-bind:value="myname" @input="handleinput">
        <input type="number" placeholder="年龄">
    </div>
    </template>
    
    <script>
    export default {
        model: {
            prop: "myname",
            event: "change"
        },
        props: {
            myname:String
        },
        methods: {
            handleinput(e) {
                this.$emit("change", e.target.value)
            }
        },
    }
    </script>
    

    父组件

    <my-model1 v-model="model1value"/>
    

  • slot

    • 插槽

      <slot name="header"></slot>
      <slot name="footer"></slot>
      

  • 自定义事件

    • 父子组件的通信方式

    • $emit向父组件发送一个事件，父组件监听该事件

          <button @click="$emit('test', result)">click</button>
      

• 路由（Vue Router）

  • 安装vue router包

    npm i vue-router

  • 编写router.js

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    
    import pageA from './src/pages/a.vue';
    import pageB from './src/pages/b.vue';
    
    Vue.use(VueRouter);
    
    const routers = [
        {
            path: '/pageA',
            component: pageA
        },
        {
            path: '/pageB',
            component: pageB
        }
    ];
    
    const router = new VueRouter({
        routes: routers
    });
    
    export default router;
    

  • 修改main.js

    import Vue from 'vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
      router
    }).$mount('#app')
    

  • 增加vue.config.js配置文件

    module.exports = {
        runtimeCompiler: true
    }
    

  • 在public/index.html中增加

    <div id="app">
        <router-view></router-view>
        <router-link to="/pageA">go to pagea</router-link>
        <router-link to="/pageB">go to pageb</router-link>
    </div>
    

koa2

npm i -g koa-generator

koa2 koa2-learn

npm install