VUE基础知识点回顾

最新推荐文章于 2022-12-26 23:49:44 发布

但求上进

最新推荐文章于 2022-12-26 23:49:44 发布

阅读量435

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/ptGrapes/article/details/109105640

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、什么是VUE？

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。

二、MVVM模式

我们知道在后端的常见的架构模式是MVC模式，在前后端分离的时代，前端后端各司其职，前端三大热门框架之一的Vue的架构模式，采用的即是MVVM模式。
M：Model层
V：View层
VM：ViewModel视图模型层，将View和Model进行双向绑定，实现了 DOM 监听，当 DOM 发生一些事件时（点击、滚动等），可以监听到，并在需要的情况下改变对应的 Data

三、VUE的第一行代码hello vue！

第一步：引入Vue.JS:<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第二步：新建一个vue对象，操作页面DOM元素
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}//类似于EL表达式${}获取数据
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: "#app",//element元素，操作id为app的DOM元素
        data:{//model层：数据
            message: "hello vue!"
        }
    });
</script>
</body>
</html>

四、VUE的基本语法

v-if

<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>V-if</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",//element元素，获取对应的组件
        data:{//model层：数据
            type: "A"//名称: 值
        }
    });
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<script>
    var vm = new Vue({
        el: "#app",//element元素，获取对应的组件
        data:{//model层：数据
            items: [
                {message: '你好'},
                {message: 'java'},
                {message: '!'},
            ]
        }
    });
</script>
</body>
</html>

结果展示：
在这里插入图片描述

V-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
    //v-on绑定事件
    
    <button v-on:click="sayHi">点我！</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",//element元素，获取对应的组件
        data:{
            message: "hello vue!"
        },
        methods: {//方法必须定义在Vue的methods对象中
        sayHi: function(){
                alert(this.message);
            }
        }
    });
</script>

</body>
</html>

结果展示：
在这里插入图片描述

在表单中使用双向绑定

可以通过v-model指令在表单元素input,textarea,select元素上创建双向数据绑定。它会根据控件类型自动选取正确方法更新元素。值得注意的是！，通过v-model进行双向绑定会忽略所有表单元素的select，checked，value特性的初始值而使用vue实例中的data里面的值作为数据源。

单选框：

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
//使用v-model进行双向绑定忽略初始值
    <input type="radio" v-model="sex" name="gender" value="男">男
    <input type="radio" v-model="sex" name="gender" value="女">女

    <p>
        您选中的是：{{sex}}
    </p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            sex: ''//默认初始值为空
        }
    });

</script>
</body>
</html>

下拉框：

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<hr>

<div id="app2">
    下拉框：<br>
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的值是: {{ selected }}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app2",
        data: {
            selected: ''
        }
    });
</script>
</body>
</html>

过滤器

使用场景：插值表达式{{}}和v-bind中使用
使用方式：{{ name | 过滤器的名称 }}

<!--html代码块-->
<p>
  {{msg | Myfilter}}
</p>
<!--script代码-->
Vue.filter('Myfilter',function (msg) {
        return msg + '测试'
    })

注意，这里使用过滤器的时候，function里的参数必须和Vue实例对象里data中的自定义参数名相同，对谁过滤，参数名就写谁，如：

<!--日期格式过滤器转换-->
 Vue.filter('dataFormat',function (dataStr,pattern) {
        var dt = new Date(dataStr);
        //yyyy-mm-dd
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDay();

        //return `${y}-${m}-${d}`
<!--因为有可能用户不传参数pattern，所以这里通过&&判定情况-->
        if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
            return `${y}-${m}-${d}`
        }else{
            var h = dt.getHours();
            var min = dt.getMinutes();
            var s = dt.getSeconds();

            return `${y}-${m}-${d} ${h}:${min}:${s}`
        }
    })

按键修饰符

@keyup.enter=“自定义方法”
相关的修饰符还有：
.tab
.delete
.esc
.space
.up
.down
.left
.right

自定义全局指令

通过Vue.directive(参数一,参数二)。其中参数一是自定义指令的名称，在这里不用加v-，但是在调用的时候需要加上v-前缀来调用。参数二是一个对象，对象有一些指令相关函数，可以在特定的阶段执行特定的操作
常用的三个函数有
bind：常用在样式里
inserted：常用在和js有关的的操作中执行
updated

<!--自定义指令html-->
<input type="text" v-model="name" @keyup.enter="add" v-style>
<!--自定义指令script-->
Vue.directive('style',{
        bind: function (e1) {
            e1.style.color = 'red'
        }
    });

相关的钩子函数：

但是，假如我们只想绑定bind和update钩子函数，除了这两个函数其他的函数我不要，可以这样写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-runoob="{ color: 'green', text: '自定义指令!' }"></div>
</div>

<script>
<!--直接通过function绑定bind和update-->
Vue.directive('runoob', function (el, binding) {
	// 简写方式设置文本及背景颜色
	el.innerHTML = '我的value是====>'+binding.value.text+'</br>'+'我的name是====>'+binding.name+'</br>'+'我的expression是====>'+binding.expression
	el.style.backgroundColor = binding.value.color
})
new Vue({
  el: '#app'
})
</script>
</body>
</html>

输出结果：
在这里插入图片描述

Vue组件–自定义标签

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <!--自定义组件名gdpu，本质上就是<li>{{gdpu}}</li>,通过组件的形式实现了代码复用。注意！！组件名不能有大写，
    因为HTML中的attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，
    这就意味着在使用DOM模板的时候，需要将props的驼峰命名法，在html中转换成短横线命名法-->
    <!--v-bind:形参名="实参"，绑定数据来源-->
    <gdpu1 v-for="items in message" v-bind:gdpu="items">

    </gdpu1>
    <login></login>
</div>

<div id="app2">
    <login></login>
</div>


<script>
    //定义自定义名为gdpu1的组件
    Vue.component("gdpu1",{
        //通过props接收形参名为gdpu的参数，通过{{}}展示数据
        props: [
            'gdpu'
        ],
        template: '<li>{{gdpu}}</li>'
    });

	//定义私有的组件，只有app2能使用
    var vm1 = new Vue({
        el: "#app2",
        data: {
            msg: '这是vm1实例'
        },
        components:{
            login: {
                template: '<h3>这是私有组件</h3>'
            }
        }
    })


    var vm = new Vue({
        el: "#app",
        data:{
            message: ["java","c","Linux"]
        }
    });

</script>
</body>
</html>

Vue的生命周期

1、 beforeCreate生命周期函数执行的时候，data和methods中的数据都还没被初始化。----我们的Vue实例被实例化之前会先执行这个函数的操作
2、created生命周期函数中，data和methods中的数据已经初始化好了
3、beforeMount生命周期函数，模板已经加载到DOM内存中，但是还没渲染到页面
4、mounted生命周期函数，内存中的模板，已经渲染到页面了。是实例创建期间的最后一个生命周期函数。mounted执行完表示整个Vue实例已经初始化完毕。进入到运行阶段
5、beforeUpdate生命周期函数中数据被更新了，即data的数据更新了，但是界面还没有被更新。界面的数据还是旧的
6、update生命周期函数中data的数据更新反映到界面上了。

组件中的Data

组件中可以有自己的data，但是该data必须是以return的形式返回，如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <my-Com></my-Com>
</div>

<script type="text/javascript">

    Vue.component('myCom',{
        template: '<h1>这是自定义的模板--{{msg}}</h1>',
        data: function(){
            return  {
                msg: '这是组件data里面的msg'
            }
        }
    })

    var vm = new Vue({
        el: "#app",//element元素，获取对应的组件
        data:{}
    });
</script>
</body>
</html>

Axios异步通信

附：远程调用接口链接地址
http://www.liulongbin.top:3005/api/getlunbo

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!--引入bootstrap样式-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--导入在线的axios插件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Name:
                    <input type="text" v-model="name" @keyup.enter="add">
                </label>
                <!--使用事件绑定机制，如果加了括号就可以进行传参-->
                <input type="button" value="添加" class="btn-primary" @click="add">

            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <th>Id</th>
                <th>Url</th>
                <th>Img</th>
                <th>Operation</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="item in list" :key="item.id">
                <td>
                    {{ item.id }}
                </td>
                <td>
                    {{ item.url }}
                </td>
                <td>
                    {{item.img}}
                </td>
                <td>
                    <!--阻止默认事件-->
                    <a href="" @click.prevent="del(item.id)">删除</a>
                </td>
            </tr>
            </tbody>

        </table>

    </div>


<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data(){
            //返回数据，请求的返回参数必须和json字符串的一样
            return {
                list: [{
                    id: null,url: null,img: null
                }],
                name: ''
            }
        },
        methods: {
            add(){

            }
        },
        //钩子函数初始化数据，这里有个坑得注意，如果我们这里不是使用的箭头函数，
        //那么我们如果通过this调用的时候，this.list默认的是调用的mounted生命周期函数对象里面的这个this，
        //而不是我们Vue实例，因此会造成初始化不了的结果
                mounted(){
                /*箭头函数的写法
               			 axios
                        .get('http://www.liulongbin.top:3005/api/getlunbo')//链式函数，得到数据然后响应,ES6新特新=>
                        .then(response => (this.list = response.data.message))*/
                    _this = this;
                    axios
                        .get('http://www.liulongbin.top:3005/api/getlunbo')//链式函数，得到数据然后响应,ES6新特新=>
                        .then(function (response) {
                            if(response.data.status==0){
                                alert("数据获取成功")
                                _this.list = response.data.message
                    }

                })
        }
    });
</script>

</body>
</html>

计算属性

能够通过方法执行将计算的结果结果缓存起来变为自己的属性储存到内存中。这是一个属性！不是一个方法。

代码示例：

html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">

    <p>
        <!--method调用的是方法，需要加括号-->
        methods:{{currentTime1()}}<br>
        <!--计算属性是属性，无需加括号,currentTime2 is not a function-->
        computed:{{currentTime2}}
    </p>

</div>
<script type="text/javascript">

    var vm = new Vue({
        el: "#app",
        methods: {
            currentTime1: function () {
                return new Date();//返回当前时间戳
            }
        },
        computed: {
            currentTime2: function () {
                return new Date();//返回当前时间戳
            }
        }
    });

</script>
</body>
</html>

插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>


<div id="vue">
    <todo>
        <!--使用插槽的形式，将名字为todo-title的组件插在此处-->
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--将名字为todo-items的组件插在此处，通过v-bind的简写：绑定数据，传数据给名为todo-items的组件-->
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

<script type="text/javascript">
    //定义名为todo的组件，其中slot插槽处绑定下面的两个组件
    Vue.component('todo', {
        template: '<div>\
                        <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
               </div>'
    });

    //定义名为todo-list的组件
    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    //定义名为todo-items的组件
    Vue.component('todo-items', {
        //接收参数，动态显示数据
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    //5、设置遍历列表的数据
    var vm = new Vue({
        el: '#vue',
        data: {
            title: 'vue',
            todoItems: ['java', '世界上', '最好的语言']
        }
    });
</script>
</body>
</html>

自定义事件分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text11</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>


<div id="vue">
    <todo>
        <!--使用插槽的形式，将名字为todo-title的组件插在此处-->
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--将名字为todo-items的组件插在此处，此处的内容需要先绑定数据，再遍历数据-->
        <!--增加了 v-on:remove="removeTodoItems(index)" 自定义事件，该事件会调用 Vue 实例中定义的名为 removeTodoItems 的方法-->
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    v-bind:item="item" v-bind:index="index" :key="index"
                    v-on:remove="removeTodoItems(index)"></todo-items>
    </todo>
</div>

<script type="text/javascript">
    //1、设置数据打印的格式
    Vue.component('todo', {
        template: '<div>\
                        <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
               </div>'
    });

    //2、设置标题的数据
    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    //3、设置列表的数据
    //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
    Vue.component('todo-items', {
        props: ['item', 'index'],
        template: '<li>{{index + 1}}. {{item}}  <button @click="remove_component">删除</button></li>',
        methods: {
            remove_component: function (index) {
                // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
                this.$emit('remove', index);
            }
        }
    });

    //4、设置遍历列表的数据
    var vm = new Vue({
        el: '#vue',
        data: {
            title: 'vue',
            todoItems: ['java', '世界上', '最好的语言']
        },
        methods: {
            // 该方法可以被模板中自定义事件触发
            removeTodoItems: function (index) {
                console.log("删除 " + this.todoItems[index] + " 成功");
                // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中 index 为添加/删除项目的位置，1 表示删除的数量
                this.todoItems.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>

五、第一个Vue-cli项目

第一步、
随便创建个文件夹，打开cmd命令符，进入到该文件夹的目录下。例如我创建的文件夹是在E盘的目录下

第二步、
输入如下代码：
vue init webpack myvue
创建一个基于webpack的vue程序，myvue这里是我么vue项目名字，这个可以填自己想要的名字。
第三步、
一路选no即可，默认选择第一项，这些不重要后面可以改，或者根据自己的需求在这里添加自己想要的也行。
第四步、
这个时候自己创建的文件夹下就会发现已经多了一个名为myvue的项目

第五步、
在cmd下进入myvue项目，通过cd命令符进入myvue项目

cd myvue（自己的项目名称）
并且安装npm环境
npm install

第六步、
启动IDEA后，打开这个vue项目，在cmd下输入
npm start
启动Vue项目，或者通过IDEA打开之后，在控制台输入npm start也可以启动该项目

但是通过IDEA启动该项目可能运行不了，这可能是权限不足，我们只需要找到IDEA的快捷方式，右键设置属性，开启以管理员方式启动即可。

第七步、
启动之后，默认端口号为8080，在浏览器输入localhost：8080，出现以下页面表示成功，至此第一个vue-cli项目就创建完成！

最后如果要停止该项目，只需要Ctrl+C后，属于Y即可停止该项目

六、Webpack学习使用：

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle.
作用：
webpack可以在打包代码的同时实现ES6版本的转换到ES5版本，从而兼容所有浏览器，因为大部分浏览器用的还是ES5的规范。

安装

webpack的安装其实也很简单，通过cmd命令行，分别输入npm install webpack -g和npm install webpack -cli -g即可：

安装成功后我们输入webpack -v,如果显示了版本信息，则为安装成功。

配置

创建webpack.config.js 配置文件：
entry:入口文件，指定WebPack用哪个文件作为项目的入口
output:输出，指定WebPack把处理完成的文件放置到指定路径
module:模块，用于处理各种类型的文件
plugins:插件，如:热更新、代码重用等
resolve:设置路径指向
watch:监听，用于设置文件改动后直接打包(热部署 webpack --watch)

使用

第一步、
新建一个空的文件夹，用IDEA打开，这个项目就被IDEA接管了。

现在这个项目什么都没有，只有一些IDEA自己的配置文件。
第二步、
我们仿照vue的目录结构，新建一个modules(模块)文件夹，并自己写两个js文件，一个是自定义js，一个是main.js(程序的主入口)用来引入。如：

第三步、
打包程序，创建webpack.config.js 配置文件。

此时我们在控制台输入webpack进行打包，打包完之后我们会发现项目多了一个dist文件夹，如上如所示。
第四步、
我们新建一个index.html来测试下效果，只需引入我们的bundle.js即可。

运行结果：

七、Vue Router路由

使用Vue Router

还是这张图
由于我们在新建我们的vue项目的时候，在router这里我们选择的是不安装路由，因此在我们的开发模块modules下是没有vue router这个模块的，因此我们想使用模块，我们得先安装模块。
第一步、安装路由
npm install vue-router --save-dev–save-dev的意思是安装并把配置写入到dev

如果提示报错的话，根据它的提示Fix就可以了，出现added 1 package from 1 contributor 则说明添加成功，此时modules文件夹下已经出现了vue router的模块。
第二步、自定义组件
在src目录下新建一个components文件夹，新建vue component。在这里我新建了两个最基本的组件，没有内容。组件内部只有一个h1标签。

第三步、配置路由
我们在src目录下新建一个router的文件夹，并在里面新建一个index.js文件(相当于路由的配置文件)，并配置相关信息：
导入modules里面的vue-router组件
import Router(名字随便) from "vue-router";
导入Vue组件
import Vue from 'vue';
导入了路由之后，我们得显式调用路由
Vue.use(Router);
导入自定义组件，供路由调用
import Content from "../components/Content";
import Main from "../components/Main";
为了让别的组件能使用路由，我们得将组件暴露
export default new Router({});
下面展示完整的演示代码
第四步、在主入口程序main.js导入我们配置的路由
import router from './router/index.js';
这里的index.js可以不写，但是仅限于我们的路由配置文件名是index才可以不写
随后在Vue实例中配置使用路由，如图所示：使用的时候一定要注意，vue实例里面的路由只能是router，因为它只有router这个参数，如果用自己定义的名称则会报错。

最后一步、我们使用路由就可以啦
<router-link to="/main">相当于a 标签的src
<router-view></router-view>展示试图

效果展示：

八、Vue+ElementUI

第一步、创建一个vue项目
vue init webpack vue-elementui
第二步、进入工程目录，安装依赖，我们需要安装vue-router、 element-ui、 sass-loader和node-sass四个插件
安装路由
npm install vue-router --save-dev
安装elementUI
npm i element-ui - S
安装依赖
npm insta1l
安装SASS加载器
cnpm install sass-loader node-sass --save-dev
启动项目
npm start

第三步、自定义组件
这里我从官网ElementUI找的随便一个登陆组件：

Login.Vue登陆组件:

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    export  default {
        name:"Login",
        data(){
            return {
                form:{
                    username: '',
                    password: ''
                },
                //表单验证，需要再el-form-item 元素中增加prop属性
                rules:{
                    username:[
            {required:true,message:'账号不能为空',trigger:'blur'}
                    ],
            password: [
            {required: true,message: '密码不能为空',trigger:'blur'}
          ]
        },
            //对话框显示和隐藏
            dialogVisible:false
        }
        },
        methods:{
            onSubmit(formName) {
                //为表单绑定验证功能
                this.$refs [formName].validate((valid) =>{
                    if (valid){
                        //使用 vue-router路由到指定页面，该方式称之为编程式导航
                        this.$router.push("/main");
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
  .login-box{
    border: 1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding:35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow:0 0 25px #909399;
  }

  .login-title{
    text-align:center;
    margin:0 auto 40px auto;
    color:#303133;
  }
</style>

第四步、剩下的步骤就和配置路由的步骤差不多了，直接上代码
index.js路由配置文件

main.js主程序入口文件
这里相比于前面的步骤，多了引入ElementUi的步骤
使用ElementUI
Vue.use(ElementUI);
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
自动渲染ElementUI样式
render: h => h(App)

最后，npm start展示就好啦

但是小伙伴们可能会中途遇到些问题爆红，例如
less--Module build failed: TypeError: loaderContext.getResolve is not a function
这个很多时候是因为我们的sass版本过高而引起的问题，我们只需要降低sass版本即可。这里我是降低成了7.3.1完美运行，降低版本后别忘记重新npm install哦，不然不会生效的

大功告成！

九、嵌套路由

顾名思义，就是在路由里面继续使用路由。在Vue中如果我们得实现诸如导航栏不变侧边栏不变，通过点击事件更改主题内容，那么我们就可以通过嵌套路由来实现。因为不使用嵌套路由，一个路由就只有一个<router-view>，整个页面(组件)是一个路由。
代码示例：

在上面代码的基础上，我们这次修改main主页
Main.Vue:

<template>
<div>
<el-container>
  <el-aside width="200px">
    <el-menu :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
            <!--router-link表示要展示的资源地址，通过下面的router-view回显页面-->
            <router-link to="/user/profile">个人信息</router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link to="/user/list">用户列表</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
        <e1-menu-item-group>
          <el-menu-item index="2-1">分类管理</el-menu-item>
          <el-menu-item index="2-2">内容列表</el-menu-item>
        </e1-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>

  <el-container>
    <el-header style="text-align: right; font-size: 12px; background-color: #96c2ff">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right:15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!--展示效果在主题窗口这里展示-->
    <el-main>
      <router-view></router-view>
    </el-main>

  </el-container>
</el-container>
</div>
</template>

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

<style scoped lang="scss">
  .el-header {
    .el-header {
      backdrop-color: #008c8c;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      color: #333;
    }
  }
</style>

然后我们新建一个user文件夹，存放两个测试组件，分别叫个人信息和用户列表，并在index.js中嵌套路由

这个时候我们的嵌套就已经完成了，我们看看效果：
点击个人信息：
点击用户列表:

十、参数传递以及重定向

由于参数传递改变的代码不多，因此直接铁改动过的代码，代码主体还是上面的代码，参数传递的主要一个流程就是Main给路由传递参数，通过params属性，路由通过/:接收属性，最后在相关页面通过{{$}}获取参数即可，直接贴代码：
Main.vue:

index.js路由：

跳转的组件：

结果展示：

第二种方式，通过props参数传递实现解耦：
我们只需要在路由处通过设置props: true，然后在跳转的组件中添加props属性，即可使用第二种方式传递参数，如图所示，我们只需要加上如下变化：

重定向的实现：
只需要在路由中配置redirect: '路径名'，然后在相关页面引用路由即可。

十一、404和钩子函数

配置404页面：

配置404页面其实很简单，我们只需要自定义一个页面(组件)，在路由index.js中引入这个组件并配置路由即可：
匹配*表示如果不满足之前的路由规则，就走404页面

路由钩子和异步请求：

进入路由之前：
beforeRouteEnter(to,from,next):
进入路由之后：
beforeRouteLeave(to,from,next):
● to:路由将要跳转的路径信息
● from:路径跳转前的路径信息
● next: 路由的控制参数
● next()跳入下一个页面
● next(’/path’)改变路由的跳转方向，使其跳到另一个路由
● next(false) 返回原来的页面
● next((vm)=> {})仅在beforeRouteEnter中可用，vm是组件实例
如：

安装axios异步调用

安装axios异步调用模块：
cnpm install axios -s
路由文件引入模块：
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(axios);
Vue.use(VueAxios,axios);

测试使用axios：
新建mock目录存放测试数据
配置钩子函数，加载组件之前调用数据：
结果如下：

附：钩子代码

<script>
    export default {
        props: ['id'],
        name: "Profile",
        //过滤器
        beforeRouteEnter:(to,from,next)=>{
        console.log("进入之前");//加载数据
        // 进入路由之前执行getData
            next(vm=>{
                vm.getData();
            });
        },
        beforeRouteLeave:(to, from, next)=>{
        console.log("进入之后");
        },
        methods:{
            getData: function () {
                this.axios({
                  method: 'get',
                  url: 'http://localhost:8080/static/mock/data.json'
                }).then(function (response) {
                    console.log(response);
                });
            }
        }
    }
</script>

十二、补充几个JS的方法

list.some&&list.splice

只要找到一个符合条件的就会返回true。如删除功能删除指定列可以用这个方法。

 del(id) {
                //找到索引
                this.list.some((item,i)=>{
                    if(item.id = id){
                        //数组的some方法中，如果return true，就会立即终止这个数组的后续循环
                        //找到索引之后调用数组splice方法,从索引位置开始删除，删除多少个单位，第三个参数可以选择新增一个新元素替代其他元素
                        this.list.splice(i,1)
                        return true;
                    }
                })
            }

list.findIndex

找到对应的下标索引

var index = this.list.findIndex(item=>{
                   if(item.id = id){
                       return true;
                   }
               })
                this.list.splice(index,1);

但求上进

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础知识点回顾

一、什么是VUE？Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。二、MVVM模式我们知道在后端的常见的架构模式是MVC模式，在前后端分离的时代，前端后端各司其职，前端三大热门框架之一的Vue的架构模式，采用的即是MVVM模式。M：Model层V：View层VM：ViewModel视图模型层，将View和Model进行双向绑定，实现了 DOM 监听，当 DOM 发生一些事件时（点击、滚动等），可以监听到
复制链接

扫一扫