JavaWeb『Vue.js』快速入门_html-js-css

Vue快速入门第一节准备Vue.js环境1、开发中的最佳实践2、Vue框架的js文件获取3、本地创建vue.js文件4、创建HTML文档并引入vue.js 第二节 Vue.js基本语法：声明式渲染1、概念①声明式②渲染 2、demo①HTML代码②vue代码 3、查看声明式渲染的响应式效果第三节 Vue.js基本语法：绑定元素属性1、基本语法2、demo①HTML代码②Vue代码 3、小结第四节 Vue.js基本语法：双向数据绑定1、提出问题2、demo①HTML代码②Vue代码③页面效果 3、去除前后空格①:value可以省略②.trim修饰符第五节 Vue.js基本语法：条件渲染1、v-if①HTML代码②Vue代码 2、v-if和v-else①HTML代码②Vue代码 3、v-show①HTML代码②Vue代码第六节 Vue.js基本语法：列表渲染1、迭代一个简单的数组①HTML代码②Vue代码 2、迭代一个对象数组①HTML代码②Vue代码第七节 Vue.js基本语法：事件驱动1、demo：字符串顺序反转①HTML代码②Vue代码 2、demo：获取鼠标移动时的坐标信息①HTML代码②Vue代码第八节 Vue.js基本语法：侦听属性1、提出需求2、Vue代码第九节 Vue.js基本语法：简化写法1、v-bind的简化写法2、v-on的简化写法第十节 Vue对象生命周期1、概念2、Vue对象的生命周期3、生命周期钩子函数①HTML代码②Vue代码第十一节 Vue基础练习1、功能效果演示2、任务拆解3、第一步：显示表格①HTML标签②Vue代码 4、第二步：显示四个文本框①HTML标签②Vue代码 5、第三步：创建一个p标签6、第四步：点击添加记录按钮①第一小步：给按钮设置事件驱动[1]HTML标签[2]Vue代码 ②第二小步：打印一下文本框输入的数据③第三小步：将收集到的数据添加到表格中

第一节准备Vue.js环境 1、开发中的最佳实践

『最佳实践』是实际开发中，针对特定问题提炼出来的最好的解决方案。把『最佳实践』抽取出来，封装到各自编程语言的程序包中，就是框架的基础。

Java语言的程序包：jar包JavaScript语言的程序包：外部js文件

对于Java程序来说，框架=jar包+配置文件。对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。

2、Vue框架的js文件获取

官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

3、本地创建vue.js文件

此教程是在idea中直接 *** 作。

第一步：在idea中创建javaweb工程

第二步：在工程web目录下创建script目录用来存放vue.js文件

第三步：创建空vue.js文件

第四步：将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

4、创建HTML文档并引入vue.js

在demo01.html中引入

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

body>
html>

第二节 Vue.js基本语法：声明式渲染 1、概念 ①声明式

『声明式』是相对于『编程式』而言的。

声明式：告诉框架做什么，具体 *** 作由框架完成编程式：自己编写代码完成具体 *** 作 ②渲染

蓝色方框：HTML标签红色圆形：动态、尚未确定的数据蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、渲染：程序计算动态数据得到具体数据的过程 2、demo ①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);

3、查看声明式渲染的响应式效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script language="JavaScript" src="script/vue.js">script>
    <script language="JavaScript">
        window.onload=function (){
            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);
        }
    script>

head>
<body>
<div id="app">{{message}}div>

body>
html>

第三节 Vue.js基本语法：绑定元素属性 1、基本语法

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

2、demo ①HTML代码

<div id="app">
	
	{}}的表达式 -->
	<input type="text" v-bind:value="vueValue" />
	
	{}}告诉Vue这里需要渲染； -->
	
	<p>{{vueValue}}p>
div>

②Vue代码

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

3、小结

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

文本标签体：使用形式属性：使用v-bind:属性名="表达式"形式第四节 Vue.js基本语法：双向数据绑定 1、提出问题

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

2、demo ①HTML代码

<div id="app">
	
	
	<input type="text" v-model:value="vueValue" />
	
	<p>{{vueValue}}p>
div>

②Vue代码

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

③页面效果

p标签内的数据能够和文本框中的数据实现同步修改：

3、去除前后空格 ①:value可以省略

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

②.trim修饰符

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

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

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

第五节 Vue.js基本语法：条件渲染

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

1、v-if ①HTML代码

<div id="div0">
        <input type="text" v-model="num"/>
        <div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;"> div>

    div>

②Vue代码

        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    num:2
                }
            });
        }

2、v-if和v-else ①HTML代码

<div id="div0">
        <input type="text" v-model="num"/>
  <div v-else="num%2==0" style="width:200px;height:200px;background-color: coral"> div>
    
    div>

②Vue代码

        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    num:2
                }
            });
        }

3、v-show ①HTML代码

<div id="div0">
        <input type="text" v-model="num"/>
   
        
        <div v-show="num%2==0" style="width:200px;height:200px;background-color:blueviolet;"> div>
    
    div>

②Vue代码

        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    num:2
                }
            });
        }

第六节 Vue.js基本语法：列表渲染 1、迭代一个简单的数组 ①HTML代码

<div id="app01">
	<ul>
		
		
		{引用数组元素的变量名}}渲染每一个数组元素 -->
		<li v-for="fruit in fruitList">{{fruit}}li>
	ul>
div>

②Vue代码

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

2、迭代一个对象数组 ①HTML代码

<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>

②Vue代码

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"
			}
		]
	}
});

第七节 Vue.js基本语法：事件驱动 1、demo：字符串顺序反转 ①HTML代码

<div id="app">
	<p>{{message}}p>
	
	
	<button v-on:click="reverseMessage">Click me,reverse messagebutton>
div>

②Vue代码

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

2、demo：获取鼠标移动时的坐标信息 ①HTML代码

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

②Vue代码

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

第八节 Vue.js基本语法：侦听属性 1、提出需求

<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属性的值发生变化时，调用我们准备好的函数。

2、Vue代码

在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;
		}
	}
});

第九节 Vue.js基本语法：简化写法 1、v-bind的简化写法

正常写法：

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

简化以后：

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

2、v-on的简化写法

正常写法：

<button v-on:click="sayHello">SayHellobutton>

简化以后：

<button @click="sayHello">SayHellobutton>

第十节 Vue对象生命周期 1、概念

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

2、Vue对象的生命周期

3、生命周期钩子函数 ①HTML代码

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

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

②Vue代码

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);
	}
});

第十一节 Vue基础练习 1、功能效果演示

2、任务拆解第一步：显示表格第二步：显示四个文本框第三步：创建一个p标签用来显示用户在文本框中实时输入的内容第四步：点击添加记录按钮实现记录的添加 3、第一步：显示表格 ①HTML标签

<table id="appTable">
	<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>

②Vue代码

var appTable = new Vue({
	"el": "#appTable",
	"data": {
		"employeeList": [{
				"empId": 1,
				"empName": "tom",
				"empAge": 11,
				"empSubject": "java"
			},
			{
				"empId": 2,
				"empName": "jerry",
				"empAge": 22,
				"empSubject": "php"
			},
			{
				"empId": 3,
				"empName": "peter",
				"empAge": 33,
				"empSubject": "python"
			}
		]
	}
});

4、第二步：显示四个文本框 ①HTML标签


<div id="appDiv">
	
	
	编号：<input type="text" v-model="empId" /><br/>
	姓名：<input type="text" v-model="empName" /><br/>
	年龄：<input type="text" v-model="empAge" /><br/>
	专业：<input type="text" v-model="empSubject" /><br/>
	
	
	
	
	
div>

②Vue代码

var appDiv = new Vue({
	"el":"#appDiv",
	"data":{
		// 初始值设置空字符串即可
		"empId":"",
		"empName":"",
		"empAge":"",
		"empSubject":""
	}
});

5、第三步：创建一个p标签

HTML标签：


<div id="appDiv">
	
	
	编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>
	姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>
	年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>
	专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/>
	
	
	<p>{{empId}} {{empName}} {{empAge}} {{empSubject}}p>
	
	
	
div>

6、第四步：点击添加记录按钮 ①第一小步：给按钮设置事件驱动 [1]HTML标签


<div id="appDiv">
	
	
	编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>
	姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>
	年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>
	专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/>
	
	
	<p>{{empId}} {{empName}} {{empAge}} {{empSubject}}p>
	
	
	<button type="button" v-on:click="addRecord">添加记录button>
	
div>

[2]Vue代码

var appDiv = new Vue({
	"el":"#appDiv",
	"data":{
		// 初始值设置空字符串即可
		"empId":"",
		"empName":"",
		"empAge":"",
		"empSubject":""
	},
	"methods":{
		"addRecord":function(){
			console.log("我点击了那个按钮……");
		}
	}
});

②第二小步：打印一下文本框输入的数据

var appDiv = new Vue({
	"el":"#appDiv",
	"data":{
		// 初始值设置空字符串即可
		"empId":"",
		"empName":"",
		"empAge":"",
		"empSubject":""
	},
	"methods":{
		"addRecord":function(){
			console.log("我点击了那个按钮……");
			console.log(this.empId);
			console.log(this.empName);
			console.log(this.empAge);
			console.log(this.empSubject);
		}
	}
});

③第三小步：将收集到的数据添加到表格中

"addRecord":function(){
	
	// 确认单击事件是否绑定成功
	console.log("我点击了那个按钮……");
	
	// 确认是否能够正确收集到文本框数据
	console.log(this.empId);
	console.log(this.empName);
	console.log(this.empAge);
	console.log(this.empSubject);
	
	// 将收集到的文本框数据封装为一个对象
	var employee = {
		"empId":this.empId,
		"empName":this.empName,
		"empAge":this.empAge,
		"empSubject":this.empSubject
	};
	
	// 将上面的对象压入表格数据的employeeList数组
	appTable.employeeList.push(employee);
}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1324834.html

JavaWeb『Vue.js』快速入门

发表评论

评论列表（0条）