01. vue基础

最新推荐文章于 2024-10-04 17:24:00 发布

bat在等我

最新推荐文章于 2024-10-04 17:24:00 发布

阅读量1.1k

点赞数

分类专栏：前端相关文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/m0_46836425/article/details/123524913

版权

前端相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一：各个文件夹的作用

1. build：构建脚本目录，这个基本上不用管

build.js ==> 生产环境构建脚本
check-versions.js ==> 检查npm，node.js版本
utils.js ==> 构建相关工具方法
vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀
webpack.base.conf.js ==> webpack基本配置
webpack.dev.conf.js ==> webpack开发环境配置
webpack.prod.conf.js ==> webpack生产环境配置

2. config：项目配置

dev.env.js ==> 开发环境变量
index.js ==> 项目配置文件：端口号等在这里修改
prod.env.js ==> 生产环境变量

3. node_modules：npm 加载的项目依赖模块

4. src：这里是我们要开发的目录

基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建
components：组件目录，我们写的组件就放在这个目录里面
router：前端路由，我们需要配置的路由路径写在index.js里面
App.vue：根组件
main.js：入口js文件

5. static：静态资源目录，如图片、字体等。不会被webpack构建

6. index.html：首页入口文件，可以添加一些 meta 信息等

7. package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8. README.md：项目的说明文档，markdown 格式

9. .xxxx文件：这些是一些配置文件，包括语法配置，git配置等

二：新加一个页面的操作

先在components文件夹下增加.vue文件
为这个页面创建路由，可以在index.js文件夹下
编辑vue文件，在中写html；在中写js；在中写样式

三：基本语法

1. v-if、v-show

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="flag">
				今天天气很舒服！
			</p>
			<p v-else-if="rich">
				今天天气很燥热！晚上要去放松一下！
			</p>
			<p v-else="rich">
				晚上只能自嗨！
			</p>
            <p v-show="rich">
				有钱！
			</p>
		</div>
		
	</body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				flag:false,
				rich:false
			},
			methods:{	
			}
		});
	</script>
</html>

v-if是创建或者删除p，而v-show实际会将p标签的css样式的display属性设为none来达到隐藏的效果；所以在频繁变动的情况下，使用v-show的效率更高

2. v-for

普通for

<body>
<div id="app">

    <ul>
        <li v-for="a in args">{{a}}</li>
    </ul>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>

带着索引的for

<body>

<div id="app">

    <ul>
        <li v-for=" (a,i)  in  args" :key='i'>{{i}}{{a}}</li>
    </ul>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });

</script>

遍历一个对象中的信息： v、k、i

<body>

<div id="app">

    <ul>
        <li v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</li>
    </ul>

</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
    	el:'#app',
    	data:{
       	 	student:{
            	username:'小鱼',
				age:20,
				girl:'如花'
        	}
    	}
	});

</script>

v、k、i 这几个字符可以自己定义，分别表示每次循环内容的值、键、序号。

v: 循环中每条数据的值小鱼、20、如花
k: 循环中每天数据的键 username、age、girl
i: 循环的序号，从0开始

遍历一个对象数组：嵌套for

<body>
<div id="app">
    <ul>
        <li v-for=" student in students">
        	<span v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</span>
    	</li>
    </ul>
</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

<script>
    new Vue({
    	el:'#app',
    	data:{
       	 	students:[
            	{
                	name:'xiaoming',
                	age:20
            	},
            	{
                	name:'xiaowang',
                	age:21
            	}
        	]
    	}
	});
</script>

3. 属性绑定

1. 双向绑定 v-model

通过v-model将标签的value值与vue对象中的data属性值进行绑定

<input type=“text” v-model=“title”> {{title}}

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="title">
			{{title}}
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				title:"hello vue"
			}
			
		})
	</script>
</html>

通过这种方式，vue中的数据和输入框中的数据就能保持一致，互相变化

2. 单向绑定 v-bind

插值表达式是不能用在html的标签的属性内，如果一定要用vue的值作为html的标签的属性的内容，可以使用v-bind

<a v-bind:href=“link”></a>

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="link"></a>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				link:'http://www.baidu.com'
			}
		})
	</script>
</html>

这样，a标签内的href属性就可以使用vue对象中的属性值。

注意： v-bind也可以简写，使用冒号“:”来代替

<a v-bind:href='link'></a>  ==>  <a :href='link'>

4. el和render

el用来指明vue挂载的元素，可以实String或者element

render方法的实质就是生成template模板

cli2中

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

cli3中

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

5. new Vue（）和export default{}的区别

new Vue()就是一个构造函数，用来生成一个Vue实例

export default{}是用来将实例导出，可以在别的文件中，通过import被引用

四：Vue的事件绑定

关于事件，要把握好三个步骤：

设参
传参
接参

例如

设参：<button type=“button” @click=“increase(2)”>增加</button>
传参：increase:function(s)
接参：this.sum+=s

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			sum={{sum}}<br/>
			{{sum>10?'总数大于10':'总数不大于10'}}<br/>
			<button type="button" @click="increase(2)">增加</button>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				sum:0
			},
			methods:{
				increase:function(s){
					this.sum+=s
				}
			}
		})
	</script>
</html>

1. v-on

通过具体的事件名，绑定vue中定义的函数

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-on:click="changeMajor"  />
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
    		el:'#app',
    		data:{
        		major:'java'
    		},
    		methods:{
        		sayHi:function(){
            		alert("HELLO VUE!");
        		},
        		changeMajor:function(){
            		console.log("change Title")
        		}
    		}
	</script>
</html>

此时，该按钮，在点击时将会调用Vue对象中定义的changeMajor方法。

注意： v-on也可以简写，使用"@"替代。

<input type="text" @click="changeMajor"  />

2. 事件修饰符

vue中将JavaScript中一些原生的Dom事件进行了封装，更加便于操作

.stop：等同于event.stopPropagation()，防止事件冒泡

.prevent：等同于event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

.capture：与事件冒泡的方向相反，事件捕获由外到内

.self：只会触发自己范围内的事件，不包含子元素

.once：只会触发一次

可参考：

https://www.cnblogs.com/xuqp/p/9406971.htm

3. 计算属性 computed

说明

methods：定义方法，调用方法使用 currentTime1()，需要带括号
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化

注意：methods 和 computed 里不能重名

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局篇 计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>

<div id="vue">
    <p>调用当前时间的方法：{{currentTime1()}}</p>
    <p>当前时间的计算属性：{{currentTime2}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

五 Vue的组件

1. 什么是组件化

要想实现组件化，需要在页面中注册组件：关于注册的方式有两种，分别是全局注册和本地注册。

组件包含了三个部分：template（html视图层内容）、script（Model层）、style（CSS样式）

1.1 全局注册

使用Vue.compent（）实现组件的全局注册，全局注册后可以重复使用

vue的全局注册，也就意味着在页面的任意一个被vue绑定过的div中，都可以使用全局注册了的vue组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的全局注册</title>
</head>
<body>

    <div id="app">

        <model1></model1>
        <model1></model1>
        <model1></model1>

    </div>
        <hr/>
    <div id="app1">

        <model1></model1>
        <model1></model1>
        <model1></model1>

    </div>


</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
	//通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。
    Vue.component("model1",{

        template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
        data:function(){
            return {
                title:"hello vue"
            }
        },
        methods:{
            btnfn:function(){
                alert("hello !!!");
            }
        }
    });

    new Vue({
        el:'#app'
    })
    new Vue({
        el:'#app1'
    })


</script>

</html>

1.2 本地注册

**使用new Vue（）；的方式进行本地注册

但是，如果是对vue组件进行本地注册，那么在其他被vue绑定的div中，不能使用该组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的本地(局部)注册</title>
</head>
<body>

    <div id="app">

        <model11></model11>
    </div>
	<hr/>
    <!--在这里使用组件model11会报错-->
    <div id="app1">
        <model11></model11>
    </div>


</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        components:{
            "model11":{

                template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
                data:function(){
                    return {
                        title:"hello vue"
                    }
                },
                methods:{
                    btnfn:function(){
                        alert("hello !!!");
                    }
                }
            }
        }
    })
    new Vue({
        el:'#app1'
    })

</script>

2. 组件的生命周期

Vue中的组件也是有生命周期的。一个Vue组件会经历：初始化、创建、绑定、更新、销毁等阶段，不同的阶段，都会有相应的生命周期钩子函数被调用

<html>
	<head>
		<meta charset="UTF-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app1">
			{{title}}
			<button type="button" @click="changeTitle">change title</button>
			<button type="button" @click="destroy">destroy</button>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		new Vue({
			el:"#app1",
			data:{
				title:"this is title"
			},
			methods:{
				changeTitle:function(){
					this.title= "new title";
				},
				destroy:function(){
					this.$destroy();
				}
			},
			beforeCreate(){
				console.log("beforeCreate")
			},
			created(){
				console.log("created")
			},
			beforeMount(){
				console.log("beforeMount")
			},
			mounted(){
				console.log("mounted")
			},
			beforeUpdate(){
				console.log("beforeUpdate")
			},
			updated(){
				console.log("updated")
			},
			beforeDestroy(){
				console.log("beforeDestory")
			},
			destroyed(){
				console.log("destory")
			}
		})
	</script>
</html>

3. 组件的参数传递

1. 父传子

通过子组件的props部分，来指明可以接收的参数，父组件通过在标签中写明参数的键值对来传递参数。

props是表示一个组件的参数部分，那么props的写法有两种：

1）props:[参数列表]

比如： props:[‘MyProp1’,‘MyProp2’,…]

2）props:{参数名1:{type:String,required:true,default:‘XX’},参数名2:{…}}

创建子组件

<template>
    <div>
      商品列表...
      {{MyTitle}}
      <button type="button" @click="btnfn('hello java')">点我</button>
    </div>
</template>

<script>
    export default {
        name: "Content.vue",
        props:{
          'MyTitle':{
            type:String,
            required:true,
            default:'XX'
          },
          'btnfn':{
            type:Function
          }
        }
    }
</script>

<style scoped>

</style>

注册子组件：在main.js中注册子组件

import Vue from 'vue'
import App from './App.vue'
//引入Content
import Content from './components/Content'


//全局注册组件
Vue.component('MyContent',Content);

new Vue({
  el: '#app',
  render: h => h(App)
})

创建父组件

<template>
  <div id="app">
		<MyContent :MyTitle="msg"  :btnfn="FCfn" ></MyContent>
  </div>
</template>

<script>
  import MHeader from './components/Header'
export default {
  name: 'app',
  data(){
    return {
      msg:'hello vue!!'
    }
  },
  components:{
    "MHeader":MHeader
  },
  methods:{
    FCfn:function(m){//hello java
      this.msg = m;
    }
  }

}
</script>
<style>

</style>

2. 子传父

六：路由

通过使用路由，可以实现页面的跳转

使用路由的方式有两种:

通过<router-link></router-link>
通过程序式路由

安装路由模块

npm install vue-router -s

在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/>'
})

1. 创建App.vue

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><router-link to="/Home">首页</router-link></li>
      <li role="presentation"><router-link to="/Product">商品列表</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

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

2. 创建Home.vue

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

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

<style scoped>

</style>

3. 创建Product.vue

<template>
    <div>商品列表 商品的id:{{id}}</div>
</template>

<script>
export default {
    name: "Product",
    data(){
      return{
        id:this.$route.params.id //接参
      }
    }
}
</script>

<style scoped>

</style>

4. 增加路由列表：修改路由表src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from "../components/Home";
import Product from "../components/Product";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/Home',
      component: Home
    },
    {
      path:'/Product/:id', //设参
      component:Product
    }
  ]
})

5. 参数的传递

在路由表中设参

export default new Router({
  routes: [
	...
    {
      path:'/Product/:id', //设参
      component:Product
    }
  ]
})

在App.vue中传参

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      ...
      <li role="presentation"><router-link to="/Product/1">商品列表</router-link></li>
      ...
    </ul>
    <router-view/>
  </div>
</template>

在Product.vue中接参

<template>
    <div>商品列表 商品的id:{{id}}</div>
</template>

<script>
export default {
    name: "Product",
    data(){
      return{
        id:this.$route.params.id //接参
      }
    }
}
</script>

<style scoped>

</style>

6. 程序式路由的实现

使用进行路由跳转是有局限性的，可以通过**this.$router.push(’/Product/1’）**的js方式实现路由跳转，更加灵活。

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><router-link to="/Home">首页</router-link></li>
      <li role="presentation"><router-link to="/Product">商品列表</router-link></li>
      <button type="button" @click="btnfn">点我</button>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    btnfn(){
      //代替router-link实现路由跳转
      this.$router.push("/Product/1");
    }
  }

}
</script>

七：使用Axios发送请求

安装vue axios

npm install --save axios vue-axios

在main.js中引入

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

1. 发送Ajax请求

在function中这样写

his.axios({
        method:'get',
        url:'http://localhost:8090/regist?mail='+this.mail+'&password='+this.password,

      }).then(function (response) {
        console.log(response.data)
      });

<template>
  <div id="app">
    <div style="width:50%" class="container">
      <div>
        <h3>Regist</h3>
        <h5>Email</h5>
        <input type="text" class="form-control" v-model="mail" /><br />
        {{mail}}
        <h5>Password</h5>
        <input type="password" class="form-control" v-model="password" /><br />
        {{password}}
        <h5>Gender</h5>
        <input type="radio" name="gender" v-model="gender" value="female" />男
        <input type="radio" name="gender" v-model="gender" value="male" />女<br />
        <h5>Hobby</h5>
        <input type="checkbox" name="hobby" v-model="hobby" value="music">音乐
        <input type="checkbox" name="hobby" v-model="hobby" value="movie">电影
        <input type="checkbox" name="hobby" v-model="hobby" value="sport">运动
        <br/>
        <button type="button" class="btn btn-success" @click="registfn">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
  import MHeader from './components/Header'
export default {
  name: 'app',
  data(){
    return {
      mail:'',
      password:'',
      gender:'',
      hobby:''
    }

  },
  methods:{
    registfn:function(){

      this.axios({
        method:'get',
        url:'http://localhost:8090/regist?mail='+this.mail+'&password='+this.password,

      }).then(function (response) {
        console.log(response.data)
      });
    }
  }
}
</script>

2. 服务端解决跨域问题

跨域：域名、端口号、协议(http/https)任何一个不相同都属于跨域

在spring-mvc.xml中加入这一段。其中，allowed-origins指的是允许的访问源的域名，"*"表示任何人都可以访问，也可以指明具体的域名

<mvc:cors>      
    <mvc:mapping path="/"        allowed-origins="*"        allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH"        allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"        allow-credentials="true" />
</mvc:cors>

3. 解决axios中无法传递data中的参数的问题

原因：默认情况下发送axios时请求头中的内容类型为：（后端没有使用@RequestBody）

Content-Type:application/json;charset=UTF-8

而实际服务端需要的是：

Content-Type:application/x-www-form-urlencoded

因此，使用axios的qs内置库中的方法进行内容类型的转换

import Qs from 'qs'

this.axios({
	method:'post',
	url:'http://localhost:8081/regist',
	transformRequest: [function (data) {
		return Qs.stringify(data)
	}],
	data:{
		email:this.email
	}
})
.then(function (response) {
	alert(response.data.message)
});