测开-Vue开发part1

ChasingTheDawn
154 阅读7分钟

VUE基础

学习vue前置：掌握了html、css、js的基本语法

官方网站：cn.vuejs.org/index.html

vue是一个渐进式的javascript框架

编辑器：www.dcloud.io/hbuilderx.h…

npm命令

安装nodejs会自带了npm命令 nodejs.cn/

火狐的web教程 developer.mozilla.org/zh-CN/docs/…

  1. vue是一个做网页的框架

image.png

一个网页都是由多个模块（组件）拼成的，而VUE的组件化技术正是应用了这个思想。

工具使用：HBuildX

  • 创建项目

image.png

新建-项目：可以选择空目录（只有根目录）、基本HTML项目（有基本的index.html,html,css,js文件夹）、vue项目2.6.10(需要下载项目文件)

image.png

  • 内置浏览器：使用内置浏览器 直接在hbulider中看到效果。

image.png

  1. 使用vue最简单的方式
  • 导入js链接
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入vue,封装了很多function -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<h1>hello world</h1>
	</body>
	<script type="text/javascript">
		//创建一个vue实例
		var app = new Vue();
	</script>
</html>
  • 下载到本地，引入本地文件
  1. 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法（例如 {{ }}）来声明式地将数据渲染进 DOM 的系统。

DOM ：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML、XML）的标准编程接口。

Document Object Mode诞生于1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死，大规模的赋予浏览器强大的功能。而微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。 Document Object Mode就是就是当时酝酿出来的杰作。

在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也难觅踪影了。

DOM其实就是定义了访问html的标准。DOM会把html中的每个element、attribute都创建为对象。

node节点:html文档中的所有节点组成一个文档树（或节点树），html文档中的每个元素、属性、文本的话都代表一个节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- View层：如何显示数据，{{}} 插值表达式  -->
		<h1>{{message}}</h1>
	</body>
	<script type="text/javascript">
		
		var model = { //Model层：存储数据
			message: "hello world",
		}
		// 创建一个Vue实例
		var app = new Vue(
			{//建立绑定：把上面的h1对象绑定到model,model跟数据绑定
				el:"h1",
				data:model
			}
		);
	</script>
</html>

我们先按Vue的模版语法写一个h1对象：

<body>
	<h1>{{message}}</h1>
</body>

然后我们再定义一个数据模型：

var model = {message: "hello world",};

最后我们把模型绑定到h1对象上:

var app = new Vue(
        {
                el:"h1",
                data:model
        }
);

绑定的优点：以前我们要修改h1中的数据，需要用JavaScript直接修改，现在我们不再触碰h1,通过修改h1对象中的message即可修改h1。

MVVM模式：

Model：存储数据

View: 展现数据

ViewModel:绑定View和Model，绑定后，View和Model的数据自动同步。

以前 如何展现和展现什么写在了一起，现在，如何展现放在View层，展现什么放在Model层。

一个vue实例只能绑定一个关系，所以通过最大的一个层级来进行绑定，当内容很多时，需要进行组件化开发，将它拆分成组建。

熟练的开发，一般model直接写在绑定关系里。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- View层：如何显示数据  -->
		<div id='text'>
			<h1>{{message}}</h1>
			<p>{{context1}}</p>
			<p>{{context2}}</p>
		</div>
	</body>
	<script type="text/javascript">
		// 创建一个Vue实例
		var app = new Vue({ //建立绑定：绑定只能绑定一个元素
			el: "#text",
			data: { //Model层：存储数据
				message: "hello world",
				context1: "床前明月光",
				context2: "人之初，性本善"
			}
		});
	</script>
</html>

组件化开发示例：

image.png

比如把导航栏，开发为组件<app-nav>

  1. Vue的生命周期

    cn.vuejs.org/v2/guide/in…

  2. Vue常用指令

image.png

  • v-model 双向数据绑定，绑定文本框、输入框等

    v-model在input的下拉框、单选按钮、复选框中的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<p>v-model:双向绑定</p>
			<ul>
				<li>修改v-model中的msg,data中的msg会被修改</li>
				<li>修改data中的msg,v-model中的msg会被修改</li
			</ul>
			<input v-model='msg' />
			<h2>{{ msg }}</h2>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({ 
			el: "#app",
			data: { 
				msg: ""
			}
		});
	</script>
</html>

  • v-on 用于绑定事件

    v-on:后面的值是一个方法，可以写成on_enter()，没有参数可以写成on_enter。另外这种事件对应的方法不是定义在data选项中，而是定义在vue实例的methods选项中，里面都是一个一个的function。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<p>v-model:双向绑定</p>
			<ul>
				<li>修改v-model中的msg,data中的msg会被修改</li>
				<li>修改data中的msg,v-model中的msg会被修改</li
			</ul>
			<p>v-on:keyup.13（13是回车键对应的码值） 触发回车事件</p>
			<input v-model='msg' v-on:keyup.13="on_enter" />
			<h2>{{ msg }}</h2>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({ 
			el: "#app",
			data: { 
				msg: ""
			},
			methods:{ //函数
				on_enter:function(){
					console.log(app.msg);
				},
			
			}
		});
	</script>
</html>

  • v-if,v-else,v-else-if条件判断

    v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<p>v-model:双向绑定</p>
			<p>v-on:keyup.13（13是回车键对应的码值） 触发回车事件</p>
			<p>v-if:条件判断，为真时，才执行代码块</p>
			<input v-model='msg' v-on:keyup.13="on_enter" />
			<h2 v-if='seen'>{{ msg }}</h2>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({ 
			el: "#app",
			data: { 
				msg: "",
				seen: false
			},
			methods:{ //函数
				on_enter:function(){
					console.log(app.msg);
				},
			
			}
		});
	</script>
</html>

<h2 v-if='seen'>{{ msg }}</h2>当seen: true时，展示代码块{{msg}}

v-else:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

  • v-bind 绑定属性

    v-bind用于绑定数据和元素属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			.hide {
				height: 100px;
				width: 200px;
				background: aquamarine;
			}
			.hide1 {
				height: 100px;
				width: 200px;
				background: red;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<div class="hide1"></div>	
			<br>
                        <!-- 根据cls跳转到data中的hide,找到style中的样式 -->
			<div v-bind:class="cls"></div>	
			
			
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({ 
			el: "#app",
			data: { 
				cls:'hide',
				}
			}
		);
	</script>
</html>

v-bind: 可以简写为:,<div :class="cls"></div>

  • v-for 循环

    v-for循环与v-if 条件语句结合示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<table border="1" cellspacing="" cellpadding="">
				<tr>
					<th>姓名</th>
					<th>分数</th>
					<th>等级</th>
				</tr>
				<!-- for 循环遍历stus -->
				<tr v-for="item in stus">
					<td>{{item.name}}</td>
					<td>{{item.score}}</td>
					<!-- 条件语句 -->
					<td v-if="item.score>=80">优秀</td>
					<td v-else-if="item.score>=60">及格</td>
					<td v-else>不及格</td>
				</tr>
			</table>
			
			
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({ 
			el: "#app",
			data: { 
				cls:'hide',
				stus:[
					{name:"张三",score:88},
					{name:"里斯",score:59},
					{name:"王武",score:70},
					{name:"阳六",score:99}
					]
				}
			}
		);
	</script>
</html>

v-show 指令通过改变css属性display来决定元素是显示 还是隐藏。

vue高级特性

插件

chrom浏览器 vue devtools 需要梯子或度娘

方便调试，可以看到有没有绑定关系等

image.png

绑定传参数
删除功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<table border="1" cellspacing="" cellpadding="">
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>分数</th>
					<th>等级</th>
					<th>操作</th>
				</tr>
				<!-- for 循环遍历stus -->
				<tr v-for="item in stus">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.score}}</td>
					<!-- 条件语句 -->
					<td v-if="item.score>=80">优秀</td>
					<td v-else-if="item.score>=60">及格</td>
					<td v-else>不及格</td>
					<td><button @click="del(item.id)">删除</button></td>
				</tr>
			</table>
			
			
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({ 
			el: "#app",
			data: { 
				cls:'hide',
				stus:[
					{id:1,name:"张三",score:88},
					{id:2,name:"里斯",score:59},
					{id:3,name:"王武",score:70},
					{id:4,name:"阳六",score:99}
					],
					},
			methods:{//传入参数
				del:function(id){
					console.log("删除一行:",id)
					this.stus=this.stus.filter(function(item,index) {
						return item.id!=id
					})
				}
			}
			
			}
		);
	</script>
</html>
修饰符
  • 事件修饰符：

image.png

  1. stop:阻止事件冒泡

    事件冒泡：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。

image.png

当点击按钮1时，执行了work2，父级的事件work1也触发了。这就是事件冒泡。

用法：@click.stop="work2()"

image.png

  1. prevent:阻止元素的原生动作

    有的时候我们想要改变某些组件原生的动作，比如默认情况下，如果我点击一个<a>标签，那么默认会自动跳转到href对应的链接上去。如果我想要阻止这些原生的动作行为，那么这时候，我们就要使用prevent了

image.png

点击a标签时，就不再跳转到url，而是执行了函数alert1,弹出了弹窗。

image.png

@click.prevent.stop="alert1()" 同时阻止冒泡事件、组织原生动作。

  • 按键修饰符：

例如：百度搜索框输入完文本后，按回车键或者点击搜索按钮同一个效果。输入完用户名和密码之后回车跟点击登陆按钮一个效果。这些都是给按键添加了事件。

image.png

image.png

image.png

点击登录，和在密码输入框回车键都执行同一个方法：

image.png

  • 表单修饰符

image.png

计算属性-computed

image.png

例如：购物车，根据数量和价格得到付款额。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			<h1>购物车</h1>
			<h3>产品名：{{productName}}</h3>
			<h3>
				
				数量	：<button type="button" @click="reduce(num)">-</button>  {{num}}  <button type="button" @click="add(num)">+</button>
			</h3>
			<h3>单价：{{price}}</h3>
			<br>
			<h3>总价：{{sum}}</h3>
		</div>
		
	</body>
	<script type="text/javascript">
		var vm =new Vue({
			el:'#app',
			data:{
				productName:"耳饰",
				num:1,
				price:25
				
			},
			methods:{
				add:function(num){
					console.log("+");
					return this.num++
				},
				reduce:function(num){
					console.log("-")
					if(num<=1){
						console.log("数量不可再减少了")
						return num
					}
					return this.num--
				}
			},
			computed:{//定义计算属性
				sum:function(){
					return this.price*this.num
				}
			}
		})
	</script>
</html>

image.png

计算属性实现的运算、逻辑其实写在方法中也是可以实现的。区别在于，计算属性如果缓存的值没有变，就不会再调用。而在methods中的方法，无论缓存值有没有变化都会重新调用。

image.png

侦听器-watch

比如：百度搜索，当你在搜索输入框中不断输入内容时，展示下拉选项也在不断变化。可以通过侦听器监测到你的值改变时，调用后端接口，返回这些内容最热门的搜索项。

image.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id='app'>
			搜索内容：<input type='text' v-model="content" />
			
		</div>
		
	</body>
	<script type="text/javascript">
		var vm =new Vue({
			el:'#app',
			data:{
				content: ""
			},
			watch:{//侦听器，监测到数据发生变化时调用
				content:function(val){//content发生变化时，调用
					console.log("调用后端搜索接口",val)
				}
			}
			
		})
	</script>
</html>
过滤器-filters

image.png

例如：购物车场景，整个商家定价、购物车单价、购物车总价，都是2位小数。那可以使用过滤器调用同样的方法。

定义：

image.png

使用：

image.png

vue生命周期钩子

vue的生命周期图示中有8个红色的框，这是vue提供的8个钩子，常用的主要是2个：mounted、updated image.png

avatar
文章
阅读
粉丝