目录

一. 框架概述

二. 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生命周期函数

目录

一. 框架概述

二. 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中配置路由

六. 解决npm下载依赖很慢

一. 框架概述

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

二. vue常用命令

2.1 插值表达式 

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

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

  	 		 		 		 		 	 	 		 		{{message}} 插入一个值,不影响标签中的其他内容 		 		{{message}}不能解析内容中html标签 		--> 		
 			
{{message}} aaaaa
 		
 		 		 	 

2.2 v-text

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

  	 		 		 		 		 	 	 		<--  		{{message}} 插入一个值,不影响标签中的其他内容 		v-text="message" 会覆盖标签中其他内容 		 		--> 		
 			
{{message}} aaaaa
 			
aaaaa
 		
 		 		 	  

2.3 v-html

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

  	 		 		 		 		 	 	 		 		
 			
aaa
 		
 		 		 	 

三者的区别: 

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

2.4 v-on

作用:为标签绑定事件

有两种写法

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

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

2.5 v-model 

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

2.6 v-show

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

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

  	 		 		 		 		 		 	 	 		 		
 			  			18" src="img/4.jpg" />
  			 			 			 			 		 	 

 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中对其进行修改以达到动态改变的目的

写法:有两种

1. v-bind:
2. :

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

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

  	 		 		 		 		  		  	 	 		 		 		
 			 			
www
               			 		
 		 		 	 

2.10 v-for

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

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

  	 		 		 		 	 	 		
 			
 			{{index+1}} 			姓名:{{user.name}} 			年龄:{{user.age}} 			性别:{{user.gender}} 			
 			 		
 		 		 	 

三. vue生命周期函数

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

  	 		 		 		 	 	 		
 			
 			姓名:{{user.name}} 			年龄:{{user.age}} 			性别:{{user.gender}}