2.4 VUE基础讲解

最新推荐文章于 2024-04-30 16:57:21 发布

蟑螂恶霸不是恶霸

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量374

点赞数

分类专栏：零基础入门到就业--JAVA篇文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/whatfuswd/article/details/128891573

版权

零基础入门到就业--JAVA篇专栏收录该内容

224 篇文章 3 订阅

订阅专栏

文章目录

1.Vue
- 1.1 Vue概述
- 1.2 同类产品
- 1.3 官网
- 1.4 特点
- 1.5 渐进式框架
- 1.6 入门案例
- 1.7 MVVM框架
2.基础语法
- 2.1 运算符 operator
- 2.2 方法 methods
- 2.3 Vue解析数据
- 2.4 三种data值的写法
- 2.5 练习：写一个点赞按钮
3.高级用法：v-命令
- 3.1 指令集
- 3.2 双向绑定 v-model
- 3.3 闪现 v-cloak
- 3.4 判断 v-if
- 3.5 循环 v-for
- 3.6 事件 v-on
- 3.7 绑定 v-bind
- 3.8 小结
- 3.9 练习
4.Vue组件
- 4.1 概述
- 4.2 使用
- 4.3 案例
5.Vue的Ajax
- 5.1 Ajax概述
- 5.2 Ajax特点
- 5.3 Ajax原理
- 5.4 axios
- 5.5 测试
- 5.6 练习
6.Vue路由
- 6.1 概述
- 6.2 使用步骤
- 6.3 相关案例
- - 6.3.1 入门案例
  - 6.3.2 根据不同元素，展示不同的网址
7.VUE脚手架
- 7.1 VUE的生命周期
- 7.2 VUE脚手架的概念
- 7.3 VUE脚手架的安装
8.HBuilderX管理Vue项目
- 8.1 打开Vue项目
- 8.2 目录结构介绍
- 8.3 重要文件说明
9.在Vue项目中添加自定义组件
- 9.1 概述
- 9.2 项目结构
- 9.3 创建Car.vue文件-自定义组件
- 9.4 修改App.vue文件
- 9.5 测试
- 9.6 自定义组件练习
10.Vue项目中自定义路由
- 10.1 项目结构
- 10.2 自定义组件
- 10.3 自定义路由规则
- 10.4 修改App.vue
11.Element-ui
- 11.1 概述
- 11.2 使用步骤
- 11.3 修改main.js,引入elementui
- 11.4 布局 layout
- 11.5 图标 icon
- 11.6 按钮 button
- 11.7 输入框 input
- 11.8 表格 table
- 11.9 表单
12.拓展
- 12.1 观察者设计模式
- 12.2 HBuilderX自定义模板
- 12.3 跨域问题
- 12.4 常见错误

1.Vue

1.1 Vue概述

Vue.js是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

1.2 同类产品

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。

ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，洗白其一直被"鄙视"的脚本语言的前身。
在这里插入图片描述
随着js的强大，三大巨头横空推出，形成鼎足之势。前端新三大框架：Angular/React/Vue，三种是目前主流js框架。国外企业多用React，国内企业多用Vue。

Vue是我们国人开发的，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。

Vue3.0使用TypeScript编写，TypeScript是JavaScript的超集，微软研发，语法更加细致严谨，该js脚本语言向一线强语言java、c靠拢，可以构建大型项目，基于ES6标准。

1.3 官网

https://cn.vuejs.org/ #官网

https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本

1.4 特点

一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
原生html页面是通过js 操作的是dom，而vue.js操作的是数据。
和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据。
优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api。

1.5 渐进式框架

Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。

可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

在这里插入图片描述

1.6 入门案例

在这里插入图片描述

开发步骤：导入vue.js文件、准备数据渲染区、创建测试 vue入门案例.html文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue入门案例</title>
		<!-- 步骤： 1.引入vue.js文件 -->
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
		<!-- vscode中需要使用绝对路径引用-->
	</head>
	<body>
		<!-- 2.准备数据渲染区：是指在指定位置展示vue提供的数据 
		{{}}叫插值表达式，用来获取获取一个叫msg的变量的值-->
		<div id="app"> {{msg}} </div> 
		<!-- 3.使用vue准备数据，让第二步获取数据 -->
		<script>
			var a = {//js对象
				msg:'hello vue'
			}
			new Vue({
				//el属性是：挂载点，即将把数据展示在指定位置（css选择器）
				el : "#app" ,//id选择器，用#获取id的值
				
				//data属性是：data是用来准备数据的
				data : a   //js对象：此处使用a的数据
			})
		</script>
	</body>
</html>

上面的案例中，我们只是为了介绍MVVM框架，所以将js对象定义单独完成，在实际开发中，我们可以对上述代码继续简化为下列的示例：

<html>

<head>
	<meta charset="utf-8">
	<title>测试vue入门案例2</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
	<div id="app1"> {{msg1}} </div>
	<div id="app2"> {{msg2}} </div>
	<script>
		new Vue({
				el: "#app1",
				data: {
					msg1: "a",
				}
			}),
			new Vue({
				el: "#app2",
				data: {
					msg2: "b",
				}
			})
	</script>
</body>

</html>

对各挂载点需要定义多个VUE对象进行操作。并且在导入VUE.JS文件时，也可以选择导入在现版本，即联网情况下的网络版本，但因为大多数开发环境并不支持我们连接外网，所以我们其他案例均引用本地VUE.JS文件的方法，想要了解更多可以到其官网查看。

1.7 MVVM框架

MVVM框架
在这里插入图片描述
上面看似结构非常简单，其实却深藏奥秘。和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是：传统js机制操作的是页面，如我们之前写的html+css+js案例，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

在这里插入图片描述

2.基础语法

2.1 运算符 operator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的运算符</title>
		
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p> 加法:{{2+3}} </p>
			<p> 减法:{{2-3}} </p>
			<p> 乘法:{{2*3}} </p>
			<p> 除法:{{3/2}} </p>
			<p> 取余:{{10%2}} </p>
		 
			<p> 三元表达式: {{age>10?'yes':'no'}}</p>
			<p> 字符串操作: </p>
<p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}}  </p>
		
		</div>

		<script>
			
				new Vue({
					el:"#app",
					data:{
						str:"hellovue~",
						age:12
					}
				});
		
		</script>

	</body>
</html>

VUE支持运算符及三目运算的直接操作，并且在一个挂载点中，支持多个数据值的传递；对于字符串，支持求其长度，截取，拼接的操作。

2.2 方法 methods

在VUE中创建方法时，必须提供methods属性，在methods属性中创建相应的方法，函数定义语法为：

函数名 : function(需要传入方法内的值){方法体}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue数据的写法</title>
	
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- vue的事件,使用v-on调用指定函数 -->
			按钮1:<button onclick="alert(100)">点我</button>
			按钮2:<button v-on:click="show()">点我</button>
			<h2>  vue调用无参函数：{{ show() }}  </h2>
			<h3>  vue调用含参函数：{{ sysout(100) }}  </h3>	
			<h3>  调用VUE对象：{{ name }}  </h3>	
        <h3>  调用VUE对象：{{ person.name }}  </h3>	
		</div>
		<script>
		
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"张三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"https://act.codeboy.com/"
					},
					methods: { /* 必须在methods里,创建Vue函数 */
						show:function(){ 
						//控制台打印
							console.log('hello vue');
							//页面输出
						},
						sysout: function(num){
							console.log(num);
						}
					}
				});
		
		</script>

	</body>
</html>

VUE中关于函数的注意事项：

方法必须写在methods代码段中
方法体中访问数据代码段中声明的变量，前面加this
方法和属性声明方式的差异在于 function(){}
方法和属性调用的差异是 {{msg}} {{sayHello()}}，名称后加小括号

2.3 Vue解析数据

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue解析数据案例</title>

    <!-- 导入js -->
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>

</head>

<body>
    <div id="app">
        <h2>
            vue解析变量：{{str}} {{str.length}}
            {{str.replace('l','666')}} {{str.concat(123)}}
            {{num}} {{num+10}} {{num/3}} {{num%4}}
            {{num>5?1:0}} {{num--}}
        </h2>

        <h2>vue解析对象：{{p.name}} {{p.age}} </h2>
        <h2>vue解析对象中的方法：{{p.sleep()}} </h2>
        <h2>vue解析对象中的含参方法：{{p.eat(3)}} </h2>

        <h2>vue解析数组：{{arr[1].name}} {{arr[0].age}} </h2>

        <h2>vue调用函数的语法:{{show()}} </h2>

        <button v-on:click="add(1,2)">点我</button>
        <button @click="add(3,4)">点我</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app", //数据挂载点
            data: {
                str: "hello vue",
                num: 10,
                p: { //vue定义对象
                    name: "lisa",
                    age: 20,
                    //给对象P提供方法
                    sleep: function(){
                        console.log("调用成功！！")
                    },
                    eat: function(nums){
                        //返回的nums不是对象中定义的，而是调用方法时传入的，所以不需要加this关键字
                        console.log(this.name +"吃了" + nums + "碗大米饭！")
                    },
                },
                arr: [ //vue定义数组
                    {
                        name: "zhangsan",
                        age: 20
                    },
                    {
                        name: "wangwu",
                        age: 30
                    }
                ]
            },
            methods: { //vue定义方法
                show: function () {
                    console.log(100);
                },
                add: function (a, b) { //含参方法
                    console.log(a + b);
                }
            }
        })
    </script>
</body>

</html>

上面的代码中，VUE会告警“组件渲染函数中可能有无限更新循环”，这是因为VUE解析变量中，对挂载点中的数据进行操作，导致页面刷新或新增文档时间接修改了循环响应数据而且没有终止条。页面执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，所以界面一直在转圈。

只要将 {{num--}}注释掉，此报错就会消失，这是因为只作为解析数据的案例，所以此处不做优化，大家可以自行使用下方第三种data值的写法进行优化，在开发过程中，也要注意此问题。

2.4 三种data值的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三种写法</title>
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
		
	</head>
	<body>
		<div id="app">{{msg}}</div>
		<script>
		
				new Vue({
					el : "#app" ,
					// 数据的三种写法:标准写法
					// 第一种形式
					// data : {
					// 	msg : "hello vueeee~~~"
					// }
					// 第二种形式:定义函数,返回对象
					// data:function(){
					// 	return {
					// 		msg:"hi~vue"
					// 	}
					// },
					// 第三种形式:定义函数,es6的简写法
					data(){
						return {
							msg:"vue hi~"
						}
					}
				});
	
		</script>
	</body>
</html>

VUE对象中的数据共有上述案例中的三种写法，之前我们一直使用第一种写法进行案例的测试，但在实际开发中，建议使用第三种方式进行数据的定义，第三种方式是简写形式，并且对数据进行return返回，可以避免很多数据出错的问题，例如上面Vue解析数据案例中的数据无限循环问题，使用第三种写法就可以避免出现此问题。

2.5 练习：写一个点赞按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点赞按钮案例</title>
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 练习：做一个点赞按钮 -->
			<button v-on:click="count++">点赞{{count}}</button>
		</div>
		
			<script>
				new Vue({
					el:"#app",
					data:{
						count:0
					},
					methods:{
						fun(){
							console.log(1);
						}
					}
				})
			</script>
		
	</body>
</html>

3.高级用法：v-命令

3.1 指令集

指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等

3.2 双向绑定 v-model

通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也会立即反应到View视图上。
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>VUE双向数据绑定案例</title>
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
</head>

<body>
    <!-- 未绑定的标签 -->
    <h1>{{address}}</h1>
    <div id="app">
        <!-- 已绑定的标签 -->
        <h2>{{address}}</h2>
        <h3>{{address}}</h3>
        <h4>{{address}}</h4>
        <h5>{{address}}</h5>
        <h6>{{address}}</h6>

        <input type="text" v-model="address" />
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app", 
        data() {
            return {
                address: "北京天安门"
            }
        }
    });
</script>

</html>

上面案例中的 <h1>标签因为没有与挂载点相关联，所以无法被vue解析，而且html代码中没有相关标签符号为{{}}的样式，所以会被认定为普通字符串进行原样输出，这也是为什么vue中存在挂载点的原因。

3.3 闪现 v-cloak

F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，在刷新状态下可以观察到闪现的问题，简单来说就是指页面未渲染完成，所以直接呈现给用户插值表达式的情况。

遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？

在标签中增加指令：v-cloak
增加style标签，[v-cloak]属性选择器，设置先不展示display:none;

实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>闪现问题解决案例</title>
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
		…
		</div>
	</body>
</html>

当页面元素较少时，可能无法观察到闪现现象，但其命令十分简单，只需要在不想出现闪现问题的数据渲染区添加v-cloak属性即可。

3.4 判断 v-if

v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>v-if案例</title>

    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>

</head>

<body>
    <div id="app">

        <!-- 用来判断,类似于java的if else if else,判断成立就显示不成立就不显示 -->
        <p v-if="person.age>=18">成年人</p>
        <p v-if="person.age<18">未成年人</p>

        <p v-if="person.salary>=2000">金领</p>
        <p v-else-if="person.salary>=1000">白领</p>
        <p v-else>屌丝</p>

        <!-- 和v-if一样也可以判断,只是条件不满足也会在页面加载,不显示而已 -->
        <p v-show="person.age>=20">成年人</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    address: "北京",
                    name: "张三",
                    age: 20,
                    person: {
                        name: "jack",
                        age: 18,
                        salary: 1100
                    },
                    hobby: ["唱", "跳", "rap"],
                    url: "http://act.codeboy.com/"
                }
            }
        });
    </script>

</body>

</html>

我们在网页的检查源码中可以看到，实际上v-show不满足的条件下也会加载，只是底层将其隐藏了，不会让用户看到，而v-if不满足的条件是直接不展示的。
在这里插入图片描述

Tip: 什么时候用 v-if ，什么时候用v-show?

v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的

v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3.5 循环 v-for

v-for 指令可以绑定数组的数据来渲染一个项目列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for案例</title>
	
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"张三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"https://act.codeboy.com/"
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="app">
			<p>地址:{{address}}</p>
			<p>姓名:{{name}}</p>
			<p>年龄:{{age}}</p>
			<p>爱好:{{hobby}} , 个数:{{hobby.length}}</p>
			<p>数组的第一个元素:{{hobby[0]}} </p>
			<p>数组的第最后一个元素:{{hobby[2]}} </p>
			
		<!-- 数组的遍历:类似于java里的foreach循环,o表示每次获取到的数据 -->
			<p v-for="o in hobby">{{o}}</p>
			<!-- o是数据,i是下标 -->
			<p v-for="o,i in hobby">下标是:{{i}}---数据是:{{o}}</p>
			<p v-for="(o,i) in hobby">下标是:{{i}}---数据是:{{o}}</p>
		</div>
	</body>
</html>

3.6 事件 v-on

@click为v-on:click的缩写

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>v-on案例</title>
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <button @click="count++">点我</button>

        <button onclick="show()">javascript 点我</button>
        <button v-on:click="show()">v-on:click 点我</button>
        <button @click="show()">简写的事件,点我</button>
    </div>
</body>
<script>
    function show() {
        alert("old show");
    }
    new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            count: 1
        },
        methods: {
            show: function () {
                alert(this.msg)
            }
        }
    })
</script>

</html>

3.7 绑定 v-bind

当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理

全称: v-bind:href
简称： :href 冒号开头就说明后面跟的是变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind案例</title>
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a href="http://act.codeboy.com">java培优</a>
			<a v-bind:href="url" target="_blank">{{urlname}}</a>
			<a :href="url" target="_blank">{{urlname}}</a>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data:{
				name: "tony",
				url: "http://act.codeboy.com",
				urlname: "java系统学习"
			}
		})
	</script>
</html>

3.8 小结

可以看到Vue这类为何称为框架，名副其实，当之无愧。写javaScript时，我们要先去学习其复杂的api（document.getElementById()），写jQuery时，又学一套复杂的api(一堆的选择器)，特别它的写法虽然简洁，却晦涩难懂，需要死记大量英文单词，初学者极易写错，门槛很高，就现在很多企业的程序员依然被绊倒，说不明白，讲不清楚，使用中bug满天飞，一堆糊涂虫。

而Vue框架结构搭建好，就剩下修改数据和展示数据，而其结构非常简单，一看就会，如调用信息{{message}}，就是这么豪横，还等什么，快速拥抱它吧。

3.9 练习

vue解析数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue解析数据</title>
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{str}}</h1>
			<h1>{{person.name}}   {{person.age}}  {{person.coding()}}</h1>
			<h1>{{users[1].address}}  {{users[0].age}}</h1>
			<h1>{{show()}}</h1>
		</div>
		<script>
			new Vue({
				el:"#app",//id选择器
				data(){
					return{
						str:'vue',
						person:{ //对象
							name:'jack',
							age:20,
							coding(){ //简写的函数
								alert(this.name+this.age)
							}
						},
						users:[  //数组
							{
								name:'tony',
								age:10,
								address:'西安'
							},
							{
								name:'jerry',
								age:20,
								address:'广州'
							}
						]
					}
				}  ,
				methods:{
					show(){
						alert('show()调用成功!');
					}
				}
			})
		</script>
	</body>
</html>

Vue指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue指令</title>
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="fun()">单击按钮</button>
			<!-- 6.v-on给元素添加事件:dblclick双击事件,click单击事件 -->
			<button v-on:dblclick="fun()">双击按钮</button>
			<!-- 练习:用vue做一个点赞的按钮 
				QQ:2250432165
			-->
			<button v-on:click="count++">点赞{{count}}</button>
			
			<!-- 7.v-bind: 把后面出现的数据当变量使用,会解析变量的值-->
			<a href="https://www.baidu.com/">点我,百度一下</a>
			<!-- 问题:把url当字符串了,而不是当变量用的 -->
			<a href="{{url}}">点我,百度一下</a>
			<a v-bind:href="url" target="_blank">点我,百度一下</a>
		</div>
		<script>
			new Vue({
				el:"#app", //挂载点
				data:{ //准备数据
					count:0, //点赞数
					url:'https://www.baidu.com'
				},
				methods:{  //创建函数
					fun(){
						console.log(1);
					}
				}
			})
		</script>
	</body>
</html>

4.Vue组件

4.1 概述

组件（Component）是 Vue.js 最强大的功能之一，可以扩展 HTML 元素，封装可重用的代码。

下面我们将引用VUE官网的一些描述来介绍组件：

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

在这里插入图片描述

这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。Vue 同样也能很好地配合原生 Web Component。

4.2 使用

注册一个全局组件(所有实例都能用)语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件:<tagName></tagName>

我们也可以注册一个局部组件(只能在这个实例中使用)，局部组件注册在vue对象中，只有与这个vue对象挂载的元素才可以使用，语法格式为：
components(tagName, options)，同样的tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式在挂载点相关联的元素中调用组件:<tagName></tagName>。

要注意他俩的区别，关键字不同，注册位置不同，调用位置不同。

4.3 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue组件案例</title>
		<!-- vue组件:扩展了HTML元素(提高了组件代码的复用性),
		    使用步骤:1,定义组件 2,使用组件 
			1,定义组件分为:全局组件和局部组件
			2,两种组件的区别??
 				全局组件:可以在所有的数据渲染区使用,而且是先定义再new Vue()
				局部组件:是在Vue对象里使用components来定义的,只能在当前对象的数据渲染区来使用
		-->
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 2,使用全局组件(本质上就是一个HTML元素) -->
			<car></car>
			<!-- 4,使用局部组件(本质上就是一个HTML元素) -->
			<person></person>
		</div>
		
		<div id="d">
			id=d位置,使用的全局组件:<car></car> ,使用成功!
			id=d位置,使用的局部组件:<person></person> ,使用失败!
		</div>
		<script>
			//1,创建全局组件
			//给vue添加组件(组件名称,组件的模板)
			Vue.component('car',{
				// 通过template,描述car组件的功能
				template:'<h3>hello Component</h3>'
			})
			//创建Vue对象,拥有了car组件
			new Vue({
				el:"#app",
				components:{//3,创建局部组件
					// 组件名称,组件模板
					'person': {
						template:'<h1>局部组件</h1>'
					}
				}
			})
			new Vue({
				el:"#d"
			})
		</script>
	</body>
</html>

其实可以将组件理解为一个自定义标签，标签中的功能由你自己定义。

5.Vue的Ajax

5.1 Ajax概述

Ajax 即Asynchronous Javascript And XML( 异步的Javascript和XML )，其并不是一种新的编程语言，而是多种技术的综合应用。Ajax是一种客户端技术，它可以实现局部刷新网页的功能，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

虽然js也可以实现类似的功能，但是其实现十分复杂，并且兼容性十分差，所以一般开发中不使用，但是VUE提供的Ajax技术实现十分简单，并且兼容性特别好，所以我们在这里学习它。当然在公司中，不一定使用VUE提供的Ajax技术，但其底层实现基本相同，理解其原理并实现后，都可以很快掌握。

5.2 Ajax特点

Ajax我们重点理解其异步访问，局部刷新的特点。

对于异步访问，我们可以理解为高并发状态，其与同步刷新作对比进行理解，同步是指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去。而异步是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有信息返回的时候会通知进程进行处理，这样就可以提高执行的效率了，即异步是我们发出的一个请求，该请求会在后台自动发出并获取数据，然后对数据进行处理，在此过程中，我们可以继续做其他操作，不管它怎么发出请求，不关心它怎么处理数据。

对于局部刷新，是指整个网页中，只有有变化部分进行刷新的实现，类似我们要实现网页中的点赞功能，我们应该只刷新点赞部分页面的刷新，而不是刷新整个页面，这样有利于网页的快速加载，提高客户使用体验。当前环境下，局部刷新技术只有Ajax可以实现，其有不可代替性。

5.3 Ajax原理

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
在这里插入图片描述

5.4 axios

Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
使用步骤: 要使用一个单独的js文件,注意导入顺序，因为其是基于VUE的，所以要先导入vue.js文件，再导入axios.min.js文件。

<script src="../vue/vue.js"></script>
<script src="../vue/axios.min.js"></script>

语法

axios.get("url地址信息","参数信息").then(res=>{
	//res代表了服务器给浏览器返回来的数据交给res保存
	console.log(res.data处理rea的方法);
})

5.5 测试

引入js支持：从资料中找axios.min.js文件，复制到js目录下并完成下面代码（遇到跨域问题报错可以看当前文章末尾解决）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习vue的axios</title>

    <script src="../vue/vue.js"> </script>
    <script src="../vue/axios.min.js"> </script>

</head>

<body>

    <div id="app">
        <!-- 需求：点击按钮，去1.json里获取city的数据并展示 -->
        <button @click="show()">点我展示数据</button>
        {{name}}住在
        <select>
            <option v-for="i in city">{{i}}</option>
        </select>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                name: '',
                city: ''
            },
            methods: {
                show() {
                    axios.get('../JSON文件/1.json').then(
                        a => {
                            this.name = a.data.name;

                            this.city = a.data.city;
                        }
                    )
                }
            }
        })
    </script>


</body>

</html>

5.6 练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习vue的axios</title>
		
		<script src="../vue/vue.js"> </script>
		<script src="../vue/axios.min.js"> </script>
		
	</head>
	<body>
		
		<div id="app">
			<!-- 需求：点击按钮，去1.json里获取city的数据并展示 -->
			<button @click="show()">点我展示数据</button>
			{{name}}住在
			<select>
				<option v-for="i in city">{{i}}</option>
			</select>
		</div>
		
		<script>
			new Vue({
				el:"#app",
				data:{
					name:'',
					city:''
				},
				methods:{
					show(){
						axios.get('../JSON文件/1.json').then(
						a=>{
							this.name=a.data.name;

							this.city=a.data.city;
						}
						)
					}
				}
			})
		</script>
		
		
	</body>
</html>

附：1.json文件

{
	"name":"jack",
	"city":["北京","上海","广州"]
}

Tip ：axios请求头的 Content-Type 默认是 application/json，而postman默认的是 application/x-www-form-urlencoded。

ajax/postman一般采用@RequestParam接收参数：

@ResponseBody

public Result testpost(@RequestParam String username) {}

axiso采用@RequestBody的json方式接收参数

@ResponseBody

public Result testget(@RequestBody Map map) {}

6.Vue路由

6.1 概述

说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

6.2 使用步骤

和Ajax一样，在导入依赖时，同样要注意导入的顺序，其有依赖关系：

<!-- 1. 引入JS 路由需要依赖vue 注意顺序-->
<script src="../vue/vue.js"> </script>
<!-- 2. 引入vue-router.js-->
<script src="../vue/vue-router.js"> </script>

文件名中的VueRouter表示Vue的路由。

6.3 相关案例

6.3.1 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
		<title>测试Vue路由</title>
		<script src="../vue/vue.js"> </script>
		<script src="../vue/vue-router.js"> </script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<!-- 3.4使用路由 将HTML解析成a标签,还有href属性-->
			<router-link to="/home">主页</router-link>
			<router-link to="/help">帮助</router-link>
			<!-- 3.5展示匹配成功后的结果 -->
			<router-view></router-view>
		</div>
		
		<!-- 3.准备路由功能 -->
		<script>
			//3.3定义组件
			let home = {
				template:"<h3>这是主页</h3>"
			}
			let help = {
				template:"<h3>这是帮助页</h3>"
			}
			
			
			
			//3.2创建路由对象VueRouter
			let router = new VueRouter({
				//属性名：指定多个请求和组件的匹配关系
				routes:[
					{path:'/home',component:home},
					{path:'/help',component:help}
				]
			})
			
			
			//3.1通过router属性指定路由功能
			new Vue({
				el:"#app",
				//3.1通过router属性指定路由功能
				//router:router//指定路由
				router:router //key和value一样的话，可以直接简写为一个：router
			})
		</script>
	</body>
</html>

6.3.2 根据不同元素，展示不同的网址

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习vue路由</title>
    <script src="../vue/vue.js"></script>
    <script src="../vue/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>
        new Vue({
            el: "#app",
            router : new VueRouter({
            routes: [ //把不同的请求,分发给不同的组件处理
                { //点击runoob时,匹配到对应的组件,展示runoob的网址
                    path: '/runoob',
                    component: {
                        template: '<h1><a href="https://www.runoob.com" target=_blank>点击此处跳转到菜鸟网站</a></h1>',
                    },
                },
                { //点击w3c时,匹配到对应的组件,展示w3c的网址
                    path: '/w3c',
                    component: {
                        template: '<h1><a href="https://www.w3school.com.cn" target=_blank>点击此处跳转到w3c网站</a></h1>',
                    },
                }
            ]
        })
        })
    </script>
</body>

</html>

7.VUE脚手架

7.1 VUE的生命周期

使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。

如页面创建时，页面加载时，页面更新时，页面销毁时？

在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。

生命周期函数：

vue实例在某一个时间点会自动执行这些函数；
生命周期钩子函数不允许写成箭头函数；

可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

细分每个过程：

序号	默认值	取值范围
1	new Vue	创建vue实例
2	init events & lifecycle	开始初始化
3	before Create	组件刚被创建，组件属于计算之前，如data属性等
4	init injections & reactivity	通过依赖注入导入依赖项
5	created	组件实例创建完成，属性已绑定，此时DOM还未生成
6	el属性	检查vue配置，即new Vue（）里面的el项是否存在，有就继续检查template项，没有则等到手动绑定调用v.$mount()
7	template	检查配置中的template项，如果没有，则绑定区域的el对象的outHTML（即整个#app DOM，包括&It;div id = “app”>和&It;/div>标签）都作为被填充对象替换掉填充区域
8	beforeMount	模板编译，挂载之前
9	create v$el and replace el	编译，并替换了被绑定元素
10	mounted	编译，挂载
11	befor update	组件更新之前
12	updated	组件更新之后
13	destroy	当v.$destroy()被调用，开始拆卸组件和监听器，生命周期终止

请添加图片描述

7.2 VUE脚手架的概念

vue脚手架指的是vue-cli，是指Vue的客户端，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板，是使用vue项目的提前。
vue-cli就是Vue的脚手架工具，vue脚手架提供了丰富的功能,只要安装成功,就可以使用的。和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。
vue-cli是由Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本。
在这里插入图片描述

7.3 VUE脚手架的安装

7.3.1 安装node.js

node.js为傻瓜式安装，一直下一步就可以了,可以安装最新版本,win7的话可以安装14版本。
在这里插入图片描述

windows电脑环境，左下角搜索中输入cmd并回车可以打开dos窗口，使用下方的dos命令可以查询所安装node.js的脚本：

node -v # v8.11.3，要求至少8以上的版本

7.3.2 修改npm的镜像(下载的快) :

npm为node.js下的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），官网：

https://docs.npmjs.com/about-npm 英文官网

https://www.npmjs.cn/ 中文官网

因为其下载为国外的网址，有时下载速度会十分缓慢，所以我们使用下列命令在dos窗口中将其设置为淘宝镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #修改下载资源的网址成taobao，设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

7.3.3 正式安装(没有飘红ERR就行了):

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g  #全局安装vue脚手架---可能比较慢,要等几分钟

npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必

vue –V #查看脚手架的版本

where vue #查看vue脚手架安装在哪里

7.3.4 下载/创建 vue项目

基于vue.js的官方webpack模板：(乱码无需理会)，指定一个工作空间的路径,存放vue项目的代码

webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。Webpack是前端自动化构建工具，它基于nodejs实现，可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能。可以快速构建一个Vue项目，包括各类文件（assets资源、scripts脚本、images图片、styles样式）。

官网：

https://webpack.js.org/

在工作空间的位置,输入cmd,敲入回车,输入以下命令:
> vue init webpack jt01  #利用脚手架下载jt01的项目100M+，此处项目名不能使用大写---可能比较慢,要等
进行一些选项的配置,yes/no,参考下图选答案.

请添加图片描述

下载完成后的界面如图：
在这里插入图片描述

注：
1. jt01 为自定义的项目名称
2. 产生项目webpack模板，目录100+m，可见内容多复杂，庞大
3. 会自动生成node_modules临时目录，可以删除，每次编译、运行会自动产生
4. 上面的过程中间出现错误，都要从开始全部重新执行一遍，防止后续出现问题
5. 下载jt01项目中的选项选择，可以输入y或n直接回车即可

7.3.5 检测vue项目是否下载完了

原则是: 一路没有遇到飘红的ERR的话,就可以了

7.3.6 测试项目

按照提示,再执行两条命令:

cd jt01  #进入项目文件夹里
npm run dev  #启动项目，ctrl+c 停止,可能要等几分钟
DONE  Compiled successfully in 9949ms #表示项目启动成功
打开浏览器访问:http://localhost:8080

注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准。
在这里插入图片描述

7.3.7 用Hbuilder打开Vue项目

文件–打开目录–选中刚刚下载好的vue项目–确定

8.HBuilderX管理Vue项目

8.1 打开Vue项目

HBuilderX是最新前端开发利器之一，全面支持Vue的开发，具有丰富的提示，使用它打开：D:\workspace\vue\jt01目录（可自行定义自己的目录）
请添加图片描述

8.2 目录结构介绍

请添加图片描述

这个目录结构非常重要，大家要熟记。就如你要生孩子去妇幼保健院，你要游泳去游泳馆。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。

view 就是用户要访问的页面都存放在这个目录下，如Index.vue
static中保存一些静态的资源，如jquery、css、图片等
src 目录是一个很大的目录，包罗万象
components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue
router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。Router非常强大，老系统是url改变是在服务端进行刷新，而router支持在客户端刷新，就是url变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。此处不好理解，后期专门章节论述，不必心急，先记录下这个特点

请添加图片描述

8.3 重要文件说明

Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？
常见操作:

在components里写自定义组件
在App.vue里注册自定义组件
在main.js里引入第三方js

index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中

请添加图片描述

src/App.vue 根组件,可以添加自定义组件、
src/router/index.js 引入子组件HellWorld.vue

请添加图片描述

简单来说项目加载的过程是：

index.html->main.js->App.vue->index.js->HelloWorld.vue

可以看到Vue项目是自有一套规则，一套机制的，非常系统化的。有固定的文件，有自定义的文件，各自放在指定的目录下，指定的文件中，指定的地方，最终来实现用户的需求。那在开发之前，你就必须了解这套机制，写代码的时候就规则清晰，如有神助，知道该如果写代码，知道为什么这么写，代码文件该放在哪，它们是谁调用谁，互相怎么调用的了。

为什么要花这么大篇幅讲这几个文件呢？
很多同学写代码时，听老师讲没问题，可自己做就乱了方寸，脑袋空白甚至都是浆糊，不知道代码该写在哪里？不知道出错了该如何下手，这是为何呢？老师都教了啊？就是自己没有去把所学的知识系统的、有效的组织起来，内容还只是一个一个点，无法把这些点很好的连接起来形成线，先在形成面，面在形成体。点线面体真正组织起来，才会逐渐清晰代码的整体过程。

那如何做到呢？

思考，但复杂的事务不是马上脑袋就能跟上的，得晕好久呢。那怎么办，真正的绝招，多敲多练，反复练习中慢慢总结出其真正的规律。就像我们打游戏，游戏高手，不是天生，是反复练习，反复失败，失败就是成功之母，这句话是真的。

9.在Vue项目中添加自定义组件

9.1 概述

组件（Component）是 Vue.js 最强大的功能之一。可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

9.2 项目结构

请添加图片描述

9.3 创建Car.vue文件-自定义组件

位置:在src/components文件夹里

<!-- 写HTML的代码 -->
<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>
<!-- 写js的代码 -->
<script>
// 提供一个支持导出的组件
export default{
  name:'Car' ,//组件名称,通常和文件名一致
  data(){   //准备返回数据
    return{
      msg:'hello vue~~'
    }
  }
}
</script>
<!-- 写css的代码 -->
<style>
</style>

9.4 修改App.vue文件

把自定义组件,引入到这个文件里

<template>
  <div id="app">
    <!-- 3.使用自定义组件,当做HTML元素-->
    <Car></Car>
  </div>
</template>
<script>
  //1.导入指定位置的自定组件car.vue
  import Car from './components/Car.vue'
  //2,使用components属性,使用自定义组件
export default {
  name: 'App',
  components:{
    Car //注册刚刚导入的自定义组件
  }
}
</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>

9.5 测试

启动服务器使其编译了新的代码后，我们便能在网页上直观的看到我们的更改：
在这里插入图片描述

在浏览器里http://localhost:8080/测试

9.6 自定义组件练习

9.6.1 创建person.vue的组件

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  name:'person',
  data(){
    return{
      name:'jack'
    }
  }
}
</script>

<style>
</style>

9.6.2 修改App.vue,引入自定义组件

<template>
  <div id="app">
    <!-- 3.使用自定义组件,当做HTML元素-->
    <Car></Car>
    <person></person>
  </div>
</template>
<script>
  //1.导入指定位置的自定组件car.vue
  import Car from './components/Car.vue';
  import person from './components/person.vue';
  //2,使用components属性,使用自定义组件
export default {
  name: 'App',
  components:{
    Car , //注册刚刚导入的自定义组件
    person
  }
}
</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>

9.6.3 测试

如果是已运行的状态，那么只需要在DOS窗口敲个回车(目的是自动编译新的代码)就可以重新编译当前代码
打开浏览器,刷新看新数据http://localhost:8080

10.Vue项目中自定义路由

10.1 项目结构

在这里插入图片描述

10.2 自定义组件

新建t1.vue文件，内容如下：

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

<script>
</script>

<style>
</style>

新建t2.vue文件，内容如下：

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

<script>
</script>

<style>
</style>

10.3 自定义路由规则

在index.js中修改路由规则：

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

//导入组件,路径必须以./开始
import t1 from '../components/t1.vue'
import t2 from '../components/t2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/',component: HelloWorld},
    {path: '/t1',component: t1},
    {path: '/t2',component: t2}

  ]
})

10.4 修改App.vue

关联路由路径时要注意使用绝对路径名，否则可能会与其它组件调用混乱：

<template>
  <div id="app">
    <!-- 3.使用自定义组件,当做HTML元素-->
    <Car></Car>
    <person></person>
    <!-- 使用路由规则-->
    <router-link to="./components/t1">t1</router-link>
    <router-link to="./components/t2">t2</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  //1.导入指定位置的自定组件car.vue
  import Car from './components/Car.vue';
  import person from './components/person.vue';
  //2,使用components属性,使用自定义组件
export default {
  name: 'App',
  components:{
    Car, //注册刚刚导入的自定义组件
    person
  }
}
</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>

11.Element-ui

11.1 概述

是Element提供的一套漂亮的前端网页展示的效果，其提供了丰富的组件模板供大家使用，可以便捷的使用其组件生成一个漂亮的网页。

访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南

11.2 使用步骤

在这里插入图片描述

在当前工程的dos窗口里,执行命令下载element-ui的工具

在这里插入图片描述

npm i element-ui -S  #安装element-ui

检查下载的结果

11.3 修改main.js,引入elementui

其官网组件中的快速上手详细介绍了引入过程，大家可以自行查看：https://element.eleme.cn/#/zh-CN/component/quickstart
在这里插入图片描述

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入第三方的ElementUI来美化页面
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

11.4 布局 layout

栅格体系：通过基础的 24 分栏，迅速简便地创建布局。同时使用单一分栏创建基础的栅格布局。通过将页面分成24分栏，可以形成PC端、移动端自适应。

我们创建Item.vue文件，并完成下面的代码：

<template>
  <div>
<!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
<!-- el-row表示行,el-col表示列 ,:span合并列数-->
  <el-row> 
    <el-col :span="24">123</el-col>
  </el-row>
  <el-row>
    <el-col :span="12">abc</el-col>
    <el-col :span="12">123</el-col>
  </el-row>

  </div>
</template>

<script>
  // 定义导出的组件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘电商管理系统'
      }
    }
  }
</script>

<style>
</style>

11.5 图标 icon

在这里插入图片描述

我们在Item.vue文件中加入一些图标元素：

<template>
     <div>
  <!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
  <!-- el-row表示行,el-col表示列 ,:span合并列数-->
<!-- 1.使用ele的各种图标-->
    <el-row>
      <el-col :span="12">abc</el-col>
      <el-col :span="12">123</el-col>
    </el-row>
    <el-row> 
      <el-col :span="24">
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-delete"></i>
        <i class="el-icon-eleme"></i>
    </el-col>
      <el-col :span="24"></el-col>
      <el-col :span="24"></el-col>
      <el-col :span="24"></el-col>
    </el-row>
    <el-row>
      <el-col :span="12">abc</el-col>
      <el-col :span="12">123</el-col>
    </el-row>
    </div>
  </template>
  
  <script>
    // 定义导出的组件
    export default{
      name:'Item',
      data(){
        return{
          msg:'京淘电商管理系统'
        }
      }
    }
  </script>
  
  <style>
  </style>

11.6 按钮 button

在这里插入图片描述

我们在Item.vue文件中添加一些按钮标签：

<template>
    <div>
 <!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
  <!-- el-row表示行,el-col表示列 ,:span合并列数-->
<!-- 1.使用ele的各种图标-->
    <el-row>
      <el-col :span="12">abc</el-col>
      <el-col :span="12">123</el-col>
    </el-row>
    <el-row> 
      <el-col :span="24">
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-delete"></i>
        <i class="el-icon-eleme"></i>
    </el-col>
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">abc</el-col>
      <el-col :span="12">123</el-col>
    </el-row>

    </div>
  </template>
  
  <script>
    // 定义导出的组件
    export default{
      name:'Item',
      data(){
        return{
          msg:'京淘电商管理系统'
        }
      }
    }
  </script>
  
  <style>
  </style>

11.7 输入框 input

我们在Item.vue文件中添加用户名及密码的输入框：

<template>
    <div>
  <!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
  <!-- el-row表示行,el-col表示列 ,:span合并列数-->
<!-- 1.使用ele的各种图标-->
    <el-row>
      <el-col :span="12">abc</el-col>
      <el-col :span="12">123</el-col>
    </el-row>
    <el-row> 
      <el-col :span="24">
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-delete"></i>
        <i class="el-icon-eleme"></i>
    </el-col>
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">abc</el-col>
      <el-col :span="12">123</el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><el-input placeholder="用户名" v-model="msg"></el-input></el-col>
      <el-col :span="12"><el-input placeholder="密码" v-model="msg" show-password></el-input></el-col>
    </el-row>

    </div>
  </template>
  
  <script>
    // 定义导出的组件
    export default{
      name:'Item',
      data(){
        return{
          msg:'京淘电商管理系统',
          input: ''
        }
      }
    }
  </script>
  
  <style>
  </style>

11.8 表格 table

在这里插入图片描述

我们在Item.vue文件中添加商品详情表格：

<template>
    <div>
        <!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
        <!-- el-row表示行,el-col表示列 ,:span合并列数-->
        <!-- 1.使用ele的各种图标-->
        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <i class="el-icon-edit"></i>
                <i class="el-icon-share"></i>
                <i class="el-icon-delete"></i>
                <i class="el-icon-eleme"></i>
            </el-col>
            <el-col :span="24">
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><el-input placeholder="用户名" v-model="msg"></el-input></el-col>
            <el-col :span="12"><el-input placeholder="密码" v-model="msg" show-password></el-input></el-col>
        </el-row>

        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <!-- 3.使用ele的表格,a创建表格,b准备数据,c绑定数据 -->
        <el-row>
            <el-button type="info" @click="toadd">新增</el-button>
        </el-row>
        <el-table :data="list">
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="卖点" prop="sell"></el-table-column>
            <el-table-column label="描述" prop="desc"></el-table-column>
            <el-table-column label="更多">
                <el-button type="primary" @click="toupdate()">编辑</el-button>
                <el-button type="success" @click="del()">删除</el-button>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
// 定义导出的组件
export default {
    name: 'Item',
    data() {
        return {
            msg: '京淘电商管理系统',
            input: '',
            // b. 准备表格要的数据
            list: [
                {
                    id: 100,
                    title: '鸿星尔克',
                    sell: '为中国代言',
                    desc: 'to be no.1'
                },
                {
                    id: 101,
                    title: '蜜雪冰城',
                    sell: '一瓶只赚1毛钱',
                    desc: '你爱我我爱你蜜雪冰城甜蜜蜜'
                },
                {
                    id: 102,
                    title: '特步',
                    sell: '有一种踩.的感觉',
                    desc: '飞一样的感觉'
                }
            ]
        }
    },
    // 1,声明按钮  2,添加事件methods 3,给按钮绑定事件@click
    methods: {
        toadd: function () {
            console.log("新增业务成功")
        },
        toupdate: function () {
            console.log("修改业务成功")
        },
        del: function () {
            console.log("删除成功")
        }
    }
}
</script>

<style>

</style>

11.9 表单

在这里插入图片描述

我们在Item.vue文件中添加商品详情表单：

<template>
    <div>
        <!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
        <!-- el-row表示行,el-col表示列 ,:span合并列数-->
        <!-- 1.使用ele的各种图标-->
        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <i class="el-icon-edit"></i>
                <i class="el-icon-share"></i>
                <i class="el-icon-delete"></i>
                <i class="el-icon-eleme"></i>
            </el-col>
            <el-col :span="24">
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><el-input placeholder="用户名" v-model="msg"></el-input></el-col>
            <el-col :span="12"><el-input placeholder="密码" v-model="msg" show-password></el-input></el-col>
        </el-row>

        <el-row>
            <el-col :span="12">abc</el-col>
            <el-col :span="12">123</el-col>
        </el-row>
        <!-- 3.使用ele的表格,a创建表格,b准备数据,c绑定数据 -->
        <el-row>
            <el-button type="info" @click="toadd">新增</el-button>
        </el-row>
        <el-table :data="list">
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="卖点" prop="sell"></el-table-column>
            <el-table-column label="描述" prop="desc"></el-table-column>
            <el-table-column label="更多">
                <el-button type="primary" @click="toupdate()">编辑</el-button>
                <el-button type="success" @click="del()">删除</el-button>
            </el-table-column>
        </el-table>

        <!-- 制作表单 el-form表示表单,el-form-item表示表单项
1,数据区提供数据 2,给form指定双向绑定:model="form" 3,input双向绑定获取数据v-model="form.price"
  -->
        <el-form label-width="100px" :model="form">
            <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="卖点">
                <el-input v-model="form.sell"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="详情">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save()" type="success">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 定义导出的组件
export default {
    name: 'Item',
    data() {
        return {
            msg: '京淘电商管理系统',
            input: '',
            // b. 准备表格要的数据
            list: [
                {
                    id: 100,
                    title: '鸿星尔克',
                    sell: '为中国代言',
                    desc: 'to be no.1'
                },
                {
                    id: 101,
                    title: '蜜雪冰城',
                    sell: '一瓶只赚1毛钱',
                    desc: '你爱我我爱你蜜雪冰城甜蜜蜜'
                },
                {
                    id: 102,
                    title: '特步',
                    sell: '有一种踩.的感觉',
                    desc: '飞一样的感觉'
                }
            ],
            //给表单准备数据,数据驱动,双向绑定
            msg: 'hi components',
            form: {
                title: "test",
                sell: '爆款热销',
                price: 999,
                desc: "我是详情..."
            },
        }
    },
    // 1,声明按钮  2,添加事件methods 3,给按钮绑定事件@click
    methods: {
        toadd: function () {
            console.log("新增业务成功")
        },
        toupdate: function () {
            console.log("修改业务成功")
        },
        del: function () {
            console.log("删除成功")
        },
        save: function () { //表单提交
            // console.log("submit")
            console.log(this.m) //调用上面的变量m
        }
    },

}
</script>

<style>

</style>

12.拓展

12.1 观察者设计模式

设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇，它的底气就来自对经典设计模式的全面应用。所以如果只会应用不懂其义，那你只是个码农；如何能领会设计模式的奥义，你就有了高级程序员的潜力；如果你能自己仿写，你就有了架构师的入门证。

Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了"观察者设计模式"。

那什么是观察者设计模式呢？

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。

在这里插入图片描述

页面data中的address就是数据，get为获取当前数据，set为设置数据新值
观察者watcher就为那多个插值表达式和input文本框，在页面加载时这些关系进行绑定
当我们让数据变化时，如input文本框修改内容，其就调用数据的set的方法，把数据进行更新，其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger，进行再次渲染re-render，修改虚拟dom树。最终vue框架局部宣传页面
同样，当我们利用谷歌浏览器改变数据v.address赋值时，就调用数据的setter方法进行数据更新，数据更新后，通知众多的观察者，观察者更新如上面的流程

可以看出Vue设计非常巧妙，我们页面展现的数据，必然会涉及到数据的读写，于是Vue实现了一整套机制，这套机制监控数据的获取（get），数据的更新（set），这样当数据变化，Vue就能知道。它知道有什么用呢？它就能控制当数据变化时就能重新进行页面的渲染，从而用户看到页面展现新的内容。

12.2 HBuilderX自定义模板

12.2.1 自定义html模板

在这里插入图片描述

注意：模板是根据选择的文件类型独立的，我们现在是创建的html模板，只有创建html时，才能选择这个模板。

在这里插入图片描述

12.2.2 vue模板.txt

创建vue模板.txt，文件名自定义。这样就无需每次敲这些重复的代码，高效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data:{
				msg : "hello vue"
			}
		})
	</script>
</html>

12.2.3 创建新文件调用模板

在这里插入图片描述

12.3 跨域问题

注意：浏览时必须用服务模式浏览，否则报跨域错误
在这里插入图片描述

上方我们在测试ajax案例时，可能会遇到跨域问题的报错，如果使用VSCODE进行测试，可以下载Live Server插件并安装：
在这里插入图片描述

在代码页面通过此插件打开页面进行测试便可以解决：
在这里插入图片描述

12.4 常见错误

Permission denied
权限不足，windows以管理员身份运行，mac命令前加sudo
Unexpected end of JSON input while parsing near

清除缓存，重新安装

npm cache clean --force

npm install

unable to verify the first certificate

解决方法: 取消ssl验证：npm config set strict-ssl false,再次安装

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

打开（如果不是默认的文件夹，是自定义的文件夹路径的话就是在自定义文件夹的目录下）

C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\download\index.js 
将下面这行注释：rejectUnauthorized: process.env.npm_config_strict_ssl !== 'false'
然后改为：  rejectUnauthorized : false    
重新运行：  vue init webpack project-name  就可以了

在这里插入图片描述

蟑螂恶霸不是恶霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.4 VUE基础讲解

Vue.js是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让J
复制链接

扫一扫

专栏目录