一.Vue

是一个轻量级的前端框架.封装了HTML CSS JS的代码.
特点:
1, 是一个轻量级的渐进式的框架, 按需配置
2, 实现了数据驱动/双向绑定和组件化的思想(高内聚)
3, vue框架可以避免了DOM的API
4, 遵循了MVVM设计模式,实现前端代码的松耦合
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据

1.把vue.js导入到你的项目中

2.创建HTML文件,并引入vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue框架</title>
		<!-- 1.引入vue.js来用vue框架的核心功能 
			src用来指定js文件的位置
		-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备解析vue的数据 
			{{message}}是插值表达式,用来获取message的值
		-->
		<div id="app"> {{message}} </div>
		<!-- 3.给第二步准备数据 -->
		<script>
			var a={
				message:"hello vue~"
			}
			//1,创建Vue对象
			new Vue({
				//el挂载点,意思是,把数据挂载到指定位置
				el:"#app",//利用CSS的id选择,选中了网页中的元素
				//data是vue为挂载点准备好的数据
				data:a
			})
		</script>
	</body>
</html>

3.测试

运行到浏览器查看页面是否出现hello vue~

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习 vue开发步骤</title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区,插值表达式获取属性的值-->
		<div id="app">
			姓名:{{name}}
			年龄:{{age}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app" , //挂载点
				data:{ //给挂载点准备数据
					name:"jack" ,
					age:20
				} 
			})
		</script>
	</body>
</html>

4.Vue的基础语法

1.运算符&函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue的运算符</title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 创建Vue对象 -->
		<div id="app">
			加减乘除运算: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
			三元运算符: {{ age > 18 ? "成年人" : "未成年" }}
			字符串的常见操作:{{str}} {{str.length}} {{str.concat(100)}}
		
			调用函数: {{ show() }}  {{ print(100) }}  {{add(1,2)}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				//指定挂载点的位置,每个Vue对象必须有这个el属性!!!
				el:"#app",
				data:{ //给数据渲染区准备数据
					age:10,
					str:"hello"
				},
				methods:{ //准备函数
				 //函数名:函数的声明
					show:function(){
						console.log("show()调用成功!");
					},
					print:function(a){
						console.log("print()调用成功"+a);
					},
					add:function(a,b){
						console.log(a+b);
					}
				}
			})
		</script>
	</body>
</html>

2.解析类型丰富的data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue解析复杂的数据</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{name}}
			<h1>解析vue对象的数据:</h1>
			<h1>姓名:{{person.name}}  年龄:{{person.age}} </h1>
			<h1>解析vue数组的数据:</h1>
			<h2>{{hobby}}  {{hobby[0]}}  {{hobby[1]}} </h2> 
			<!-- 数组名[下标].属性名   目的是来获取每个对象中属性对应的值 -->
			<h2>{{persons[0].name}}  {{persons[1].age}}</h2>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					name:"jack",
					//对象名:对象的多个特征
					person:{
						name:"rose",
						age:20
					},
					//数组
					hobby:["篮球","足球"],
					//数组
					persons:[
						{ name:"jack" , age:20 },
						{ name:"rose" , age:10 }
					]
				}
			})
		</script>
	</body>
</html>

3.data的三种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三种写法</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="a">
			{{msg}} {{hobby[0]}}
		</div>
		<script>
			new Vue({
				el:"#a",
				//通过函数,设置返回值--vue项目中组件化的使用
				// data:function(){
				data(){//效果同上,是上面代码的简写形式
					//必须返回js对象
					return {
						msg:"hello vue",
						hobby:[1,2,3]
					}
				}
			})
		</script>
	</body>
</html>

二.Vue的指令

就是Vue框架提供的一些有特殊意义的代码,都有v-的前缀
常见的指令: v-if v-for v-on …
使用方式: 在开始标签处,添加新的属性,有v-的前缀的标识

1.v-model & v-cloak

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue指令</title>
		<script src="vue.js"></script>
		<style>
			/* 语法: 选择器{样式1;样式2;...} */
			[v-cloak]{/* 选中有指定属性的元素 */
				display: none; /* 隐藏 */
			}
		</style>
	</head>
	<body>
		<!-- 2.v-cloak指令:解决插值表达式的闪现问题 -->
		<div class="a" v-cloak>
			{{address}}  {{address}} {{address}}
			<!-- 1.v-model指令:双向绑定,是指V和M的数据可以实时同步
					address值是指你的数据要和哪个属性进行绑定.
					可以获取也可设置属性的值
			 -->
			<input type="text" v-model="address"/>
		</div>
		{{address}}
		<script>
			new Vue({
				el:".a",
				data(){
					return{
						address:"北京"
						
					}
				}
			})
		</script>
	</body>
</html>

2.v-if & v-show & v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue指令</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{name}}</h1>
			<!-- 3.v-text和v-html 指令 都是用来获取属性值的，
				区别是:前者无法解析HTML标签只能当做一个普通文本展示
				      后者可以解析数据中出现的HTML标签
			-->
			<h1 v-text="name"></h1>
			<h1 v-html="name"></h1>
			<!--4.v-if指令,判断条件满足时就展示元素,不满足就不展示
				了解:v-if和v-show区别?都可以判断,不满足时前者干脆不会解析元素
				后者会解析这个元素但是结合css代码来隐藏style="display: none;"
			-->
			<div v-if="age>18">年成人</div> 
			<div v-show="age>18">年成人</div> 
			<!--5.v-if指令的复杂使用 if...else if...else语法同java-->
			<div v-if="salary>20000">金领</div>
			<div v-else-if="salary>10000">白领</div>
			<div v-else>屌丝</div>
			<!--6.v-for指令用来循环遍历,通常用来遍历数组,语法类似forin,
				i是获取遍历得到的数据,in是固定语法,hobby是数组名,index是下标
			-->
			<div v-for="i in hobby">{{i}}</div>
			<div v-for="i,index in hobby">{{i}}--{{index}}</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data(){
					return{
						name:"<p>tony</p>",
						age:10,
						person:{
							salary:10000
						},
						hobby:["吃","喝","王者","Anglelababa"]
					}
				}
			})
		</script>
	</body>
</html>

3.v-on & v-bind

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测 vue指令</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 0.是HTML的元素 -->
		<button onclick="alert(1)">按钮1</button>
		<a href="https://www.baidu.com/">百度一下</a>
		
		<div id="app">
			<!-- 1.v-on指令:给元素绑定不同的事件,可以简写成@ -->
			<button v-on:click="show()">按钮2</button>
			<button v-on:dblclick="print(100)">按钮3</button>
			<button @click="add(1,2,3)">按钮4</button>
			
			<!-- 问题:跳转时404,没有把url当变量,而是直接把整体当做跳转路径 -->
			<a href="{{url}}">百度一下1</a>
			<!-- 2.v-bind指令:把url当变量,去获取了变量的值进行跳转
				 v-bind:href可以简写成:href,意思是后面出现的url是变量不是字符串
			 -->
			<a v-bind:href="url">百度一下2</a>
			<a :href="url">百度一下3</a>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{ 
					url:"http://www.baidu.com/"
				},
				methods:{
					//函数名:函数声明(参数列表){函数体} 
					show:function(){
						console.log(100)
					} ,
					print:function(a){
						console.log(a);
					},
					//函数名(参数列表){函数体},是上面函数的简写方式
					add(a,b,c){
						console.log(a+b+c);
					}
				}
			})
		</script>
	</body>
</html>

三.Vue组件Component

好处:可以提高前端代码的复用性.
使用步骤:
1,定义组件: 全局组件 + 局部组件
2,使用组件: 就像使用HTML的标签一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 局部组件</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<Car></Car><!-- 2.使用了局部组件 -->
			<Student></Student><!--使用了全局组件-->
		</div>
		<div id="a">
			<Student></Student><!--使用了全局组件-->
		</div>
		<script>
			//全局组件
			Vue.component('Student',{
				template:'<h1>这是一个全局组件</h1>'
			})
			//局部组件:只能当前对象(在指定的数据渲染区)使用
			new Vue({
				el:"#a"
			})
			new Vue({
				el:"#app",
				//1.创建局部组件
				components:{
					//组件名:组件的内容
					Car:{
						template:"<p>这就是Car组件!</p>"
					}
				}
			})
		</script>
	</body>
</html>

四.Vue路由Router

基于Vue组件化的思想,
从用户发起一个请求,一直到展示指定组件,这个过程就是Vue路由负责的
使用步骤: vue.js + vue-router.js 引入到网页中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue路由</title>
		<!-- 1.引入js文件,注意顺序! -->
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区,即将展示组件的功能 -->
		<div id="app">
			<!-- 3.4,点击不同的元素,即将路由到不同的组件 -->
			<router-link to="/home">主页</router-link>
			<router-link to="/help">帮助页</router-link>
			<!-- 3.5,展示组件的内容 -->
			<router-view></router-view>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			//3.3,创建组件,让路由动态匹配
			var home={
				template:'<h1>我是主页..</h1>'
			}
			var help={
				template:'<h1>我是帮助页..</h1>'
			}
			//3.2,创建路由的细则
			//VueRouter表示vue路由的对象,routes属性用来描述细则
			var router=new VueRouter({
				//属性名:属性值
				routes:[
					//根据不同的请求,路由到不同的组件
					//path:访问路径,component:组件名称
					{path:"/home",component:home}  ,
					{path:"/help",component:help}
				]
			})
			new Vue({
				el:"#app",
				//3.1,设置路由功能
				// router:router //key 和value一样时,可以简写
				router//同上,简写形式
			})
		</script>
	</body>
</html>

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习路由</title>
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/runoob">runoob</router-link>
			<router-link to="/w3c">w3c</router-link>
			<router-view></router-view>
		</div>
		<script>
			var runoob={
				template:"<a href='http://www.runoob.com'>http://www.runoob.com</a>"
			}
			var w3c={
				template:"<a href='http://www.w3school.com.cn'>http://www.w3school.com.cn</a>"
			}
			var router=new VueRouter({
				routes:[
					{path:"/runoob", component:runoob},
					{path:"/w3c", component:w3c}
				]
			})
			new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

五.Vue的ajax

可以避免刷新整个网页,而实现了局部刷新的效果,异步访问的.
提高了网页的动态性,提高了网页的响应速度.
在Vue框架中,封装了Ajax的复杂语法,技术命名叫axios,
使用步骤: 导入vue.js + axios.js 文件
语法: axios.get(java程序的访问方式).then( a => { console.log(a); } )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 axios的语法</title>
		<!-- 1.导入js文件:
			vue.js核心 + vue-router.js是路由 + axios.js使用vue封装好的Ajax技术
		 -->
		<script src="vue.js"></script>
		<script src="axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="show()">按钮</button>
		</div>
		<script>
			//Vue的属性:el挂载点 + data数据区 + methods方法区 
			      //components局部组件 + router创建路由
			new Vue({
				el:"#app" ,
				methods:{
					show(){
						//vue提供的对象,get函数是指即将发起一个get请求
						//参数是一段java程序的访问方式
						//当程序访问成功时,then函数是vue自动调用的函数
						axios.get('http://www.baidu.com/').then(
							//a记录着java程序的返回值return
							//=>叫箭头函数
							a => {
								//在函数体重,处理返回的结果
								console.log(a.data);
							}
						)
					}
				}
			})
		</script>
	</body>
</html>

六.Vue-cli

npm:包管理器,npm命令会去指定的网址下载/安装好多的包(文件夹结构)
webpack:自动化构建项目的命令,可以自动下载项目相关的资源(html css js 图片),而且可以自动压缩,打包.

安装vue-cli

为了能够成功的使用vue项目,必须先安装vue-cli脚手架

1.安装nodejs.mis的应用程序

(win7系统只能装nodejs13的,win10系统装nodejs14),
双击下一步下一步就可以了.

2.验证nodejs是否安装:

C:\Users\WangYiBo>node -v
v14.17.5

3.安装脚手架:

C:\Users\WangYiBo>npm config get registry  #第一次获取,会是一个国外的网址,即将下载的非常慢,不好,必须修改!
C:\Users\WangYiBo>npm config set registry https://registry.npm.taobao.org #就是把npm的默认网址改成淘宝的!
C:\Users\WangYiBo>npm install vue-cli -g #安装vue脚手架,本质上是去npm下载了好多包,原则是一路没有遇到飘红的ERR,只有黄色的WARN没关系,遇到飘红就重新执行这个命令(也许要多次执行)
C:\Users\WangYiBo>vue -V  #查看vue-cli的版本
2.9.6
C:\Users\WangYiBo>where vue #查看下载的位置 (npm文件夹有20M左右)

七.创建Vue项目!!

1.首先创建一个文件夹,用来存放下载好的vue项目资源

E:\workspace\vue>vue

2.在这个文件夹处,执行命令来下载

E:\workspace\vue>vue init webpack jt01  #准备下载jt项目
#下载一些项目需要的资源,但是要进行一些配置,参考下图选择yes或者no

3.检查:

原则还是一路没有遇到飘红的ERROR
还有提示信息: Project initialization finished!

4.启动项目

E:\workspace\vue>cd jt01  #进入项目所在的文件夹
E:\workspace\vue\jt01>npm run dev   #启动项目(在哪个项目执行这个命令就启动哪个项目)

5.访问项目

到浏览器中输入localhost:8080/#/查看是否有Vue.js App的界面

八.使用Vue项目

1.用Hbuilder打开你下载好的项目.

文件-打开目录-浏览项目位置-打开

2.在vue项目中添加自定义组件

在src/components文件夹里,创建自定义组件Person.vue

<template>
  <div>
      {{msg}}
  </div>
</template>
<script>
//表明 这个组件可以导出
export default{
    name:'Person',//组件名
    data(){
      return{
        msg :'hello vue project~'
      }
    }
}
</script>

<style>
</style>

在src/components文件夹里,创建自定义组件Student.vue

<template>
  <h1>姓名：{{name}}</h1>
</template>

<script>
  export default{
    name:'Student',
    data(){
      return{
        name:"hello vue~"
      }
    }
  }
</script>

<style>
</style>

3.在src/App.vue文件里,注册组件修改App.vue

<template>
  <div id="app">
    //3,使用自定义的组件
    <Person></Person>
    <Student></Student>
  </div>
</template>
<script>
//1.导入指定的自定义组件 ,路径要求必须有./
import Person from './components/Person.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  components:{ //2.添加组件
    Person,//使用第一步导入成功的组件名
    Student
  }
}
</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>

4.测试

进入项目所在的文件夹里,运行启动命令来启动项目 : npm run dev

打开浏览器访问: http://localhost:8080 ,观察有没有展示你自定义组件的内容

//3,使用自定义的组件

hello vue project~

hello vue~

5.在Vue项目中创建路由

1.在src/components文件夹里,创建自定义组件t1.vue

<template>
  <h1>我是t1</h1>
</template>

<script>
</script>

<style>
</style>

在src/components文件夹里,创建自定义组件t2.vue

<template>
  <h1>我是t2</h1>
</template>

<script>
</script>

<style>
</style>

2.在src文件夹里，创建自定义路由router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

//1.引入自定义的组件位置
import t1 from '@/components/t1'
import t2 from '@/components/t2'

Vue.use(Router)

export default new Router({
  routes: [
    /* 2.定义路由的细则,什么请求路由到哪个组件 */
    { path: '/', component: HelloWorld },
    { path: '/t1', component: t1 },
    { path: '/t2', component: t2 }
  ]
})

3.修改App.vue使用路由

<template>
  <div id="app">
    <!-- 3,使用自定义的组件-->
    <Person></Person>
    <Student></Student>

    <!-- 使用路由规则-->
    <router-link to="/t1">t1</router-link>
    <router-link to="/t2">t2</router-link>
    <router-view></router-view>

  </div>
</template>
<script>
//1.导入指定的自定义组件 ,路径要求必须有./
import Person from './components/Person.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  components:{ //2.添加组件
    Person,//使用第一步导入成功的组件名
    Student
  }
}
</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>

4.测试

启动服务器,打开浏览器测试http://localhost:8080，观察页面

//3,使用自定义的组件

hello vue project~

hello vue~

t1 t2 (t1/t2点击可跳转页面)