前端vue框架自学

最新推荐文章于 2023-12-14 10:54:33 发布
最新推荐文章于 2023-12-14 10:54:33 发布
阅读量134 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljs13168734665/article/details/121895368
版权

前端vue框架自学

1、安装编译器HBuilderX

引入vue.js才可以使用vue框架。
vue.js
新建项目
新建html文件
放入vue.js
在这里插入图片描述

出现Vue（）函数代表引入成功
或者在控制台看到这个也代表成功
在这里插入图片描述

2、第一个vue应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="apps">
	  {{ message }} {{name}} {{world}}
	</div>
	
	<script type="text/javascript">
	var app = new Vue({
		el: '#apps',
		data: {
			message: 'Hello Vue!',
			name : "Vue",
			world: "hello world"
		}
	});
	</script>

</body>
</html>

在这里插入图片描述
定义全局变量同时返回应用对象。
应用对象这里包括：element和data

3、vue的数据和方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{a}}
</div>

<script type="text/javascript">
var data = { a : 1 };
var vm = new Vue({
	el   : "#app",
	data : data
});

</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{a}}
</div>

<script type="text/javascript">
var data = { a : 1 };
var vm = new Vue({
	el   : "#app",
	data : data
});

vm.$watch('a', function(newVal, oldVal){
	console.log(newVal, oldVal);
})

vm.$data.a = "test...."

</script>

</body>
</html>

第一个data是Vue对象的属性。第二个data是指上面定义的var data变量
使用vm. $data.a可以改变a的值
使用vm. $watch(‘a’，function(newVal,oldVal）)
实现监听作用，监听a的值变化后和变化前的变化
在这里插入图片描述

4、vue的生命周期

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

调用setTimeOut函数修改msg变量前会执行beforeCreate、created、beforeMount、mounted
再执行beforeUpdate、updated生命周期。当然生命周期不止这几个。会与组件相关联

5、模板的使用

5.1、文本插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				msg : "hi vue",
			}
			})
			
			
		</script>
	</body>
</html>

5.2、vi-once（只允许赋值一次）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" v-once>
			{{msg}}
		</div>
		<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				msg : "hi vue",
			}
			})
			vm.$data.msg = 'aaa';
			
		</script>
	</body>
</html>

在这里插入图片描述
5.3、v-html（允许输出html代码，而不是文本）
###如果不在div标签中指定v-html，则输出的还是文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<p>Using mustaches: {{ rawHtml }}</p>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				msg : "hi vue",
				rawHtml : '<span style="color:red">this is should be red</span>',
			}
			})
			vm.$data.msg = 'aaa';
			
		</script>
	</body>
</html>

在这里插入图片描述
###指定以后则输出html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<p>Using mustaches: {{ rawHtml }}</p>
			<p v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				msg : "hi vue",
				rawHtml : '<span style="color:red">this is should be red</span>',
			}
			})
			vm.$data.msg = 'aaa';
			
		</script>
	</body>
</html>

在这里插入图片描述
5.4、v-bind （属性动态绑定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<p>Using mustaches: {{ rawHtml }}</p>
			<p v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
			<div v-bind:class="color">test...</div>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				msg : "hi vue",
				rawHtml : '<span style="color:red">this is should be red</span>',
				color:'blue'
			}
			})
			vm.$data.msg = 'aaa';
			
		</script>
		
		<style type="text/css">
			.red{color:red;}
			.blue{color:blue; font-size:100px;}
		</style>
	</body>
</html>

在这里插入图片描述

5.5、vue可支持javascript语法
###变量算数运算
###三目表达式运算
###函数式操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<p>Using mustaches: {{ rawHtml }}</p>
			<p v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
			<div v-bind:class="color">test...</div>
			<p>{{number + 2}}</p>
			<p>{{ok == 2? "yes" : "no"}}</p>
			<p>{{ message.split('').reverse().join('') }}</p>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				msg : "hi vue",
				rawHtml : '<span style="color:red">this is should be red</span>',
				color:'blue',
				number : 10,
				ok : 3,
				message : 'vue'
			}
			})
			vm.$data.msg = 'aaa';
			
		</script>
		
		<style type="text/css">
			.red{color:red;}
			.blue{color:blue; font-size:100px;}
		</style>
	</body>
</html>

6、模板语法：指令

6.1、v-if (条件成立即执行)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			<p v-if="seen">现在你看到我了</p>
			
		</div>
	</head>
	<body>
	
		<script "text/javascript">
			var vm = new Vue({
			el : "#app",
			data : {
				seen : true,
				},
			})
		</script>
		
	</body>
</html>

在这里插入图片描述
6.2、 v-bind:href= （绑定跳转）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			<p v-if="seen">现在你看到我了</p>
			<a v-bind:href="url">...</a>
		</div>
	</head>
	<body>
	
		<script "text/javascript">
			var vm = new Vue({
			el : "#app",
			data : {
				seen : true,
				url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
				},
			})
		</script>
		
	</body>
</html>

在这里插入图片描述
6.3、@click（点击事件）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			<p v-if="seen">现在你看到我了</p>
			<a v-bind:href="url">...</a>
			<div @click="click1">
				<div @click="click2">
					click me
				</div>
			</div>
		</div>
	</head>
	<body>
	
		<script "text/javascript">
			var vm = new Vue({
			el : "#app",
			data : {
				seen : true,
				url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
				},
				methods:{
					click1 : function () {
						console.log('click1......');
					},
					click2 : function () {
						console.log('click2......');
					}
				}
			})
			
		</script>
		
	</body>
</html>

###当我们点击click me时
在这里插入图片描述
控制台打印
在这里插入图片描述
###当我们只需要子div执行不需要父级执行时
则@click.stop

	<div @click="click1">
				<div @click.stop="click2">
					click me
				</div>
			</div>

在这里插入图片描述

7、class与style绑定

v-bind 与 class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-bind:class="{active : isActive}" style="width:200px;height: 200px;text-align: center;
line-height: 200px;">
	hi vue
	</div>
</div>

<script type="text/javascript">
var vm = new Vue({
	el:"#app",
	data:{
		isActive :true
	}
});
</script>

<style>
.active{background: #FF0000;}
</style>

</body>
</html>

在这里插入图片描述
普通的class绑定
在这里插入图片描述
在这里插入图片描述

对象内绑定多个动态样式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
支持数组类型动态绑定

##style绑定
在这里插入图片描述
在这里插入图片描述
支持三元运算

8、条件渲染

if else

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<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>
	
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		type : ""
		
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

在这里插入图片描述
v-show ，页面上展示或隐藏标签
在这里插入图片描述

厚学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端框架vue基础
lyyibaobao的博客
06-19 1755
typora-copy-images-to: E:\md文件\图片 前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language）决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets ）设定网页表现样式 JavaScript（行为）：是一种弱类型脚本语言，启源代码不需要编译，而是由浏览器解析运行，用于控制行为 结构层（HTML） 表现层（CSS） css层叠样式表是一门标记语言，并不是编程语言，因此不可以定义变量，可以引用.
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
12-30
原始 HTML(Raw HTML) 双花括号语法，会将数据中的 HTML 转为纯文本后再进行插值。为了输出真正的 HTML，你需要使用 v-html 指令： <p>使用双花括号语法：{{ rawHtml }}</p> <p>使用 v-html 指令：<span v-html=rawHtml></span></p> 使用双花括号语法：<span xss=removed>This should be red.</span> 使用 v-html 指令：This should be red. span 中的内容，将会被替换为 rawHtml 属性的值，并且作为原始 HTML 插入
【Vue实践 第四篇】Vue实现html标签输出
Jacker
04-17 2165
一、知识点： 1.Vue实现html标签输出； 二、代码： <body> <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Vue实现html标签输出</h1>' } }) </script> &lt...
vue 前端导出页面图表保存为Html格式文档
weixin_52950296的博客
09-12 2506
vue 前端导出页面图表保存为Html格式文档
想掌握vue模板语法？两篇就够了！(上)
oyang的博客
09-02 624
使用v-html指令用于输出html代码 ,HTML属性中的值应使用v-bind指令, Vue表达式,class绑定, style绑定,v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model,指的是带有“v-”前缀的特殊属性,v-for：类似JS的遍历,v-showvue允许你自定义过滤器，被用作一些常见的文本格式化计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新,监听属性,我们可以通过watch 来响应数据
vue导出html页面
qq_42739199的博客
03-12 2464
div class="contentsss" ref="test"> <-- 要到处部分的html --> </div> <button @click="export2Excel">导出</button> <script> export default { name: "HelloWorld", data() { ...
我的第一个springboot3+vue3自学项目——大事件系统.zip
最新发布
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
云E办-前端-Vue.zip
12-21
这个项目基于Vue.js框架构建，Vue.js是目前非常流行的一种轻量级前端框架，它以组件化、易上手、性能优良著称。在"自学云e办前端项目"的过程中，你可以深入理解Vue的核心概念和技术栈，包括但不限于Vue实例、组件、...
前端自学的一些笔记
07-11
现代前端开发离不开React、Vue、Angular等主流框架。它们提供了组件化开发方式，提高了开发效率。学习一个或多个框架是必要的，比如React的基本组件、状态管理和生命周期方法；Vue的指令、组件、Vuex状态管理；...
vue.rar初级入门自学demo
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。这个"vue.rar初级入门自学demo"包含了一系列资源，旨在帮助初学者快速上手Vue.js。在这个压缩包中，你将找到一个名为 "vue" 的文件，它可能包含了...
vue.js使用v-pre与v-html输出HTML操作示例
12-10
本文实例讲述了vue.js使用v-pre与v-html输出HTML操作。分享给大家供大家参考，具体如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="i
自学vue过程中的一些基础知识点
06-20
Vue.js 是一款流行的前端JavaScript框架，它简化了构建交互式用户界面的过程。以下是一些在自学Vue过程中需要掌握的基础知识点： 1. **`this` 指向**：在Vue实例中，`this`通常指向当前Vue实例，这在定义方法和属性...
vue中 把vue页面导出为 html页面
weixin_44168929的博客
12-14 3181
我司要求我把数据融合起来，导出用html的方式展示
vue项目中导出html文件
m0_46186051的博客
04-30 3919
vue项目中导出html文件 export.vue async generate() { // 将html文件中需要用到的数据挂载到store上 this.$store.commit("report", { basicmsg: this.basicmsg }); // import()引入含有html代码的js文件,因为vue不支持引入html文件,只能将html代码写成字符串放到js文件中; await import("./export.js").then((modules
vue html插值,Vue.js入门教程之二：Vue插值与输出HTML
weixin_34377186的博客
06-26 988
经过上一篇文章《Vue.js入门教程之一：开发环境搭建》的学习，我们已经搭建好了基本的Vue.js开发环境，并且还编写了第一个Vue.js程序，通过使用{{message}}的语法，在HTML页面的DOM元素中插入了数据。 今天，我们将进一步学习Vue.js的相关知识。1、在页面中插入文字1.1 在标签中加入如下代码：插入文字：{{message}}调用方法的结果：{{doSomething()}...
vue打印自定义html内容
Zan_Z的博客
01-13 764
自定义打印html，图片内容
vue打印HTML
qq_44173499的博客
02-26 738
vue打印HTML： HTML: Markup <table id="printbox" width="auto" border="1" style="margin: 20px;"> <tr align="center"> <td width= "80">题号</td> <td width= "80" v-for="item in answerList">{{item.i
Vue中{{}}、v-text和v-html
gyueh的博客
12-22 455
区别： {{}}和v-text会将元素当成纯文本输出 v-html会将元素当成html标签解析后输出 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t
vue把文本转换为html内容的方法
weixin_45832749的博客
03-30 1677
首先在vue的计算属性中添加方法。
自学前端需要掌握哪些内容
06-08
6. 前端框架和库：学习前端需要了解一些常用的前端框架和库，例如Vue、React、Angular、Bootstrap等，可以帮助你快速地开发Web应用和提高开发效率。 7. 版本管理：学习前端需要了解版本管理的概念和使用，例如Git和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值