前端基础学习笔记4-VUE

已于 2022-02-23 15:09:52 修改
阅读量545 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端
于 2022-02-23 15:07:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoliaoliaoo/article/details/123090526
版权

VUE

1、简介

  • Vue是一款前端渐进式框架，可以提高前端开发效率
  • Vue遵循SoC关注度分离原则
  • Vue通过MVVM设计模式，能够实现视图与模型的双向绑定
    • 双向绑定：即数据变化时视图会自动刷新，视图变化时数据也会自动变化
    • MVVM设计模式：
      • Model：模型层， 在这里表示JavaScript对象
      • View：视图层， 在这里表示DOM(HTML操作的元素)
      • ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

2、第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
<!--    将数据绑定到页面元素-->
    {{message}}
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--vue实例-->
<script>
    var vm = new Vue({
        //元素，id='app'
        el:"#app",
        //Model层：数据对象
        data:{
            //属性
            message:"hello,vue"
        }
    })
</script>

</body>
</html>

浏览器控制台输入app.message='值’可以更新页面数据

3、vue基本指令

3.1、v-bind声明

简写冒号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    v-vind指令可以绑定元素attribute-->
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
</script>

</body>
</html>

3.2、v-if、v-else、v-else-if条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--    v-if、v-else条件判断-->
    <span v-if="type==='A'">A</span>
    <span v-else-if="type==='B'">B</span>
    <span v-else>C</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'A'
        }
    })
</script>

</body>
</html>

3.3、v-for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            items:[
                {message:'数组对象1'},
                {message:'数组对象2'},
                {message:'数组对象3'},
            ]
        }
    })
</script>

</body>
</html>

3.4、v-on事件监听

简写@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    v-on监听事件-->
    <button v-on:click="sayHi">点击事件绑定</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"hello,vue"
        },
        methods:{//方法必须定义在vue的method中
            sayHi:function (event) {
                //this在方法里面指向当前Vue实例
                alert(this.message)
            }
        }
    })
</script>

</body>
</html>

3.5、v-model双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    {{}}绑定属性-->
    <p>{{message}}</p>
<!--    v-model双向绑定，input：text-->
    <input type="text" v-model="message">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"hello,vue"
        }
    })
</script>

</body>
</html>

4、vue表单双向绑定

4.1、input-text

如3.5例子

4.2、input-radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    性别：

<!--    v-model双向绑定，input-radio-->
    <input type="radio" name="sex" value="男" v-model="checked">男
    <input type="radio" name="sex" value="女" v-model="checked">女
    <p>选中：{{checked}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            checked:''
        }
    })
</script>

</body>
</html>

4.3、textarea多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    {{}}绑定属性-->
    <p>{{message}}</p>
<!--    v-model双向绑定,textarea多行文本-->
    <textarea v-model="message"></textarea>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"hello,vue"
        }
    })
</script>

</body>
</html>

4.4、select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    v-model双向绑定，select-->
    <select name="selct" id="select" v-model="message">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选择的值：{{message}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'A'
        }
    })
</script>

</body>
</html>

5、vue组件

5.1、组件简介

组件是可复用的vue实例，即一组可以重复使用的模板，通常一个应用会以一棵嵌套的组件树的形式来组织，例如，页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件

在这里插入图片描述
在这里插入图片描述

5.2、第一个vue组件

在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    直接使用组件，传递给组件中的值：props-->
    <name v-for="item in items" v-bind:nameh="item"></name>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //Vue.component()：注册组件，name是组件名
    Vue.component("name",{
        //组件参数props
        props:['nameh'],
        //组件模板template
        template:"<li>{{nameh}}</li>"
    });

    var vm = new Vue({
        el:"#app",
        data:{
            items:["数组参数1","数组参数2","数组参数2"]
        }
    })
</script>

</body>
</html>

6、axios异步通信

6.1、axios简介

Axios是一个开源的可以用在浏览器端和node js的异步通信框架，主要作用就是实现AJAX异步通信。

  • GitHub：https://github.com/axios/axios
  • 中文文档：http://www.axios-js.com/

6.2、第一个axios应用程序

  • json数据
{
  "name": "名字",
  "address": {
    "street": "集美区",
    "city": "福建厦门",
    "country": "中国"
  }
}
  • 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-cloak 解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <div>名字：{{info.name}}</div>
    <div>地址：{{info.address.country}} {{info.address.city}} {{info.address.street}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        data(){//data中的数据结构必须和Ajax响应回来的数据格式匹配
            return{
                info:{
                    name:null,
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                }
            }
        },
        mounted(){//钩子函数
            axios.get("data.json").then(response=>(this.info=response.data))
        }
    })
</script>


</body>
</html>

7、computed计算属性

计算属性就是能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    methods：定义方法，调用方法使用currentTime1()-->
    <div>currentTime1:{{currentTime1()}}</div>
<!--    computed：定义计算属性，调用属性使用currentTime2-->
    <div>currentTime2:{{currentTime2}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        methods: {
            currentTime1:function () {
                return Date.now()
            }
        },
        computed:{//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
            currentTime2:function () {
                return Date.now()
            }
        }
    })
</script>


</body>
</html>

控制台测试

在这里插入图片描述

8、slot插槽

在Vue.js中我们使用<slot>元素作为承载分发内容的出口，即插槽，可以应用在组合组件的场景中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <todo>
<!--        通过插槽插入值，内容组件todo-title和todo-items分别被分发到了todo组件的todo-title和todo-items插槽中-->
<!--        v-bind的简写为冒号-->
        <todo-title slot="todo-title":title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems":item="item":index="index"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //注册组件，使用slot插槽实现内容动态绑定
    Vue.component("todo",{
        template: "<div>\n" +
            "    <slot name=\"todo-title\"></slot>\n" +
            "    <ul>\n" +
            "        <slot name=\"todo-items\"></slot>\n" +
            "    </ul>\n" +
            "</div>"
    })
    //注册内容组件
    Vue.component("todo-title",{
        props: ["title"],
        template: "<div>{{title}}</div>"
    })
    Vue.component("todo-items",{
        props: ["item","index"],
        template: "<li>{{index+1}}：{{item}}</li>"
    })

    //实例化Vue并初始化数据
    var vm = new Vue({
        el:"#app",
        data:{
            title:"代办事项",
            todoItems:["事项1","事项2","事项3"]
        }
    })
</script>

</body>
</html>

9、自定义事件

自定义事件可以在组件中完成删除Vue实例中的数据

组件todo-items无法调用vue实例中的方法，只能调用自身的方法，绑定自定义事件，在自定义事件中绑定vue实例中的方法。

  • 1、vue实例方法

    removeItem:function (index) {
    //splice()方法，删除、添加数组元素
    this.todoItems.splice(index,1);
}

  • 2、组件自定义方法

    remove:function (index) {
    //自定义事件分发
    this.$emit('remove',index)
}

  • 3、前端绑定vue实例中的方法

    v-on:remove="removeItem(index)"

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <todo>
<!--        通过插槽插入值，内容组件todo-title和todo-items分别被分发到了todo组件的todo-title和todo-items插槽中-->
<!--        v-bind的简写为冒号-->
        <todo-title slot="todo-title":title="title"></todo-title>
<!--        v-on监听自定义事件remove，绑定到vue的方法removeItem-->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems":item="item":index="index" v-on:remove="removeItem(index)"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //注册组件，使用slot插槽实现内容动态绑定
    Vue.component("todo",{
        template: "<div>\n" +
            "    <slot name=\"todo-title\"></slot>\n" +
            "    <ul>\n" +
            "        <slot name=\"todo-items\"></slot>\n" +
            "    </ul>\n" +
            "</div>"
    })
    //注册内容组件
    Vue.component("todo-title",{
        props: ["title"],
        template: "<div>{{title}}</div>"
    })
    Vue.component("todo-items",{
        props: ["item","index"],
        //内容组件里添加删除按钮，绑定删除事件
        template: "<li>{{index+1}}：{{item}} <button @click='remove'>删除</button></li>",
        methods:{
            remove:function (index) {
                //自定义事件分发
                this.$emit('remove',index)
            }
        }
    })

    //实例化Vue并初始化数据
    var vm = new Vue({
        el:"#app",
        data:{
            title:"代办事项",
            todoItems:["事项1","事项2","事项3"]
        },
        //在vue实例中添加删除方法
        methods:{
            removeItem:function (index) {
                //splice()方法，删除、添加数组元素
                this.todoItems.splice(index,1);
            }
        }
    })
</script>

</body>
</html>

10、vue-cli脚手架

10.1、vue-cli简介

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板，预先定义好的目录结构及基础代码。

10.2、vue-cli安装

安装Node.js：http://nodejs.cn/download/，检测是否安装成功

  • cmd下输入node -v，查看是否能够正确打印出版本号即可！

  • cmd下输入npm -v，查看是否能够正确打印出版本号即可！

    • 安装淘宝镜像加速器
    # -g 就是全局安装
# 安装目录：C:\Users\administrator\AppData\Roaming\npm
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装vue-cli

#安装命令
cnpm instal1 vue-cli-g

#测试是否安装成功，查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

C:\Users\pipijiao>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

10.3 第一个vue-cli应用程序

  • 1、新建一个空的文件夹，在文件夹下创建一个基于webpack模板的vue应用程序

    #需要进入到对应的目录，vuestudy是顶日名称
vue init webpack vuestudy

#运行后选项说明
	Project name：项目名称，默认回车即可
	Project description：项目描述，默认回车即可
	Author：项目作者，可以输入作者名称，或默认回车即可
	Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
	Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
	Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
	Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
	Should we run npm install for you after the,project has been created:创建完成后直接	初始化，选择n，我们手动执行；运行结果！

  • 2、初始化运行

    #需要进入到项目目录
#安装依赖
npm install
#运行，浏览器访问http://localhost:8080
npm run dev
#停止：ctrl+C

11、webpack打包器

11.1、webpack简介

  • webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) ，当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle。

  • WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。

11.2、webpack安装

#安装命令
npm install webpack -g
npm install webpack-cli -g
#检测是否安装成功
webpack -v
webpack-cli -v

11.3、webpack配置

打包需要创建webpack.config.js配置文件，参数说明

  • entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
  • output：输出， 指定WebPack把处理完成的文件放置到指定路径
  • module：模块， 用于处理各种类型的文件
  • plugins：插件， 如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听， 用于设置文件改动后直接打包
module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

11.4、webpack使用

  • 创建文件夹用idea打开，新建modules文件夹用来放JS模块等资源文件

  • 在modules下创建hello.js，编写JS模块相关代码

    //暴露方法
exports.sayHi = function(){
    document.write("<div>Hello Webpack</div>");
}

  • 在modules下创建main.js，入口文件

    //require导入模块，调用方法
var hello = require("./hello");
hello.sayHi();

  • 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

    module.exports = {
    entry:"./modules/main.js",
    output:{
        filename:"./js/bundle.js"
    }
}

  • 在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="dist/js/bundle.js"></script>
</body>
</html>

  • 在idea的控制台执行：webpack打包，看到新增文件dist/js/bundle.js，浏览器打开index.html显示页面，打包完成

12、vue-router路由

12.1、vue-router简介

Vue Router 是Vue.js的官方路由器

12.2、vue-router安装

#安装命令，node_modules下有vue-router则成功
npm install vue-router --save-dev

#若是出现失败，可能是版本问题，可以指定版本
npm install --legacy-peer-deps vue-router@3.5.2

12.3、vue-router使用

  • 在src/components目录下定义一个Content.vue 的组件

    <template>
  <div>
    <h1>内容页面</h1>
  </div>
</template>

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

<style scoped>

</style>

  • 在src/components目录下定义一个Main.vue的组件

    <template>
  <div>
    <h1>首页</h1>
  </div>
</template>

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

<style scoped>

</style>

  • 在src下新建一个文件夹router，用来存放路由，创建index.js

    import Vue from 'vue'
//导入VueRouter插件
import VueRouter from 'vue-router'
//导入组件
import Content from "../components/Content";
import Main from "../components/Main"
//显示声明使用VueRouter
Vue.use(VueRouter);

//配置路由
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:'/content',
      //路由名称
      name:'content',
      //跳转到组件
      component:Content
    },
    {
      //路由路径
      path:'/main',
      //路由名称
      name:'main',
      //跳转到组件
      component:Main
    },
  ]
})

  • 配置main.js路由

    import Vue from 'vue'
import App from './App'
//导入路由配置目录，自动扫描里面的路由配置
import router from './router'

//关闭生产模式下给出的提示
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

  • 在App.vue中使用路由

    <template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

13、vue+ElementUI实战

13.1、工程准备

相关命令

#创建工程
vue init webpack hello-vue
#进入工程目录
cd hello-vue
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

删除工程中没用的内容，例如HelloWorld.vue、logo.png

工程目录src（没有则创建）

  • assets：用于存放资源文件
  • components：用于存放Vue功能组件
  • views：用于存放Vue视图组件
  • router：用于存放vue-router配置

13.2、创建登录页面

  • 在views下创建首页视图Main.vue

    <template>
  <h1>首页</h1>
</template>

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

<style scoped>

</style>

  • 在views下创建登录页视图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:"密码不可为空",tigger:"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>

  • 在router/index.js下配置路由

    import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      name: 'main',
      component: Main
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
  ]
})

  • App.vue

    <template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  • main.js

    import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(router)
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  • 运行npm run dev，如果出现模块版本过高的失败，可以在package.json文件中降低该模块版本，再在idea的Terminal执行npm install，若是下载失败再尝试cnpm install

    • 浏览器访问http://localhost:8080/#/login，随便输入账号密码，点击登录跳转到首页

13.3、children路由嵌套

  • 在view下创建文件夹user，创建个人信息视图组件Profile.vue

    <template>
  <h1>个人信息</h1>
</template>

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

<style scoped>

</style>

  • 在view/user下创建用户列表视图组件List.vue

    <template>
  <h1>用户列表</h1>
</template>

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

<style scoped>

</style>

  • 修改首页视图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 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-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <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 />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>

  • 在router/index.js下配置子路由

    import Vue from 'vue'
import VueRouter from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'
import Profile from "../views/user/Profile"
import List from "../views/user/List"

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children:[
        {
          path: '/user/profile',
          component: Profile
        },
        {
          path: '/user/list',
          component: List
        },
      ]
    },
    {
      path: '/login',
      component: Login
    },
  ]
})

13.4、参数传递

  • 方法一

    • index.js修改路由配置
    {
  //path属性中增加:id占位符
  path: '/user/profile:id',
  name:'profile',
  component: Profile
},
    • Main.vue中修改route-link地址
    <router-link :to="{name:'profile',params:{id:1}}">个人信息</router-link>
    • Profile.vue中接收参数
    <template>
  <h1>个人信息:{{$route.params.id}}</h1>
</template>

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

<style scoped>

</style>

  • 方法二：使用props 减少耦合

    • index.js修改路由配置
    {
  //path属性中增加:id占位符
  path: '/user/profile:id',
  name:'profile',
  component: Profile,
  //使用props 减少耦合
  props: true
}
    • Main.vue中修改route-link地址
    <router-link :to="{name:'profile',params:{id:1}}">个人信息</router-link>
    • Profile.vue接收参数为目标组件增加 props 属性
    <template>
  <h1>个人信息:{{id}}</h1>
</template>

<script>
export default {
  props: ['id'],
  name: "profile"
}
</script>

<style scoped>

</style>

13.5、redirect重定向

只需要在router/index.js里配置即可

{
  path: '/main',
  name: 'Main',
  component: Main
},
{
  path: '/goHome',
  redirect: '/main'
}

13.6、路由模式

路由模式有两种，可以在router/index.js里配置模式

  • hash：路径带 # 符号，如 http://localhost/#/login，不设置默认是这种

  • history：路径不带 # 符号，如 http://localhost/login

    export default new Router({
  mode: 'history',
  routes: [
  ]
});

13.7、404页面

  • 在views下创建404视图页面NotFound.vue

    <template>
  <h1>404 页面丢失</h1>
</template>

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

<style scoped>

</style>

  • 在router/index.js配置路由

    //导入404视图组件
import NotFound from "../views/NotFound"
//任何匹配不到path的都展示404页面
{
  path: '*',
  component: NotFound
}

13.8、路由钩子与axios异步

  • 安装axios
cnpm install --save vue-axios
  • main.js导入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
  • 在static文件下创建mock/data.json
{
  "name": "名字",
  "address": {
    "street": "集美区",
    "city": "福建厦门",
    "country": "中国"
  }
}
  • 修改views/Profile.vue视图，使用路由钩子和axios
<script>
/**
 * 路由钩子参数说明：
 to：路由将要跳转的路径信息
 from：路径跳转前的路径信息
 next：路由的控制参数
 next() 跳入下一个页面
 next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
 next(false) 返回原来的页面
 next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例
 */
export default {
  props: ['id'],
  name: "profile",
  beforeRouteEnter:(to, from, next) => {
    console.log('在进入路由前执行');
    next(
      vm => {//进入路由之前执行getData方法
        vm.getDate();
      }
    );
  },
  beforeRouteLeave:(to, from, next) => {
    console.log('在离开路由前执行');
    next();
  },
  //axios
  methods:{
    getDate:function () {
      this.axios({
        method:"get",
        url:"http://localhost:8080/static/mock/data.json"
      }).then(function (response){
        console.log(response)
      })
    }
  }
}
</script>
  • 浏览器访问，看到控制台成功打印response=json数据
aoliaoliaoo
关注
专栏目录
【2024】前端学习笔记17-Vue初体验
皮皮的博客
11-05 888
本文记录了vue的简单介绍和计数器实例
大前端学习笔记--Vue.js 3.0
爱玲姐姐的博客
09-29 3558
Vue.js 3.0 介绍 文章内容输出来源：大前端高薪训练营 一、Vue.js 源码组织方式 1. 源码采用TypeScript重写 提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言，在编码的过程中检查类型的问题。 2. 使用Monorepo管理项目结构 使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。 3. 不同构建版本 Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。V
狂神Vue学习笔记
qq_41194348的博客
11-19 2858
Vue Soc:关注度分离原则 HTML+CSS+JS：视图：给用户看，刷新后台数据 网络通信：axios 页面跳转：vue-router 状态管理：vuex Vue-UI ：ICE Vue : 一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开 发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的 优点; Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不且备通信能力，
狂神。Vue学习。
m0_56064238的博客
07-16 1303
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Soc原则：关注点分离原则：渐进式框架：大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML +
Vue(一)
lijieling123的博客
05-12 124
遵循SoC关注度分离原则 1.前端基础 结构层：HTML 表现层：CSS --CSS预处理器：用一种专门的语言，进行Web样面设计，再通过编译器转化为正常的CSS 常用的：SASS(基于Ruby), LESS(这个是基于NodeJS,使用简单，一般用这个) 行为层：JS 2.Vue Augular特点：将后台的MVC模式搬到前端并增加了模块化开发的理念（MVVM）(VM双向绑定相当于控制层) React特点： 提出新概念虚拟DOM, 用于减少真实的DOM操作，在内存中模拟DOM操作，提升前
Vue-入门-狂神-学习笔记
圆的博客
10-13 2093
文章目录1. Vue概述2. 前端知识体系3. 前端三要素4. 表现层（CSS）5. CSS预处理器6. 行为层（JavaScript）7. TypeScript8. JavaScript框架9. UI框架10. 三端合一11. 后端技术 1. Vue概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳
Vue的基础学习
radmdzjtx的博客
01-10 293
Vue⬇ SOC原则（关注度分离原则） 只做视图层(HTML + CSS(表现层) +JS):给用户看，刷新后台给的数据 因为CSS有太多缺点所以一般不会用，所以衍生出了CSS预处理器的工具 CSS预处理器:用一种专门的编程语言，进行Web页面样式的设计，再通过编译器转化为正常的CSS文件，以供项目使用。 常见的CSS预处理器: 1.SASS 2.LESS 3.SASS 网络通信:axios 页面跳转:vue-router 状态管理:vuex Vue-UI：飞冰（在线前端制作）amaze b
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
前端框架及项目面试－聚焦Vue3、React、Webpack（最新升级版，包升级）
01-13
本课程"前端框架及项目面试－聚焦Vue3/React/Webpack"是针对这一领域的最新升级版，旨在帮助开发者掌握并理解三大主流前端框架Vue3、React以及Webpack的核心概念和实际应用。 Vue3作为Vue.js框架的最新版本，引入了...
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码
最新发布
04-16
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
关注分离的艺术
zdy0_2004的专栏
09-13 1295
关注分离的艺术 英文原文：The Art of Separation of Concerns 前言 在软件工程中，关注的分离是指在系统中为达到目的对软件元素的划分与对比。通过适当的关注分离，将复杂的东西变成可管理的。这篇文章的目的是促进对关注分离的原则的理解，以及提供一个基础概念的设置来帮助软件工程师开发出可维护的系统。
理论篇：关注点分离(Separation of concerns, SoC)
weixin_34150830的博客
12-06 1142
概念 关注点分离（Separation of concerns，SOC）是对只与“特定概念、目标”(关注点)相关联的软件组成部分进行“标识、封装和操纵”的能力，即标识、封装和操纵关注点的能力。 是处理复杂性的一个原则。由于关注点混杂在一起会导致复杂性大大增加，所以能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。 关注点分离是面向...
软件架构基本技法——关注点分离
Stay hungry, Stay foolish
01-28 2660
是什么 关注点指软件的功能或目的。把关注点“分离”，就是将与各个关注点有关的代码集中起来做成独立的模块，与其他代码分离。分离的模块要尽量减少公开的功能数量，与其他模块的关联也要维持在最低的限度。 在设计技法中，有很多模式用于实现关注点分离，其中最具代表性的模式是“模型-视图-控制器”（MVC）。在编程领域，关注点分离的代表技术是面向切面编程。 为什么 代码的修改通常以关注点为单位。因此，将代码按照关注点进行分离有一下好处。 各个关注点互相独立，从而缩小了代码的修改范围，使得代码更易于修改 修改带
【Vue】—1：vue初了解（狂神说系列）
dearand的博客
12-02 362
vue-2020-12-1 由雨溪，关注度分离原则 1，vue初了解 1，vue.js Angular：谷歌开发，特点是实现模块化开发（模块化） React：FaceBook开发，特点是实现虚拟Dom（使用内存） Vue：吸收了上面两者的特点 2，MVVM模式的实现者 Model ：模型层，在这里表示javaScript对象 View：视图层，在这里表示Dom(HTML操作的元素) ViewModel ：连接视图和数据的中间件，Vue.js 就是MVVM中的ViewModel层的实现
关注点分离
weixin_34124939的博客
09-24 588
昨天在写popover组件的时候方方老师提出了写页面的两个基本原则。 关注点分离原则，也叫正交原则，HTML CSS JS 分离 互不影响 状态转移：js不去修改css 的样式（.style.color='red'），只修改css中的状态（addClass('active')）。 1. 关注点分离 页面原则标签、样式、行为三者分离，如下 &lt;!DOCTYPE html...
Vue完整版（一）
Roc的博客
10-31 1357
Vue完整版（一）一、Vue概述二、前端知识体系2.1、前端三要素2.1.1、什么是CSS预处理器2.1.2、**Native原生JS开发**2.1.3、**TypeScript微软的标准**2.2、JavaScript框架2.3、UI 框架2.4、JavaScript构建工具2.5、三端统一2.5.1、混合开发（Hybid App）2.5.2、微信小程序2.6、后端技术2.7、主流前端框架2.7.1、iView2.7.2、ElementUI2.7.3、ICE2.7.4、VantUI2.7.5、AtUI2.
Vue/前端核心分析
weixin_47056195的博客
01-26 218
Vue/前端核心分析 Soc:关注度分离原则 HTML+css+js：视图：给用户看，刷新后台给的数据 一、前端三要素：HTML+CSS+JavaScript HTML(结构)：超文本标记语言（Hyper Text Markup Language）决定网页的结构和内容 CSS（表现）：层叠样式（Cascading Style Sheets）,设定网页的表现样式 JavaScript(行为)：是一种弱类型脚本语言，其源代码不许经过编译，而是由浏览器解释运行，用于控制网页的行为 二、结构层（HTML）
关注点分离与单一职责
weixin_33695450的博客
06-14 346
关注点分离（separation of concerns，SOC）是对只与“特定概念、目标”(关注点)相关联的软件组成部分进行“标识、封装和操纵”的能力，即标识、封装和操纵关注点的能力。是处理复杂性的一个原则。由于关注点混杂在一起会导致复杂性大大增加，所以能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。  http://blog.csdn.net/lovelion/art...
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
综上所述，前端Bootstrap Es6 vue学习笔记囊括了前端开发的关键技术，包括基础环境配置、样式排版、响应式布局、组件、内置插件、HTML5 CSS3支持、LESS动态样式和Vue.js等。通过学习这些技术，我们可以更好地进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aoliaoliaoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值