vue快速入门

最新推荐文章于 2023-04-30 17:05:04 发布

真不会coding

最新推荐文章于 2023-04-30 17:05:04 发布

阅读量156

点赞数

分类专栏： Javaweb 文章标签： 1024程序员节 javaweb 前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_59985125/article/details/127500897

版权

Javaweb 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1. Vue.js简介

任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。

于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。

在使用框架的过程中，我们往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。

对于Java程序来说，我们使用框架就是导入那些封装了『固定解决方案』的jar包，然后通过『配置文件』告诉框架做什么，就能够大大简化编码，提高开发效率。我们使用过的junit其实就是一款单元测试框架。

而对于JavaScript程序来说，我们使用框架就是导入那些封装了『固定解决方案』的『js文件』，然后在框架的基础上编码。

2.准备Vue.js环境

2.1.本地创建vue.js文件

在工程目录下创建script目录用来存放vue.js文件
创建空vue.js文件

2.2.创建HTML文档并引入vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">

        window.onload = function () {

            var vue = new Vue({
                "el":"#div0",
                date:{
                    msg: "hello world!"
                }

            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span>
    </div>
</body>
</html>

3.Vue.js基本语法：声明式渲染

HTML代码

	<!-- 使用{{}}格式，指定要被渲染的数据 -->
		<div id="app">{{message}}</div>

vue代码

// 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {
	
	// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
	// 通过id属性值指定HTML元素时，语法格式是：#id
	"el":"#app",
	
	// data属性设置了Vue对象中保存的数据
	"data":{
		"message":"Hello Vue!"
	}
};

// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);

4.Vue.js基本语法：绑定元素属性

v-bind:HTML标签的原始属性名

HTML代码

<div id="app">
	<!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 -->
	<!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 -->
	<input type="text" v-bind:value="vueValue" />
	
	<!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； -->
	<!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
	<p>{{vueValue}}</p>
</div>

Vue代码

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
	"el":"#app",
	"data":{
		"vueValue":"太阳当空照"
	}
});

本质上，v-bind:属性名="表达式"它们都是用Vue对象来渲染页面。只不过：

文本标签体：使用形式
属性：使用v-bind:属性名="表达式"形式

5.Vue.js基本语法：双向数据绑定

在这里插入图片描述

而使用了双向绑定后，就可以实现：页面上数据被修改后，Vue对象中的数据属性也跟着被修改。

<div id="app">
	<!-- v-bind:属性名 效果是从Vue对象渲染到页面 -->
	<!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 -->
	<input type="text" v-model:value="vueValue" />
	
	<p>{{vueValue}}</p>
</div>

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
	"el":"#app",
	"data":{
		"vueValue":"太阳当空照"
	}
});

5.1.去除前后空格

value可以省略

<input type="text" v-model="vueValue" />

.trim修饰符

实际开发中，要考虑到用户在输入数据时，有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素，要去掉。在v-model后面加上.trim修饰符即可实现。

<input type="text" v-model.trim="vueValue" />

Vue会帮助我们在文本框失去焦点时自动去除前后空格。

6.Vue.js基本语法：条件渲染

根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。

6.1.v-if

<div id="app">
	<h3>if</h3>
	<img v-if="flag" src="/pro03-vue/./images/one.jpg" />
	<img v-if="!flag" src="/pro03-vue/./images/two.jpg" />
</div>

var app = new Vue({
			"el":"#app",
			"data":{
				"flag":true
			}
		});

6.2.v-if和v-else

<div id="app02">
	<h3>if/else</h3>
	<img v-if="flag" src="/pro03-vue/./images/one.jpg" />
	<img v-else="flag" src="/pro03-vue/./images/two.jpg" />
</div>

var app02 = new Vue({
			"el":"#app02",
			"data":{
				"flag":true
			}
		});

6.3.v-show

<div id="app03">
	<h3>v-show</h3>
	<img v-show="flag" src="/pro03-vue/./images/mi.jpg" />
</div>

var app03 = new Vue({
			"el":"#app03",
			"data":{
				"flag":true
			}
		});

7.Vue.js基本语法：列表渲染

7.1.迭代一个简单的数组

<div id="app01">
	<ul>
		<!-- 使用v-for语法遍历数组 -->
		<!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 -->
		<!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 -->
		<li v-for="fruit in fruitList">{{fruit}}</li>
	</ul>
</div>

var app01 = new Vue({
	"el":"#app01",
	"data":{
		"fruitList": [
			"apple",
			"banana",
			"orange",
			"grape",
			"dragonfruit"
		]
	}
});

7.2.迭代一个对象数组

<div id="app">
	<table>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>专业</th>
		</tr>
		<tr v-for="employee in employeeList">
			<td>{{employee.empId}}</td>
			<td>{{employee.empName}}</td>
			<td>{{employee.empAge}}</td>
			<td>{{employee.empSubject}}</td>
		</tr>
	</table>
</div>

var app = new Vue({
	"el":"#app",
	"data":{
		"employeeList":[
			{
				"empId":11,
				"empName":"tom",
				"empAge":111,
				"empSubject":"java"
			},
			{
				"empId":22,
				"empName":"jerry",
				"empAge":222,
				"empSubject":"php"
			},
			{
				"empId":33,
				"empName":"bob",
				"empAge":333,
				"empSubject":"python"
			}
		]
	}
});

8.Vue.js基本语法：事件驱动

8.1.字符串顺序反转

<div id="app">
	<p>{{message}}</p>
	
	<!-- v-on:事件类型="事件响应函数的函数名" -->
	<button v-on:click="reverseMessage">Click me,reverse message</button>
</div>

var app = new Vue({
	"el":"#app",
	"data":{
		"message":"Hello Vue!"				
	},
	"methods":{
		"reverseMessage":function(){
			this.message = this.message.split("").reverse().join("");
		}
	}
});

8.2.获取鼠标移动时的坐标信息

<div id="app">
	<div id="area" v-on:mousemove="recordPosition"></div>
	<p id="showPosition">{{position}}</p>
</div>

var app = new Vue({
	"el":"#app",
	"data":{
		"position":"暂时没有获取到鼠标的位置信息"
	},
	"methods":{
		"recordPosition":function(event){
			this.position = event.clientX + " " + event.clientY;
		}
	}
});

9.Vue.js基本语法：侦听属性

<div id="app">
	<p>尊姓：{{firstName}}</p>
	<p>大名：{{lastName}}</p>
	尊姓：<input type="text" v-model="firstName" /><br/>
	大名：<input type="text" v-model="lastName" /><br/>
	<p>全名：{{fullName}}</p>
</div>

在上面代码的基础上，我们希望firstName或lastName属性发生变化时，修改fullName属性。此时需要对firstName或lastName属性进行**『侦听』**。

具体来说，所谓**『侦听』**就是对message属性进行监控，当firstName或lastName属性的值发生变化时，调用我们准备好的函数。

在watch属性中声明对firstName和lastName属性进行**『侦听』**的函数：

var app = new Vue({
	"el":"#app",
	"data":{
		"firstName":"jim",
		"lastName":"green",
		"fullName":"jim green"
	},
	"watch":{
		"firstName":function(inputValue){
			this.fullName = inputValue + " " + this.lastName;
		},
		"lastName":function(inputValue){
			this.fullName = this.firstName + " " + inputValue;
		}
	}
});

10.Vue.js基本语法：简化写法

10.1.v-bind的简化写法

<input type="text" v-bind:value="message" />

简化后：

<input type="text" :value="message" />

10.2.v-on的简化写法

<button v-on:click="sayHello">SayHello</button>

简化后：

<button @click="sayHello">SayHello</button>

11.Vue对象生命周期

在我们各种语言的编程领域中，**『生命周期』**都是一个非常常见的概念。一个对象从创建、初始化、工作再到释放、清理和销毁，会经历很多环节的演变。比如我们在JavaSE阶段学习过线程的生命周期，今天学习Vue对象的生命周期，将来还要学习Servlet、Filter等Web组件的生命周期。

Vue允许我们在特定的生命周期环节中通过钩子函数来加入我们的代码。

<div id="app">
	<p id="content">{{message}}</p>
	<button @click="changeValue">点我</button>
</div>

new Vue({
	"el":"#app",
	"data":{
		"message":"hello"
	},
	"methods":{
		"changeValue":function(){
			this.message = "new hello";
		}
	},
	
	// 1.实例创建之前
	"beforeCreate":function(){
		console.log("beforeCreate:"+this.message);
	},
	
	// 2.实例创建完成
	"created":function(){
		console.log("created:"+this.message);
	},
	
	// 3.数据挂载前
	"beforeMount":function(){
		console.log("beforeMount:"+document.getElementById("content").innerText);
	},
	
	// 4.数据已经挂载
	"mounted":function(){
		console.log("mounted:"+document.getElementById("content").innerText);
	},
	
	// 5.数据更新前
	"beforeUpdate":function(){
		console.log("beforeUpdate:"+document.getElementById("content").innerText);
	},
	
	// 6.数据更新之后
	"updated":function(){
		console.log("updated:"+document.getElementById("content").innerText);
	}
});

真不会coding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue快速入门

任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。在使用框架的过程中，我们往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。对于Java程序来说，我们使用框架就是导入那些封装了『固定解决方案』的jar包，然后通过『配置文件』告诉框架做什么，就能够大大简化编码，提高开发效率。
复制链接

扫一扫