Vue笔记_vue: admin中打断el-menu-item 的执行-CSDN博客

本文链接：https://blog.csdn.net/weixin_46100927/article/details/123452128

文章目录

1. 快速上手
2. 基本指令使用
3. Axios
4. v-model
5. 组件基础
6. 计算属性
7. 路由
8. 第一个vue-cli项目
9. 路由模式+处理404
10. 路由钩子函数+异步请求
11. vuex

1. 快速上手

1.1 引入Vue.js

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

1.2 使用ID选择器

el:是id选择器
data：是值
大部分情况下是以id为主
对于标签是不支持的

<div id="app">
    {{message}} || {{2*5}}
    {{name}}
    {{password}}
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var user = new Vue({
        el:"#app",
        data:{ // 用来给vue对象实例化一些数据
            message:"Hello,Vue",
            name:"admin",
            password:"123456"
        }
    })
</script>

1.3 使用类选择器

<div class="app">
  {{message}} || {{2*5}}
  {{name}}
  {{password}}
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
  var user = new Vue({
    el:".app",
    data:{
      message:"Hello,Vue",
      name:"haolong",
      password:"123456"
    }
  })
</script>

2. 基本指令使用

2.1 条件渲染

01 v-if

每次都会重新删除或创建元素

if-else

<div id="app">
    <h1 v-if="login">欢迎你，admin</h1>
    <h1 v-else><a href="https://www.baidu.com">请登录</a></h1>
</div>

<script src="js/vue.js"></script>
<script type="text/javascript">
    var app  =new Vue({
        el:"#app",
        data:{
            login:true
        }
    })
</script>

if- else if -else

<div id="app">
    <h1 v-if="grade>=90">优秀</h1>
    <h1 v-else-if="grade<90 && grade>=80">良好</h1>
    <h1 v-else-if="grade<80 && grade>=70">中等</h1>
    <h1 v-else-if="grade<70 && grade>=60">及格</h1>
    <h1 v-else>不及格</h1>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            grade:85
        }
    })
</script>

02 v-show

使用和v-if基本相同
不同的是带有v-show的元素会始终被保留在DOM中，v-show只是说简单切换元素的CSS属性（display:none）
v-show不支持模板，也不支持v-else

<div id="app">
    <h1 v-show="show">Hello ,Vue</h1>
</div>
<hr style="color:green">
<script src="js/vue.js"></script>
<script type="text/javascript">
    let app  =new Vue({
        el:"#app",
        data:{         
            show:true
        }
    })
</script>

2.2 v-for

用来对对象进行遍历
item 为数组中的每一项，index 为索引值，users 为需要遍历的数组
:key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序. 用来给vue内部提供重用和排序的唯一key

<div id="app">
    <ul>
        <li v-for="(item,index) in users">
            索引值：{{index}}
            用户id：{{item.id}}
            用户姓名：{{item.name}}
        </li>
    </ul>
</div>

<script src="js/vue.js"></script>
<script type="text/javascript">
    var app  = new Vue({
        el:"#app",
        data:{
            users:[
                {
                    id:1,
                    name:"张三"
                },
                {
                    id:2,
                    name:"李四"
                },
                {
                    id:3,
                    name:"王五"
                }
            ]
        }
    })
</script>

2.3 v-on

作用

用来绑定事件

语法

v-on:方法="自定义方法名"
浏览器端常见的方法都可以使用

注意事项

在自定义方法中如果说要操作属性，必须用this.属性名的方式，用来代表当前这个对象的属性

<div id="app">
    
    <h2>点击事件</h2>
    <span>{{num}}</span>
    <button v-on:click="clickForm">点击</button><br>
    
    <h2>获取与失去焦点事件</h2>
    获取焦点事件:<input type="text" v-on:focus="focusButton">
    失去焦点事件:<input type="text" v-on:blur="unFocusButton">
    
    <h2>简化事件</h2>
    获取焦点事件:<input type="text" @focus="focusButton">
    失去焦点事件:<input type="text" @blur="unFocusButton">

</div>
<script src="js/vue.js"></script>
<script>
    var user = new Vue({
        el:"#app",
        data:{
          num:0
        },
        methods:{
            clickForm:function (){
                this.num+=1;
            },
            focusButton:function (){
                console.log("获取焦点")
            },
            unFocusButton:function (){
                console.log("失去焦点")
            }
        }
    })
</script>

事件修饰符

@方法.修饰符 = “自定义方法”

.stop：阻止冒泡
.prevent：阻止默认事件
.capture：添加事件侦听器时使用事件捕获模式
.self：只当事件在该元素本身触发时调用回调，子元素触发不会调用
.once:事件只触发一次

2.4 v-cloak

必须配合css中的display属性进行使用
如果说网速比较慢的话，就不会页面中显示
只会对插值表达式中的值进行替换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id='app'>
			<p v-cloak>------{{msg}}------------</p>
		
		</div>
		<script src=js/vue.js></script>
		<script>
			let app = new Vue({
				el:"#app",
				data:{
					msg:'Hello'
				}
			})
			
		</script>
	</body>
</html>

2.5 v-text

v-text 会覆盖元素中原本的内容

<div id='app'>
    <p v-text="msg">-------</p>

</div>
<script src=js/vue.js></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            msg:'Hello'
        }
    })

</script>

2.6 v-html

<div id='app'>
    <p v-html="msg"></p>

</div>
<script src=js/vue.js></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            msg:'<h2>Hello</h2>'
        }
    })

</script>

2.7 v-bind

**作用：**用来绑定属性
作用

v-bind:标签所具有的属性(要绑定的属性值)="属性"
会把属性当做 js表达式进行计算
v-bind:标签所具有的属性="属性+'内容'"

简写方式

:标签所具有的属性(要绑定的属性值)="属性"

<div id='app'>
    <button v-bind:title="title">提交</button>
</div>
<script src=js/vue.js></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            tittle:"我是一个按钮"
        }    

</script>

2.8 过滤器

Vue.js 允许你自定义过滤器，可被作为一些常见的文本格式化，过滤器可以用在两个地方：插值表达式和 v-bind 表达式。过滤器应该被添加在JavaScript表达式的尾部，有"管道"符指示

格式
{{cTime | 过滤器名称 | 过滤器2}}

过滤器中的第一个参数已经被规定死了，永远是过滤器管道符前面传递过来的数据

01 定义全局过滤器

参数值必须和管道符前面传递过来的数据中的参数值一致

Vue.filter('过滤器名称',function(cTime){
	return 处理结果;	
})

02 定义私有过滤器

参数值必须和管道符前面传递过来的数据中的参数值一致

let app = new Vue({
        el:"#app",
        /* 定义私有过滤器 */
        filters:{
            dataFormat:function(cTime){
                var Time  = new Date(cTime);
                var year = Time.getFullYear();
                var mouth = Time.getMonth()+1;
                var day = Time.getDate();
                return `${year}-${mouth}-${day}`
    	}
    })

注意事项

如果出现全局过滤器和私有过滤器重名的情况，调用服从就近原则

2.9 页面跳转

<router-link :to=""> </router-link>
this.$router.push()

3. Axios

3.1 引言

一种异步请求
异步请求
1. 基于XMLHttpRequest 对象发起的请求都是异步请求
2. 请求之后，页面不懂，响应回来更新的是页面的局部，多个请求之间互不影响，并行执行

3.2 Get请求

请求参数拼接在URL后面

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.get("http://localhost:8081/axios/findAll?username='张三'").then(response => {
  console.log(response.data)
})// 响应成功的回调函数
  .catch(error => {
  console.log(error)
}) // 请求失败的回调函数
</script>

3.3 Post 请求

axios 在发送post方式的请求是传递的参数如果是对象类型，axios 会自动将对象转为json格式的字符串使用application/json 的请求头向后端服务接口传递参数

传递参数的方式
1. 使用URL拼接的方式
2. 后端接口直接使用@RequestBody注解形式接受参数

axios.post("http://localhost:8081/axios/findAll",{name:"佩奇",password:"123456"}).then(response => {
  console.log(response.data)
})
  .catch(error => {
  console.log(error)
})

3.4 并发请求

并发请求：在同一时间发送多个不同的请求到后端服务，最后同一处理不同服务的响应结果

function findAll(){
  axios.get("http://localhost:8081/axios/findAll").then(response => {
    console.log(response.data)
  })// 响应成功的回调函数
    .catch(error => {
    console.log(error)
  }) // 请求失败的回调函数
}
function save() {
  axios.post("http://localhost:8081/axios/findAll",{name:"佩奇",password:"123456"}).then(response => {
    console.log(response.data)
  })
    .catch(error => {
    console.log(error)
  })
}
axios.all([findAll(),save()]);//用来处理并发请求

4. v-model

4.1 双向数据绑定

Vue.js 是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也会发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果说我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突
注意

只能运用在表单元素中

4.2 单行文本

<div id="vue">
    用户名:<input type="text" v-model="username">{{username}}<br><br>
</div>
<script src="js/vue.js"></script>
<script>
    var vue  = new Vue({
        el:"#vue",
        data:{
            username:"admin",
        }
    })
</script>

4.3 多行文本

<div id="vue">
    <textarea v-model="message"></textarea>
</div>
<script src="js/vue.js"></script>
<script>
    var vue  = new Vue({
        el:"#vue",
        data:{         
            message:"Hello,Vue"
        }
    })
</script>

4.4 单复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <input type="checkbox" v-model="isChecked"><br><br>
</div>
<script src="js/vue.js"></script>
<script>
    var vue  = new Vue({
        el:"#vue",
        data:{   
            isChecked:false,           
        }
    })
</script>
</body>
</html>

4.5 多复选框

checkNames数组中的默认值，就是默认选中的值
两者之间起关联的是标签中的

<div id="vue">
    
    <input type="checkbox" id="java" v-model="checkNames" value="java">
    <label for="java">java</label><br>
    
    <input type="checkbox" id="c++" v-model="checkNames" value="c++">
    <label for="java">c++</label><br>
    
    <input type="checkbox" id="c" v-model="checkNames" value="c">
    <label for="java">c</label><br>
    
    <input type="checkbox" id="python" v-model="checkNames" value="python">
    <label for="python">python</label><br>
    
</div>
<script src="js/vue.js"></script>
<script>
    var vue  = new Vue({
        el:"#vue",
        data:{
            checkNames:["java","c++"]
        }
    })

</script>

4.6 单选按钮

<div id="vue">
    男<input type="radio" value="男" v-model="flag">
    女<input type="radio" value="女" v-model="flag">
</div>
<script src="js/vue.js"></script>
<script>
    var vue  = new Vue({
        el:"#vue",
        data:{        
            flag:"女"
        }
    })

</script>

4.7 下拉菜单

01 方式一

<div id="vue">
    <select v-model="selected">
        <option disabled value="">请选择编程语言</option>
        <option>java</option>
        <option>c++</option>
        <option>python</option>
    </select>
    {{selected}}
</div>
<script src="js/vue.js"></script>
<script>
    var vue  = new Vue({
        el:"#vue",
        data:{
           selected:''
        }
    })

</script>

02 方式二

<div id="vue">
    <select v-model="selected">
        <option disabled value="">请选择编程语言</option>
        <option v-for="items in selects">{{items}}</option>
    </select>
    {{selected}}
</div>
<script src="js/vue.js"></script>
<script>
    var vue  = new Vue({
        el:"#vue",
        data:{
           selected:'',
           selects:["java","c++","python"]
        }
    })

</script>

5. 组件基础

组件的出现就是为了拆分Vue实例的代码量，能够让我们用不同的组件来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可，组件是可重用的Vue实例

模块化和组件化的不同

模块化：从代码逻辑角度进行划分，方便代码分层开发，保证每个功能模块的功能单一
组件化：：从UI界面的角度进行划分

5.1 第一个组件应用

如果说定义全局组件的时候，组件名称使用了驼峰命名，则在使用组件的时候，需要将大写的驼峰改为小写字母，并且两个单词之间使用 - 连接

方式一

<div id="app">
	<extend-way></extend-way>
</div>

<script type="text/javascript">  
	var way1 = Vue.extend({
		template:"<h1>使用 extend 创建组件</h1>"
	})
	Vue.component('extendWay',way1)
</script>

方式二

<div id="app">
    <way2></way2>
</div>

<script type="text/javascript">  	
    Vue.component("way2",{
        template:"<h1>使用 component 创建组件</h1>"
    })
    var app = new Vue({
        el:"#app",
    })
</script>

方式三

<div id="app">
    <way3></way3>
</div>
<template id="temp1">
	<h2>使用 template 外部使用组件</h2>
</template>

<script type="text/javascript">
	Vue.component("way3",{
		template:'#temp1'
	})
    var app = new Vue({
        el:"#app",
    })
</script>

方式四：创建私有组件

<div id="app">
	<way5></way5>
</div>
<template id="temp1">
	<h2>哈哈哈</h2>
</template>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
		components:{
			way4:{
				template:'<h1>创建私有组件</h1>'
			},
			way5:{
				template:'#temp1'
			}
		}
    })
</script>

5.2 组件中的data

组件中可以有自己的data 数据
组件中的data必须是一个方法，这个方法内部必须返回一个对象
使用方法和实例中data的使用完全一致

<div id="app">
	<way5></way5>
</div>
<template id="temp1">
	<h2>{{msg}}----{{time}}</h2>
</template>

<script src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        components:{
          way5:{
            template:'#temp1',
            data:function(){
              return{
                msg:"这是使用组件中的data数据",
                time:new Date().getDay()
              }
            }
          }
        }
    })
</script>

5.3 组件之间的切换

方式一:使用 v-if

<div id="app">
	<a href="" @click.prevent="flag=true">登录</a>
	<a href="" @click.prevent="flag=false">注册</a>
	<login v-if="flag"></login>
	<register v-else="flag"></register>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    Vue.component("login",{
      template:'<h3>登录组件</h3>'
    })
    Vue.component("register",{
      template:'<h3>注册组件</h3>'
    })
    var app = new Vue({
        el:"#app",
		data:{
			flag:true
		}		
    })
</script>

方式二

<div id="app">
	<a href="" @click.prevent="componentname='login'">登录</a>
	<a href="" @click.prevent="componentname='register'">注册</a>
	<!-- component 是一个占位符，is属性用来指定要展示的组件名称 -->
	<component v-bind:is="componentname"></component>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
	Vue.component("login",{
		template:'<h3>登录组件</h3>'
	})
	Vue.component("register",{
		template:'<h3>注册组件</h3>'
	})
    var app = new Vue({
        el:"#app",
		data:{
			componentname:'login'
		}		
    })
</script>

5.4 使用props属性传递参数

默认规则下，props属性里面的值不能是大写

子组件无法直接使用父组件中的数据, 如果需要使用, 则必须由父组件把数据传递给子组件才可以.
本质: 让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递

<div id="app">
     <!-- 把父组件中的count传递给子组件的number属性,把父arr传递给子ids,把父p传递给子person -->
    <aaa :number="count" :ids="arr" :person="p"></aaa>
</div>

<script>
    var aaa = {
        //定义组件的模版
        template: `<h2>{{num}}---{{number}}--{{ids}}--{{person}}</h2>`,
        //定义组件中使用到的数据属性
        data() {
            return {
                num: 0
            }
        },
        //给组件添加属性
        props: {
            //普通属性number
            number: "",
            //数组属性ids
            ids: [],
            //对象属性person
            person: {}
    
        }
    };

    //注册:全局注册
    Vue.component("aaa", aaa);

    var app = new Vue({
        el: "#app",
        data: {
            count: 5,
            arr: [1, 2, 3],
            p: {username: "zhangsan", age: 23}
        }
    });
</script>

6. 计算属性

计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用

<div id="app">
    系统时间<span>{{getCurrentTime()}}</span><br>
    计算属性获取当前时间 <span> {{getCurrentTime1}}</span>
</div>

<script src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        methods:{
            getCurrentTime:function (){
                return Date.now();
            }
        },
  		// 计算属性必须放在 computed 之中
        computed:{
            getCurrentTime1:function (){
                return Date.now();
            }
        }
    })
</script>

7. 路由

7.1 基本信息

Vue Router 是Vue.js官方提供的路由管理器。他和Vue.js的核心深度继承，让构建单页面应用变得易如反掌。
路由的本质是对应关系

后端路由

概念：根据不同的用户的URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系

前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
功能：负责事件的监听，触发事件之后，通过事件函数渲染不同内容

7.2 Vue Router 快速上手

包含的功能

支持h5 历史模式或者 hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

基本使用
1、安装

<script src="js/vue-router.js"></script>

2、添加路由链接

vue提供的标签，默认会被渲染成 a 标签
to属性会被渲染为 href

<div id="app">
	<router-link to="/login">登录</router-link>
	<router-link to="/register">注册</router-link>
</div>

3、添加路由填充位

将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置

<router-view></router-view>

4、定义路由组件

const login = {
    template:'<h3>登录组件</h3>'
})
const register = {
    template:'<h3>注册组件</h3>'
})

5、配置路由规则并创建路由实例

routes : 路由规则数组
每个路由规则都是一个配置对象，其中至少包含一个path 和 component 两个属性
path:表示当前路由规则匹配的hash地址
component:表示当前路由规则对应要展示的组件

var router  = new VueRouter({
		/* 路由规则数组 */
		routes:[
			{
				path:'/loing',
				component:login
			},
			{
				path:'/register',
				component:register
			}
		]
	})

6、把路由挂载到Vue根实例中

const app = new Vue({
    el:"#app",
    router:router
})

7.3 路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

const router  = new VueRouter({
    routes:[
        {
            path:'/' ,
          	redirect: '/login'
        }
    ]
})

7.4 嵌套路由

点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容

<div id="app">
	<router-link to="/login">登录</router-link>
	<router-link to="/register">注册</router-link>
	<router-view></router-view>	
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script type="text/javascript">
	const login = {
		template:'<h3>登录组件</h3>'
	}
	const register = {
		template:`
		<div>
			<h3>注册组件</h3>
			<router-link to="/register/tab1">Tab1</router-link>
			<router-link to="/register/tab2">Tab2</router-link>
			<router-view/>
		</div>	
		`
	}
	const tab1  = {
		template:'<h3>Tab1 组件</h3>'
	}
	const tab2  = {
		template:'<h3>Tab2 组件</h3>'
	}
	
	const router = new VueRouter({
		routes:[
			{
				path:'/login',
				component:login
			},
			{
				path:'/register',
				component:register,
				children:[
					{path:'/register/tab1',component:tab1},
					{path:'/register/tab2',component:tab2}
				]
			},
		]
	})
    const app = new Vue({
        el:"#app",
		router:router,
    })
</script>

7.5 路由动态匹配

方式一

<div id="app">
	<router-link to="/login">登录</router-link>
	<router-link to="/login/1">用户一</router-link>
	<router-link to="/login/2">用户二</router-link>
	<router-link to="/login/3">用户三</router-link>
	<router-link to="/register">注册</router-link>
	<router-view></router-view>		
</div>

const router  = new VueRouter({
		routes:[
			{
				path:'/login/:id',
				component:login
			},
			{
				path:'/register',
				component:register,
				children:[
					{path:'/register/tab1',component:tab1},
					{path:'/register/tab2',component:tab2}
				]
			},
		]
	})

const login = {
	template:'<h3>用户{{$route.params.id}}正在登录</h3>'
}

方式二：使用props
(一) props 使用布尔类型

	const login = {
		props:['id'],
		template:'<h3>用户{{id}}正在登录</h3>'
	}

const router  = new VueRouter({
		routes:[
			{
				path:'/login/:id',
				component:login,
				props:true
			},
			{
				path:'/register',
				component:register,
				children:[
					{path:'/register/tab1',component:tab1},
					{path:'/register/tab2',component:tab2}
				]
			},
		]
	})

(二) props 使用对象类型

const login = {
    props:['username','id'],
    template:'<h3>用户{{username}} ----- {{id}}正在登录</h3>'
}

const router  = new VueRouter({
    routes:[
        {
            path:'/login/:id',
            component:login,
            props:{username:'郝龙',id:'1916270123'}
        },
        {
            path:'/register',
            component:register,
            children:[
                {path:'/register/tab1',component:tab1},
                {path:'/register/tab2',component:tab2}
            ]
        },
    ]
})

(三) props 的值为函数类型

const login = {
    props:['username','id','age'],
    template:'<h3>用户:{{username}} ----- 年龄：{{age}}---id:{{id}}正在登录</h3>'
}

const router  = new VueRouter({
    routes:[
        {
            path:'/login/:id',
            component:login,
            props:route=>({username:'Vue',age:'20',id:route.params.id})
        },
        {
            path:'/register',
            component:register,
            children:[
                {path:'/register/tab1',component:tab1},
                {path:'/register/tab2',component:tab2}
            ]
        },
    ]
})

7.6 命名路由

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为：命名路由

<router-link v-bind:to="{name:'login',params:{id:3}}">用户一</router-link>

const router  = new VueRouter({
    routes:[
        {
            name:'login',
            path:'/login/:id',
            component:login,
        }
    ]
})

7.7 编程式导航

常见的编程式导航基本用法

01 this.$router.push()

this.$router.push(‘hash地址’)
this.$router.push({path:‘hash地址’})
this.$router.push({name:‘名称’,params:{参数}})
this.$router.push({path:‘hash地址’,query:{参数}})

const login = {
    template:`<div>
            	<button @click='goRegister'>跳转</button>
            </div>`,
    methods:{
        goRegister:function(){
            this.$router.push('/register')
        }
    }
}

02 this.$router.go(n)

用于实现前进和后退

const register = {
    template:`<div>
				<h3>这就是惊喜</h3>	
				<button @click='goBack'>点击返回</button>
			</div>`,
    methods:{
        goBack:function(){
            this.$router.go(-1)
        }
    }
}

8. 第一个vue-cli项目

8.1 基本概念

官方提供的一个脚手架（预先定义好的目录结构以及基础代码，例如说我们在创建maven项目的时候，可以选择一个基本模板骨架，这个骨架项目就是脚手架），用于快速生成一个Vue的项目模板
基于2.x 版本的脚手架创建vue项目

8.2 主要功能

统一的目录结构
本地调试
热部署
单元调试
集成打包
集成打包上线

8.3 环境搭建

（一）Node.js
1、无脑安装，自动配置环境变量
2、测试是否安装成功
node -v
npm -v
3、安装Node.js 淘宝镜像加速器
npm install cnpm -g ：可能会出现问题
npm install --registry=https://registry.npm.taobao.org：推荐使用
（二）Git

电脑上自带，可以不用安装

（三）安装vue-cli

测试是否安装成功，vue list

npm install vue-cli -g

8.4 项目搭建

vue init webpack 项目名
cd 项目名
npm install 最后出现一个错误，但是说会提供给你一个方案，这一步是安装项目所需要的的依赖
npm run dev 之后直接访问http://localhost:8080/即可看见目录结构，最后关闭使用Ctrl+ C（小写c无效）

8.5 使用axios

# 1.安装axios
	npm install axios --save

# 2.配置main.js中引入axios
	import axios from 'axios';
	Vue.prototype.$http=axios;

# 3.使用axios
	在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})

8.5 整合ElementUI

npm i element-ui -S
安装SASS加载器
npm install sass-loader@7.3.1 node-sass --save-dev

9. 路由模式+处理404

error：404组件，任何访问不到，都会跳转到 error组件
mode：如果说不加这个属性，就是浏览器中显示就是 # ，就是hash模式；如果说不带# ，就是history模式

export default new Router({
  mode:'history',
  routes:[
    {
      path:'*',
      component:error
    }
  ]

})

10. 路由钩子函数+异步请求

路由中的钩子函数

beforeRouteEnter:在进入路由之前进行
beforeRouteLeave:在离开路由前进行

 beforeRouteEnter:(to, from, next) => {
    console.log("进入会员列表页面");
    next(vm => {
      vm.getData()
    });
  },
    
  beforeRouteLeave:((to, from, next) => {
    console.log("离开会员列表页面");
    next();
  })

参数说明

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由控制参数

11. vuex

是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间的数据共享
一般情况下，只有组件之间共享数据，才有必要存储到vuex中；对于组件私有的数据，还是存储在组件自身的data中

11.1 好处

能够在vuex中集中管理共享的数据，易于开发和后期维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

11.2 安装使用

# 1.简介
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

# 2.安装vuex
-	npm install vuex --save

# 3.创建vue cli中创建store文件夹

# 4.在stroe中创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
//1.安装vuex
Vue.use(Vuex);
//2.创建store对象
const store = new Vuex.Store({
  
});
//3.暴露store对象
export default store;

# 5.在main.js中引入stroe并注册到vue实例

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./stroe";//引入store
Vue.config.productionTip = false

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

01 state属性

# 1.state属性
- 作用: 用来全局定义一些共享的数据状态

# 2.语法
    const store = new Vuex.Store({
    	state:{
    		counter:0,//定义共享状态
    	},
    }

# 3.使用
	 {{$store.state.counter}} ===> {{this.$store.state.counter}}

02 mutations 属性

# 1.mutations 属性
- 作用: 用来定义对共享的数据修改的一系列函数

# 2.语法
    const store = new Vuex.Store({
      state:{
        counter:0,//定义共享状态
      },
      mutations:{
        //增加
        increment(state){
          state.counter++
        },
        //减小
        decrement(state){
          state.counter--
        }
      }
    });

# 3.使用
	this.$store.commit('decrement');
	this.$store.commit('increment');

# 4.mutations传递参数

- a.定义带有参数的函数
			mutations:{
     		//addCount 参数1:state 对象 参数2:自定义参数
     		addCount(state,counter){
        	console.log(counter);
        	return  state.counter += counter ;
      	}
    	}
- b.调用时传递参数
		this.$store.commit('addCount',11);

03 getters 属性

# 1.getters 属性
- 官方:  允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据	
	它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
- 作用: 用来定义对共享的数据的计算相关的一系列函数 相当于 computed 属性 会对结果进行缓存

# 2.语法
	  getters:{
      //平方
      mathSqrts(state){
        console.log("--------");
        return state.counter*state.counter;
      },
      //乘以一个数字
      mathSqrtsNumber(state,getters){
        return getters.mathSqrts*3;
      },
      //传递参数
      mathSqrtsNumbers(state,getters){
        return function (number){
          return  number;
        }
      }
    }

# 3.使用
-		1.{{$store.getters.mathSqrts}}
-   2.{{$store.getters.mathSqrtsNumber}}
-   3.{{$store.getters.mathSqrtsNumbers(3)}}