一、基本概念

        Vue 是一套构建用户界面的渐进式框架。Vue 只关注视图层 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、基础语法

        每个 Vue 应用都需要通过实例化 Vue 来实现。

<div id="div">
    <h1>This is a data:{{data}}</h1>
    <h1>This is a method:{{method()}}</h1>
</div>


<script>
    //创建vue实例需要传入配置对象el指定一个元素作为容器data保存需要的数据methods定义函数
    //在html标签体中使用vue中的数据需要{{}}来引用{{}}内可以写vue数据和js表达式
    const vue = new Vue({
        el:"#div",
        data:{
            data:val,
            ...
        },
        methods:{
            method(){
            },
            ...       
        },
        ...
    });
</script>

三、模板语法

        Vue 使用了基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

    <div id="div">

        <!-- v-text:插入文本 -->
        <div v-text="text"></div>

        <!-- v-html:插入html代码 -->
        <div v-html="html"></div>

        <!-- v-bind:在html标签属性上使用vue的数据或js表达式 -->
        <div :class="bind">This is v-bind</div>
        <!-- 样式绑定 -->
        <div :class="css">This is css</div>
        <div :style="style">This is style</div>


        <!-- v-model:实现html和vue双向数据绑定只能用在表单类元素上 -->
        <input type="text" v-model="model">
        
        <!-- v-on:绑定事件 -->
        <!-- 事件修饰符:stop阻止冒泡prevent阻止默认事件once只触发一次 -->
        <input type="button" value="v-on" @click="click">
        <input type="text" @keyup="keyup">

        <!-- v-once:只做一次渲染 -->
        <div v-once>This is {{once}}</div>

        <!-- v-show:是否渲染 -->
        <div v-show="true">This is {{show}}</div>

        <!-- v-if:判断是否插入元素 -->
        <div v-if="v_if">if</div>
        <div v-else>else</div>

        <!-- v-for:遍历数组或对象 -->
        <ul>
            <li v-for="(value,index) in arr">
              {{index+1}}:{{ value }}
            </li>
        </ul>
        <ul>
            <li v-for="(value,key,index) in obj">
              {{index+1}}:{{key}}:{{value}}
            </li>
        </ul>

    </div>


    <script>
       
        const vue=new Vue({
            el:"#div",
            data:{
                text:"<h1>v-text</h1>",
                html:"<h1>v-html</h1>",
                bind:"v-bind",
                css:{css1:true,css2:false},
                style:{color:"red"},
                model:"v-model",
                once:"v-once",
                show:"v-show",
                v_if:true,
                arr: ["a","b"],
                obj:{a:"a",b:"b"},
            },
            methods:{
                click(){alert("click");},
                keyup(e){alert("keyup:"+e.key);},
            },

        });
        
    </script>

四、计算属性

        computed 内部定义一些需要复杂运算才能获取的属性computed 是基于它的依赖缓存只有相关依赖发生改变时才会重新取值。而使用 methods 在重新渲染的时候函数总会重新调用执行。

computed:{
    //默认只提供get方法
    compute1(){},
    //设置get和set方法
    compute2:{
        get(){},
        set(value){},
    },
},
        

五、监听属性

watch:{
    //普通监听
    watch1(newVal,oldVal){},
    watch2:{
        //初始化是否监听
        immediate:true,
        //watch默认不监听对象内部属性变化,需要手动开启
        deep:true,
        handler(newVal,oldVal){},
    }
},

六、过滤器

filters:{
    //调用{{xxx | filter}}
    filter(value){},
},

七、自定义指令

directives:{
    //默认为bind和update
    //指令名格式v-xxx-xxx
    directive1(element,bind){},
    //设置不同时机的调用函数
    directive2:{
        bind(element,bind){},
        inserted(element,bind){},
        update(element,bind){},
    }
},

八、生命周期

beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},//进行初始化操作
beforeUpdate(){},
updated(){},
beforeDestroy(){},//进行结尾工作
destroyed(){},

九、组件

        组件Component是 Vue 最强大的功能之一。组件可以扩展 HTML 元素封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用几乎任意类型的应用的界面都可以抽象为一个组件树。

        方式一

//定义组件
let component={
    name:"component",
    template:`
        <div>This is {{template}}</div>
    `,
    data(){return{
        template:"template"
    }},
    methods:{},
    ...
};

//在vue中注册组件,使用时直接按名字写为标签形式
components:{
    component,
    ...
}

        方式二创建.vue文件

<template>
<!-- 这里写模板 -->
<!-- 由ref属性代替id,方法中通过this.$refs.ref获取DOM对象或者组件实例对象 -->
    <div ref="ref">This is {{template}}</div>
<!-- 父组件通过slot属性将元素放入指定插槽 -->
    <slot name="name">This is default</slot>
</template>

<script>
// 这里写组件配置
export default{
    name:"component",
    data(){return{
        template:"template"
    }},
    // props接受外部参数,有两种方式
    // props:[params,...],
    props:{
        params:{
            type:         //接收值类型
            required:     //是否必需
            default:      //默认值
        },
        ...
    },
    ...
}
</script>

<style scoped>
/* 这里写局部样式 */
</style>

十、自定义事件

//在父组件中,指定子组件触发事件后的回调函数,function应在methods中定义或者为箭头函数
vc.$on("event",function);

//在子组件方法内部触发事件
vc.$emit("event",params,...);

//解除触发事件的回调函数
vc.$off("event");

十一、全局事件总线

//设置全局事件总线$bus
beforeCreate(){
    Vue.prototype.$bus=this;
}

//在组件中设置事件回调
this.$bus.$on("event",function);

//在组件中触发事件
this.$bus.$emit("event",params...);

//在组件中取消事件回调
this.$bus.$off("event");

十二、Vue脚手架

        Vue-cli 它是一个专门为单页面SPA应用快速搭建繁杂的脚手架它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构vue和webpack的项目模板。

        下载

npm install -g @vue/cli

        创建项目

vue create project

        运行项目

npm run serve

十三、Vuex

        Vuex 的作用就是解决频繁、大范围的数据共享问题是Vue官方提供的独立于组件体系之外的管理公共数据的工具。

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);

//存储共享数据
const state={
    data,
};

//类似于computed计算属性
const getters={
    getterData(state){},

};

//处理数据,前置操作
const actions={
    action(context,value){
        ...
        context.commit("ACTION",value);
    },
};

//修改数据
const mutations={
    ACTION(state,value){},
};


export default new Vuex.Store({
    state,
    actions,
    mutations,
    getters,
    
})

        在每个 Vue 组件中可以通过 this.$store.state.xxx 全局数据名称 store 中的数据。

//访问数据
this.$store.state.data;
this.$store.getters.getterData;
//处理数据
this.$store.dispatch("action",value);
this.$store.commit("ACTION",value);



//简化外部访问和调用,将其直接配置到当前组件上
import {mapState,mapGetters,mapActions,mapMutations} from "vuex"

computed:{
    //通过对象解构生成计算属性
    ...mapState(["data",...]),
    ...mapGetters(["getterData",...]),

},

//需要在绑定事件时传参
methods:{
    ...mapActions(["action",...]),
    ...mapMutations(["ACTION",...]),

},

        Vuex 用modules来拆分复杂业务。

export default new Vuex.Store({
    //公共数据及处理操作
    state,
    getters,
    actions,
    mutations,
    //拆分为多个文件模块分别引入
    modules:{
        module:{
            namespaced:true,//开启命名空间
            state,
            getters,
            actions,
            mutations,
        },
        ...
    },
    
})

//访问数据
this.$store.state.module.data;
this.$store.getters["module/getterData"];
//处理数据
this.$store.dispatch("module/action",value);
this.$store.commit("module/ACTION",value);


//简化
import {mapState,mapGetters,mapActions,mapMutations} from "vuex"

computed:{
    //通过对象解构生成计算属性
    ...mapState("module",["data",...]),
    ...mapGetters("module",["getterData",...]),

},

//需要在绑定事件时传参
methods:{
    ...mapActions("module",["action",...]),
    ...mapMutations("module",["ACTION",...]),

},

十四、Vue路由

        Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用single page web applicationSPA。

//路由配置,需要引入其他组件
import VueRouter from "vue-router";
export default new VueRouter({
    routes:[
        {
            path:"/path",
            component:"component",
            meta:{},//自定义信息
            children:[
                {
                    path:"path",
                    component:"component",
                    //简化参数引用,在组件props中获取
                    props($route){return {key:val,...};}
                },
            ],
        },
        ...
    ],
});


//组件展示
<router-view></router-view>


//路由导航
<router-link to="/path"></router-link>

//多级路由需要完整路径
<router-link to="/path/path"></router-link>

//路由传参,通过this.$route.query.xxx引用
<router-link :to="{
    path:"/path",
    query:{params,...},
}"></router-link>

        除上面的方法外可以不借助<router-link>标签实现路由

this.$router.push({
    path:"/path",
    query:{params,...}
});

this.$router.back();//后退
this.$router.forward();//前进

        在跳转路由时需要缓存组件上的信息。

//默认全部缓存
<keep-alive include="">
    <router-view></router-view>
</keep-alive>

        路由组件会有两个新的生命周期阶段

activated(){}
deactivated(){}

        路由守卫

//全局前置守卫
router.beforeEach((to,from,next)=>{
    ...
    next();//放行
});
//全局后置守卫
router.afterEach((to,from)=>{});


//组件内守卫,经路由进入或离开时触发
beforeRouteEnter(to,from,next)=>{
    ...
    next();//放行
}
beforeRouteLeave(to,from,next)=>{
    ...
    next();//放行
}