Vue 框架

前言：如何搭建一个Vue项目  

1、安装npm vue服务

1、安装vue-cli：
npm install -g @vue/cli

2、如果安装失败，检测网络，清理npm缓存:
npm chche clean --force

3、检查版本：
vue -V

4、进入到项目根目录：
cd C:\Install Path\Vue\Vue_Study_One

5、创建新项目：
vue create vue_project
	1.选择 Manually select features  (使用数字"1,2"的方式选择)
	2.选择项目需要安装的属性(使用“空格键”选择)
	 Check the features needed for your project:
	 (*) Babel
	 (*) Router
	 (*) Vuex
	 (*) Linter / Formatter
	3.Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)    输入"Y"
	4.Pick a linter / formatter config: (Use arrow keys)
		> ESLint with error prevention only    选择这个(默认第一个)
	5.Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
		>(*) Lint on save      选择这个(默认第一个)
	6. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
		> In package.json     选择这个(默认第二个)
	7.Save this as a preset for future projects? (y/N)    输入"N"
	8.接下来就进入创建项目的过程~~~

6、进入到新项目：
cd vue_project

7、执行编译：
npm run build

8、启动项目：
npm run serve

2、新项目创建成功后，使用pycharm打开，目录结构如下：

main.js  入口的JS文件
router.js  做路由配置的配置文件
store.js  状态管理器的配置文件

 

3、编辑配置文件vue.config.js，并打包

// 配置项目启动的端口号
module.exports = {
    baseUrl: "./",
    devServer: {
        port: 8888,
    }
}

3.1、打包命令 npm run build
3.2、打包后生成dist目录，里面的文件就是发布用到的文件。

3.3、打包完毕后，使用 npm run serve 重启项目，使用 http://localhost:8888/ 端口重新登录页面。

 

4、主要文件介绍

/public/index.html    这个文件是访问 http://localhost:8888/ 看到的页面

/src/views/main.js    这个文件是Vue视图的入口文件

/src/views/App.vue   这个文件是Vue的根组件

 

一、Vue框架内组件的使用

  这里用"父组件内应用子组件"举例

  1.1、在/src/components/目录下新建一个NavBar.vue文件  (1、创建子组件)

<template> <!-- 模板 -->

    <!-- 1、创建一个组件 -->
    <div id="nav-bar">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
    </div>
</template>

<script>
    // export default {}与script标签绑定出现
    export default {
        // 导出该组件的数据，方法，计算，监听，生命周期钩子等
        name: "NavBar"
    }
</script>

<style scoped>
    /*保证样式只适用于组件内部，否则整个页面都会使用*/

</style>

1.2、在/src/App.vue文件内，引用子组件  (2、导入子组件  3、注册子组件  4、使用子组件)

<template>
  <div id="app">
    <!-- 4、使用子组件 -->
    <NavBar></NavBar>     <!-- 这个是应用的子组件 -->
    <router-view/>
  </div>
</template>

<!-- 父组件内引用子组件 -->
<script>
  // 2、导入子组件
  import NavBar from './components/NavBar.vue'
  export default {
      // 3、注册子组件
      components: {
        NavBar  // 原格式为："Nav": Nav
      }
  }
</script>

 

二、路由控制器router

2.1、router.js文件内名称及用途介绍

path： 定义URL的访问路径
	1.path: '/one-view'  一级路由：在跟组件中被渲染，替换跟组件的<router-view/>标签 
	2.path: '/one-view/one-detail',  二级路由:在根组件中被渲染，替换根组件的<router-view/>标签
	
name： 定义别名
	1.name: 'one',   定义别名name的值为 "one"

component: () => import('./views/OneView.vue')： 指定URL访问路径对应的访问文件(这里写绝对路径)

redirect：路由重定向
	1.redirect: '/home'  重定向到'/home'

children: [{}]： 子路由(使用方式如下：)
	children: [{
		path: "show",
		component: () => import('./components/OneShow.vue'),
	}]

2.2、在App.vue组件内，router的用法

1.click事件的应用

<template>
    <div id="one-view">   
        <div class="one-detail" @click="detail">详情</div>
    </div>
</template>

<script>
    export default {
        methods: {
            // 完成router的逻辑转跳(触发@click="detail"时)，转到"/one-view/one-detail"这个页面
            detail () {
                this.$router.push("/one-view/one-detail");  // URL指向
            }
        }
    }
</script>

2.<router-link></router-link> 的应用

<template>
    <div id="nav-bar">
        <!-- router-link在页面上会被渲染成a标签 -->
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>|
        <router-link :to="{name: 'one'}">OneView</router-link>|
        <!-- 这里还可以使用v-bind绑定属性"to"的方式,起一个别名(name: 'one'),那么就会去router.js文件中找(name: 'one')的值 -->
    </div>
</template>

3.<router-view/>的应用 (子路由的应用)

1、在router.js文件中定义子路由
{
    // 二级路由:在根组件中被渲染，替换根组件的<router-view/>标签
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),

    // 子路由(可以有多个子路由)：在所属路由指向的组件中被渲染，替换该组件的<router-view/>标签
    children: [{
        path: "show",
        component: () => import('./components/OneShow.vue'),
    }]
},

2、在子路由的上一级路由(二级路由)指向的文件OneDetail.vue中，定义如下：
<template>
    <div id="one-detail">
        <div @click="back">返回</div>
        <div @click="show">显示</div>
        <div class="box">
            <!-- 会被替换为该路由下的子路由指向的组件 -->
            <router-view/>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            back () {
                // $router采用history方式返回上一级
                this.$router.go(-1)
            },
            show () {
                // $router的逻辑跳转路径
                this.$router.push('/one-view/one-detail/show')
            }
        }
    }
</script>

 

三、状态控制器store.js

 3.1、修改与获取状态控制器store.js中的某个状态值(state内的状态值)

// 状态管理器
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    // 在任何一个组件中，均可以通过this.$store.state.msg访问msg的数据
    // state永远只能拥有一种状态值
    state: {
        msg: "状态管理器"   // msg用来存值
    },

    // 让state拥有多个状态值
    mutations: {
        // 在任何一个组件中，均可以通过this.$store.commit("事件名: setMsg","修改的内容")来修改state中的msg的值
        setMsg(state, new_msg) {   //  mutations会对state进行一次封装，那么在setMsg里面就需要接受"state",new_msg表示接受传入的值
            state.msg = new_msg
        }
    },

    // 让mutations拥有多个状态值
    actions: {

    }
})

 在router.js文件中定义路由

{
    path: "/two-view",
    component: () => import('./views/TwoView.vue'),
},

 在TwoView.vue里面：定义 "获取和修改状态控制器的代码"

<template>
    <div id="two-view">
        <h1>two-view</h1>
        {{msg}}
        <div>
            <button @click="getMsg">获取状态中的值</button>
        </div>
        <div>
            <input type="text" v-model="info">
        </div>
        <div>
            <button @click="setMsg">修改状态中的值</button>
        </div>
        <!--<router-link to="/two-view/two-detail">详情页面</router-link>-->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "two-view",
                info: "",
            }
        },
        methods: {
            // 从状态管理器(store.js)中拿到msg的数据
            getMsg() {
                this.msg = this.$store.state.msg
            },
            setMsg() {
                this.$store.commit("setMsg", this.info)
            }
        }
    }
</script>

<style scoped>

</style>

 

四、vue选择器

<template>
    <div id="two-detail">
        <div @click="divClick" :class="{active: isAble}" ref="div_box">vue选择器</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "",
                isAble: false,
            }
        },
        methods: {
            divClick() {
                this.isAble = !this.isAble;
                // 在vue逻辑中，通过$refs可以获取页面便签(vue的选择器)
                let div = this.$refs.div_box;
                div.style.height = "200px"
            }
        }
    }
</script>

<style scoped>
.active {
    background-color: orange;
}
</style>

 

六、Vue动画  --  transition标签结合v-show|v-if条件指令完成动画

1、在NavBar.vue文件中加入：<router-link to="/three-view">ThreeView</router-link>|

2、在router.js文件中加入路由：{path: "/three-view",component: () => import('./views/ThreeView.vue'),},

3、新建ThreeView.vue文件，编辑代码：

<template>
    <div id="three-view">
        <div class="box">
            <ThreeBox v-for="(v,i) in box_list" :key="i" :val="v"></ThreeBox>
        </div>
        <div>
            <button @click="isShow = !isShow">切换</button>

            <!-- transition标签结合v-show|v-if条件指令完成动画 -->
            <!-- 将要做动画的标签用transition标签嵌套 -->
            <transition name="p_show">
                <p v-show="isShow">P标签</p>
            </transition>
        </div>
    </div>
</template>

<script>
    import ThreeBox from '../components/ThreeBox.vue'
    export default {
        data () {
            return {
                isShow: false,
                box_list: [
                    {
                        title: "苹果",
                        info:"美国公司",
                    },
                    {
                        title: "华为",
                        info:"中国公司",
                    },
                    {
                        title: "诺基亚",
                        info:"诺基亚",
                    },
                                        {
                        title: "苹果",
                        info:"美国公司",
                    },
                    {
                        title: "华为",
                        info:"中国公司",
                    },
                    {
                        title: "诺基亚",
                        info:"诺基亚",
                    },
                ],
            }
        },
        components: {
            ThreeBox,
        },
        name: "ThreeView",
        methods: {

        }
    }
</script>

<style scoped>
    #three-view {
        width: 100%;
        height: 500px;
        background-color: pink;
    }
    .box:after {
        content: '';
        display: block;
        clear: both;
    }
    p   {
        background-color: orange;
    }

    /* 此动画针对于显隐切换 */
    .p_show-enter-active,
    .p_show-leave-active {
        transition: all 1s ease;
    }
    .p_show-enter,
    .p_show-leave-active {
        opacity: 0;
    }

</style>

4、在components目录下新建ThreeBox.vue文件，编辑代码：

<template>
    <div id="three-box" :class="{move: isMove}" @mouseover="moving" @mouseout="moved">
            <h3>{{val.title}}</h3>
            <p>{{val.info}}</p>
    </div>
</template>

<script>
    export default {
        props: ['val'],
        data() {
            return {
                isMove: false
            }
        },
        methods: {
            moving () {
                this.isMove = true;
            },
            moved () {
                this.isMove = false;
            },
        }
    }
</script>

<style scoped>
#three-box {
    width: 120px;
    height: 200px;
    border: 3px solid red;
    float: left;
    transition: .3s;
}
.move {
    transform: translateY(-10px);
}
</style>

  Vue动画实现效果：

 

七、Vue插槽

1、编辑FourView.vue

<template>
    <div id="four-view">
        <FourBox>
            <!-- 子组件只是需要渲染父组件的内容，可以通过插槽实现数据的传递 -->
            <!-- 父组件写在子组件标签内部，用全局属性slot与子组件内部插槽name属性一一对应 -->
            <div slot="st" @click="divClick">
                <span>{{msg}}</span>
                <span>{{msg}}</span>
            </div>
        </FourBox>
    </div>
</template>

<script>
    import FourBox from '../components/FourBox.vue'
    export default {
        data () {
            return {
                msg: "four 信息"
            }
        },
        components: {
            FourBox
        },
        methods: {
            divClick() {
                this.msg = "插槽信息"
            }
        },
    }
</script>

<style scoped>

</style>

2、编辑FourBox.vue

<template>
    <div id="four-box">
        <slot name="st">插槽</slot>
    </div>
</template>

<script>
    export default {
        name: "FourBox"
    }
</script>

<style scoped>
</style>