vue.js入门

一. 框架概述

二. vue常用命令

2.1 插值表达式

2.2 v-text

2.3 v-html

2.4 v-on

2.5 v-model

2.6 v-show

2.7 v-if

2.8 v-else

2.9 v-bind

2.10 v-for

三. vue生命周期函数

一. 框架概述

我们之前写的javaScript代码都是原生的,而框架是在基础语言之上,对其进行了封装,使我们只关心要操作的数据,而不关心如何从对象上得到数据,方便程序员进行开发,提高效率的,我们要介绍的vue.js就是前端的一种框架,它是对javaScript的一种封装

二. vue常用命令

2.1 插值表达式

写法:{{vue中的数据}}

作用:可以根据括号里vue中的数据获取到对应的值,只要vue中与它对应的数据发生改变,插值表达式中的值也会发生改变,一般用于设置文本内容,不影响标签中原本的值,但不能解析内容中的html标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		
		{{message}} 插入一个值,不影响标签中的其他内容
		
		{{message}}不能解析内容中html标签
		-->
		<div id="app">
			<p>{{message}} aaaaa</p>
		</div>
		
		<script>
			/*
			 创建一个vue对象
			 */
			var app = new Vue({
				el: '#app',
				data:{
					message: '<b>Hello Vue!</b>'
				}
			})
		</script>
	</body>
</html>

2.2 v-text

作用:设置标签中的文本内容,默认格式会覆盖标签中原本的内容,用插值表达式不会覆盖标签中原本的内容,不能解析内容中的html标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<--

		{{message}} 插入一个值,不影响标签中的其他内容
		v-text="message" 会覆盖标签中其他内容
		
		-->
		<div id="app">
			<p>{{message}} aaaaa</p>
			<p v-text="message">aaaaa</p>
		</div>
		
		<script>
			/*
			 创建一个vue对象
			 */
			var app = new Vue({
				el: '#app',
				data:{
					message: '<b>Hello Vue!</b>'
				}
			})
		</script>
	</body>
</html>

2.3 v-html

作用:设置元素的innerHTML,可以解析内容中的标签,会覆盖标签中原本的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!--
		v-html="message"会覆盖标签中其他内容
		
		v-html="message" 可以解析内容中html标签
		-->
		<div id="app">
			<p v-html="message">aaa</p>
		</div>
		
		<script>
			/*
			 创建一个vue对象
			 */
			var app = new Vue({
				el: '#app',
				data:{
					message: '<b>Hello Vue!</b>'
				}
			})
		</script>
	</body>
</html>

三者的区别:

插值表达式不会覆盖标签中原本的内容,v-text和v-HTML会覆盖标签中原本的内容
v-HTML能解析内容中的标签,插值表达式和v-text不能解析

2.4 v-on

作用:为标签绑定事件

有两种写法

在标签后面写v-on:事件类型="调用的函数"
@事件类型="调用的函数"

调用的函数定义在Vue对象的methods属性中,也可以传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--导入vue.js-->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!--
			v-on:click="函数名" 为标签添加事件
			@click="test2(2)"
			
			-->
			<input type="button" value="按钮1" v-on:click="test1(1)"/>
			<input type="button" value="按钮2" @click="test2(2)"/>
		</div>
		
		<script>
			/*
			 创建一个vue对象
			 */
			var app= new Vue({
				el:'#app',
				data:{
					message: '<b>Hello Vue!</b>',
					name:""
				},
				methods:{//在vue中声明函数
					test1(a){
						this.message = this.message.split("").reverse().join("");
					},
					test2(a){
						this.name = "tom";
					}
				}
			})
		</script>
	</body>
</html>

2.5 v-model

作用:便捷的设置和获取表单元素的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--导入vue.js-->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!--
			v-model="变量" 把表单元素的value值 绑定到vue对象data中
			-->
			
			<input type="button" value="按钮2" @click="test2(2)"/>

			<input v-model="name"/>

		</div>
		
		<script>
			/*
			 创建一个vue对象
			 */
			var app= new Vue({
				el:'#app',
				data:{
					message: '<b>Hello Vue!</b>',
					name:""
				},
				methods:{//在vue中声明函数
					
					test2(a){
						this.name = "tom";
					}
				}
			})
		</script>
	</body>
</html>

2.6 v-show

作用:根据给定值的真假,切换元素的显示状态

原理:修改标签对应的display属性,实现显示和隐藏,效率高,v-show后面的值最终都会被解析为布尔值,为true表示显示,false表示隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
		
	</head>
	<body>
		<!--
		v-show="布尔值" true-显示 false-隐藏  控制标签display属性 隐藏显示标签的,效率高
		-->
		<div id="app">
			<img v-show="isShow" src="img/3.jpg" />

			<img v-show="age>18" src="img/4.jpg" /></br> <!--age>18为true,显示 age<=18为false 隐藏-->
			
			
			<input type="button" value="切换" v-on:click="oper()">
			
		<script>
			var v = new Vue({
				el: '#app',
				data:{
					isShow:true,
					age:15
				},
				methods:{
					oper(){
						this.isShow=!this.isShow;
						this.age = 19;
					}
				}
			})
		</script>
	</body>
</html>

2.7 v-if

作用:根据v-if后面的表达式真假切换元素的显示状态,和v-show作用相同,但有一些差别

原理:当表达式为false时,表示隐藏,会直接将该标签删除,为true时又会重新创建该标签,效率比v-show低

注意区分v-show和v-if的区别

2.8 v-else

作用:v-else必须紧跟在v-if的后面,表示当if的条件不成立时,if后面的隐藏了,else后面的显示,当if条件成立,if后面显示,else后面隐藏

2.9 v-bind

作用:为元素绑定一个属性,写在v-bind后面的元素的值是一个变量,可以在vue的data中对其进行修改以达到动态改变的目的

写法:有两种

v-bind:
:

第二种写法是在元素之前直接加一个冒号即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
		
	</head>
	<body>
		<!--
		需求: 标签的属性值可以 动态修改
		v-bind:属性名="变量名" 一旦为属性添加v-bind 值就是一个在data中定义的变量了
		还可以简写为:属性名
		-->
		
		<div id="app">
			<img v-bind:src="imgurl[index]" :title="array[index]">
			
			<input type="button" @click="oper()" value="操作" />
		</div>
		
		<script>
			var v = new Vue({
				el:"#app",
				data:{
					imgurl:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],
					array:["苹果手机","华为手机"],
					index:0,
					
				},
				methods:{
					oper(){
						if(this.index!=this.imgurl.length-1){
							this.index++;
						}else{
							this.index=0;
						}
						
					}
				}
			})
		</script>
	</body>
</html>

特殊:给class属性绑定一个bind,可以动态切换class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>

		<style>
			.active{
				color: red;
			}
		</style>

	</head>
	<body>
		<!--
		需求: 标签的属性值可以 动态修改
		v-bind:属性名="变量名" 一旦为属性添加v-bind 值就是一个在data中定义的变量了
		还可以简写为:属性名
		-->
		
		<div id="app">
			
			<div v-bind:class="{active:isActive}">www</div>

            <input type="button" @click="oper()" value="操作" />
			
		</div>
		
		<script>
			var v = new Vue({
				el:"#app",
				data:{
					
					isActive: true
				},
				methods:{
					
						oper(){

						this.isActive = !this.isActive;
					}
				}
			})
		</script>
	</body>
</html>

2.10 v-for

作用:根据数据生成列表结构

数组经常和v-for结合,通常将后端的数据以数组或集合的形式发送到前端,前端可以用v-for来将数组/集合中的内容显示到标签上(网页上)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<ul id="uid">
			<li v-for="(user,index) in users">
			{{index+1}}
			姓名:{{user.name}}
			年龄:{{user.age}}
			性别:{{user.gender}}
			</li>
			
		</ul>
		
		<script>
			var v = new Vue({
				el:"#uid",
				data:{

					users:[{name:"jim",age:20,gender:"男"},
					      {name:"tom",age:22,gender:"男"},
						  {name:"lili",age:20,gender:"女"}],

				},
			})
		</script>
	</body>
</html>

三. vue生命周期函数

vue对象在生命周期的每个阶段(创建前,创建后,挂载前,挂在后),都为我们提供了会自动执行的钩子函数,我们后端一般关注和标签挂载后,即mounted函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<ul id="uid">
			<li v-for="user in users">
			姓名:{{user.name}}
			年龄:{{user.age}}
			性别:{{user.gender}}
			</li>
			
		</ul>
		
		<script>
			var v = new Vue({
				el:"#uid",
				data:{
					
					users:[{name:"jim",age:20,gender:"男"},
					      {name:"tom",age:22,gender:"男"},
						  {name:"lili",age:20,gender:"女"}],
						  
					student:{name:"张三",age:18,gender:"男"}
				},
				methods:{//自定义函数
					
				}, //vue对象生命周期 钩子函数 在生命周期的每个阶段为我们提供了一个函数,可以自动执行
				beforeCreate(){//vue对象创建前
					console.log("beforeCreate");
				},
				created(){//vue对象创建后
					console.log("created");
				},
				beforeMount(){//vue对象挂载前
					console.log("beforeMount");
				},
				mounted(){ //vue对象创建成功 且 与标签绑定后执行 这是我们常用的,在此自动的与后端交互
					console.log("mounted");
				}
			})
		</script>
	</body>
</html>

四.前端项目结构

传统的前端项目结构:一个项目中有很多HTML文件,一个HTML文件表示一个网页,他们之间彼此独立,互相没有联系,我们每次导入其它前端文件时,需要给每一个HTML文件都导入,需要导入的文件一旦过多,就会很麻烦,并且整体看来很乱

现代的前端项目结构:在一个node环境中构建项目(类似于后端的maven),前端改为单页面结构,只有一个HTML文件,所有的配置都是基于这一个HTML文件进行配置,只需要配置一次即可.但是可以有很多的.vue文件,这些不再是一个网页,而是被称为一个组件,需要显示不同的内容时,只需要切换组件即可

五.在HBuilder X中搭建vue-cli项目

1. 安装node.js前端环境

node.js是一个前端运行的环境,可以为前端开发提供服务

下载地址:

https://nodejs.org/en/download

这里注意不勾选,其他的无脑下一步即可,尽量安装到没有中文的路径中,之后打开命令提示符,进行测试,如下,即完成安装

2. HBuilder X创建一个vue-cli项目

注意:因为学的是vue2,所以选择3.6.10版本,第一次创建可能比较慢,要下载很多的依赖,创建完成后,会显示创建成功

3. vue-cli项目结构

4. 如何运行前端项目

补充(如何下载项目中依赖的组件):我们一般在网上下载的前端项目是没有node_modules文件夹的,因为这里面包含的是项目所依赖的外部组件文件,并且该文件夹占用的空间较大,我们可以通过node.js中的命令(类似于maven中的pom.xml文件)来从远程仓库中自己下载,所以不需要别人打包发过来,这样既省空间,又节约时间,该命令是npm install可以下载安装外部依赖组件

项目运行:我们可以打开HBuilder X的终端,输入命令npm run serve

终止项目:ctrl+c

打包项目: npm run build

5. 创建组件

在vue-cli项目的src文件夹下创建一个.vue文件,这里面可以用来写组件(网页)的相关内容

<!--该标签用于写HTML代码,必须有一个根标签,如下<div>是根标签-->
<template> 
	<div>
		登录
	</div>
</template>

<!--该标签用于写js代码,下面是固定格式return里写数据,methods里写函数-->
<script>
	export defaults{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>


<!--该标签用于写css和之前一样-->
<style>

</style>

6. 组件路由(页面跳转)

6.1 创建router目录

在src文件夹下创建router文件夹,并在router文件夹里创建一个index.js文件,在index.js文件中配置路由

配置路由主要是把自己定义的.vue文件(即组件)导入到index.js文件中,并为每个组件配置一个访问地址

1.导入vue

import Vue from 'vue';

2.删除package-lock文件

npm config set package-lock false

使用这个命令以后生成的vue-cli项目中就不会有package-lock这个文件,记得还要删除当前项目中的package-lock这个文件, 因为这个文件中有一些其他版本号的文件,有可能会导致版本不支持等问题,所以建议删除

3.下载vue-router

由于要对组件进行页面跳转就要导入vue-router,但我们没有vue-router这个组件所以要先下载,通过下面语句在终端中执行可以下载vue-router

npm i vue-router@3.5.3

下载成功后在package.json文件中会有新的依赖版本号导入

4.导入路由

 import router from 'vue-router'; /* 导入路由 */

5.导入其他组件

<!--login是你创建组件的组件名,也就是.vue文件的文件名,创建了几个就导入几个-->
<!--
'../views/login'是.vue文件的路径,两个点表示的是回退到上级目录
因为.js文件在router文件中,而我们要导入的组件(.vue文件)和router在一级
所以要回退到.router目录中
-->
import login from '../views/login'; /* 导入其他组件 */

注意:

(1)login是你创建组件的组件名,也就是.vue文件的文件名,创建了几个就导入几个

(2)'../views/login'是.vue文件的路径,两个点表示的是回退到上级目录因为.js文件在router文件中,而我们要导入的组件(.vue文件)和router在一级,所以要回退到.router目录中

6.注册,定义组件访问地址

/*  注册  定义组件访问地址  */
  Vue.use(router);

7.为组件路由定义地址

/* 定义组件路由 */
   var rout = new router({
    routes: [
        {
           path: '/index',
           component: Index
        },
        {
           path: '/login',
           component: Login
        },
		{
		   path: '/reg',
		   component: Reg
		}
    ]
});

注意:

(1)path:为组件路由定义访问地址,这个地址以/开始,名字可以任意取,建议和.vue文件(组件)名相同,但是是以小写字母开头

(2)component:这个是和你.vue文件(组件)的名字完全一致,大小写也一致

8. 导出路由对象

export default rout;

default后面的名字和你上一步为组件路由定义访问地址时new router对象的名字一致

以上所有步骤做完后,index.js文件中应该是这样

6.2 使用路由

在你要访问的第一个页面中为内容添加跳转链接

<div>
		首页
		<router-link to="/login">登录</router-link>
		<router-link to="/reg">注册</router-link>
</div>

6.3 在main.js中配置路由

在main.js中将刚才配置好的index.js文件导入进去,并将,router对象绑定到全局唯一的vue对象中

<!--路径中一个点表示同级目录下-->
import router from './router/index.js'

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

最后在终端使用npm run serve启动项目,如果出现访问地址则表示配置成功

vue.js入门

一. 框架概述

二. vue常用命令

2.1 插值表达式

2.2 v-text

2.3 v-html

2.4 v-on

2.5 v-model

2.6 v-show

2.7 v-if

2.8 v-else

2.9 v-bind

2.10 v-for

三. vue生命周期函数

四.前端项目结构

五.在HBuilder X中搭建vue-cli项目

1. 安装node.js前端环境

2. HBuilder X创建一个vue-cli项目

3. vue-cli项目结构

4. 如何运行前端项目

5. 创建组件

6. 组件路由(页面跳转)

6.1 创建router目录

6.2 使用路由

6.3 在main.js中配置路由

相关文章