Vue简单入门

最新推荐文章于 2024-07-30 21:54:07 发布
最新推荐文章于 2024-07-30 21:54:07 发布
阅读量109 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45543118/article/details/108075923
版权

目录

引言

Vue是最近几年比较热门的前端框架，作者是中国的尤雨溪，是一个构建用户界面的渐进式javascript的框架，所谓渐进式框架，意思就是可以用它一部分内容，但是不强制用了一部分就用所有部分。

Vue受到了MVVM的启发,所谓MVVM就是一种UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步，虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发

安装

1.cdn下载(需连接网络)BootCDN官网.

 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.netBootCDN/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2 手动下载

 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="dist/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="dist/vue.min.js"></script>

入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue入门案例</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript">
		//作用：将vue示例挂载到具体的边界,那么这个边界就会被vue这个渐进式框架所管理
		//边界不能有兄弟标签,边界一定是根标签
		new Vue({
			el:'#app',
			data:{
				msg:'hello vue!',
			}
		})
	</script>
</html>

在这里插入图片描述

事件(v-on绑定事件)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue入门案例</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg"/>
			<button v-on:click="xxx">vue事件按钮</button>
			<button @click="xxx">vue事件按钮简写</button>
			<!-- v-on代表vue指令:后面是参数 -->
		</div>  
	</body>
	<script type="text/javascript">
		//作用：将vue示例挂载到具体的边界,那么这个边界就会被vue这个渐进式框架所管理
		//边界不能有兄弟标签,边界一定是根标签
		new Vue({
			el: '#app',
			//es6之前的写法
			// 			data:{
			// 				msg:'hello vue!',
			// 			},
			// 			data:function(){
			// 				return{
			// 					msg:'hello vue!!'
			// 				}
			// 			},
			//es6写法
			data() {
               return{
				   msg:'hello vue!',
			   }
			},
			methods: {
				xxx() {
					alert("xxx方法被调用");
					this.msg='123';
				}
			}
		})
	</script>
</html>

在这里插入图片描述
事件触发后
在这里插入图片描述

双向绑定（v-model）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue双向数据绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript">
		//作用：将vue示例挂载到具体的边界,那么这个边界就会被vue这个渐进式框架所管理
		//边界不能有兄弟标签,边界一定是根标签
		new Vue({
			el:'#app',
			data:{
				msg:'hello vue!'
			}
		})
		
	</script>
</html>

在这里插入图片描述
当修改文本框/h3标签内容时，h3标签/文本框内容同步修改，
在这里插入图片描述

Vue生命周期

在这里插入图片描述
HTML测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="d1">
			<div>number:{{number}}</div>
			<div>{{detail()}}</div>
		</div>
		<script>
			var data = {
				number:999,
				msg:'vue'
			};
			var vm = new Vue({
				el:'#d1',
				data:data,
				methods:{
					detail:function(){
						return "使用方法来插值："+this.msg;
					}
				},
				beforeCreate:function(){
		            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
		            console.log(this.msg)//undefined
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		        },
		        created:function(){
		            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
		            this.msg+='!!!'
		            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
		        },
		        beforeMount:function(){
		            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
		            this.msg+='@@@'
		            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		            console.log('接下来开始render，渲染出真实dom')
		        },
		        // render:function(createElement){
		        //     console.log('render')
		        //     return createElement('div','hahaha')
		        // },
		        mounted:function(){ 
		            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
		            console.log(document.getElementsByClassName("myp")[0])
		            console.log('可以在这里操作真实dom等事情...')
		
		        //    this.$options.timer = setInterval(function () {
		        //        console.log('setInterval')
		        //         this.msg+='!'  
		        //    }.bind(this),500)
		        },
		        beforeUpdate:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('beforeUpdate:重新渲染之前触发')
		            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
		        },
		        updated:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('updated:数据已经更改完成，dom也重新render完成')
		        },
		        beforeDestroy:function(){
		            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
		            // clearInterval(this.$options.timer)
		        },
		        destroyed:function(){
		            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
		        }
			});
		</script>
	</body>
</html>

在这里插入图片描述

长沙小睿睿
关注
Vue简单入门及案例
qq_54605990的博客
04-27 1818
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
Vue 基础入门
热门推荐
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue 简单快速入门
woruosuifenglang的博客
07-25 2369
​Vue
vue基础入门
weixin_58470558的博客
05-13 6801
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
VUE 快速入门
qq_55624813的博客
11-04 1613
目录 VUE 简介 什么是VUE? 什么场景使用VUE？ VUE 快速入门 官方js文件下载 业务及代码实现 总结(Summary) VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如:
Vue框架入门
2303_80480614的博客
07-30 1784
Author：Dawn_T17🥥什么是框架在编程中，是一种提供了基本结构和功能的软件架构。它就像是一个预先搭建好的基础模板，为开发者设定了一套规则、模式和工具，以帮助他们更高效、更规范地进行软件开发。例如，在 Web 开发中，Django（Python 框架）和 Spring（Java 框架）为开发者处理了很多底层的复杂逻辑，如路由、数据库连接和管理等。
Vue 入门简单示例
Elvira_Sunset的博客
06-11 1260
#Vue ##1、创建Vue实例展示在页面上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cd
vue3入门
m0_72087285的博客
11-09 1090
vue 是一套用于构建用户界面的渐进式框架。在前端框架里，相对来说 vue 的入门门槛低，上手相对简单，且国内市场占有率很高，特别是中小企业，基本上都是用 vue。HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。不直接操作dom，减少性能损耗，数据操作与展现也更加方便。用解耦、可复用的组件来构造界面。提高开发效率和代码质量。精确有效的异步批量 DOM 更新。通过 NPM 或 Bower 安装，无缝融入你的工作流。
Vue快速入门
梵高的向日葵
11-05 8534
文章目录一、Vue快速入门1、第一个Vue程序2、Vue基本语法2.1、if判断2.4、事件双向绑定3、Vue组件4、Axios异步通信5、计算属性6、插槽slot7、自定义事件内容分发8、创建vue项目二、Vue实战1、项目创建2、项目开发未完结 一、Vue快速入门 1、第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
Vue简单入门.pdf
03-24
Vue.js 是一款流行的前端开发框架，以其简单、精确和快速上手的特点被广泛采用。它是一种渐进式框架，特别适合构建数据驱动的web界面。Vue.js 的设计目标是通过简洁的API实现响应式的数据绑定和组件组合，使得开发者...
vue简单入门.pptx
06-16
### Vue.js 简单入门知识点详解 #### 一、Vue.js 概述 - **定义**：Vue.js 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手...
vue简单入门介绍.docx
11-22
Vue.js的简单易用性和高效的性能使其在前端开发领域受到广泛欢迎。它的核心特性包括组件化、指令系统、虚拟DOM、计算属性、响应式系统等。组件化允许开发者将UI拆分为可复用的部分，提高代码重用率；指令系统如v-if...
毕业设计论文SpringBoot乐享田园系统.docx
10-17
毕业设计论文
3.实验三 顺序栈和队列.doc
10-17
3.实验三 顺序栈和队列.doc
三维-基于Angular的三维地球组件-依赖于三维框架cesium-优质项目实战.zip
10-17
三维_基于Angular的三维地球组件_依赖于三维框架cesium_优质项目实战
网格顶点颜色到纹理转换工具：Convert Vertex Color To Texture v2024.1
10-17
这款工具的核心功能包括： 子网格顶点颜色渲染：工具能够单独渲染每个子网格的顶点颜色，这为开发者提供了灵活的控制，可以针对不同的网格部分进行定制化的处理。 合并为单一纹理：除了单独渲染，工具还支持将所有子网格的顶点颜色合并为一个纹理。这一功能在处理复杂模型或需要统一管理多个网格时尤为有用。 批量转换器：编辑器工具内置了批量转换器，允许开发者一次性处理多个网格，大大提高了工作效率。 高分辨率纹理输出：支持以高达 8K 的分辨率渲染 JPG、PNG 和 TGA 格式的纹理，满足了高质量输出的需求。 运行时 API：通过为 Unity Mesh 类添加的 ConvertVertexColorToTexture 扩展方法，工具在运行时也能动态地将顶点颜色转换为 Texture2D 对象，为实时应用提供了可能。
MATLAB实现BO-NARX和BO-LSTM贝叶斯优化神经网络股票价格预测比较（含完整的程序和代码详解）
最新发布
10-17
内容概要：本文介绍了使用MATLAB实现贝叶斯优化的非线性自回归外生模型（BO-NARX）和贝叶斯优化的长短期记忆神经网络（BO-LSTM）进行股票价格预测的比较研究。通过对模型的训练和评估，比较了两者的均方根误差（RMSE）和训练时间，从而得出各自的优缺点及其适用场景。 适合人群：金融工程研究人员、数据科学家、机器学习爱好者、从事金融数据分析的专业人士。 使用场景及目标：① 用于比较不同的时间序列预测模型在股票市场的表现；② 提供具体的代码实现和详细注释，帮助读者理解和应用这些模型；③ 探讨未来的研究方向，如多特征融合、集成学习等。 其他说明：本文不仅提供了理论背景和模型描述，还附带了完整的MATLAB代码实现，便于读者直接上手操作。项目特点包括使用贝叶斯优化自动选择超参数，提高了模型性能，具有较高的实用价值。
三维文物重建-基于NeRF实现的文物三维重建算法-附项目源码-优质项目实战.zip
10-17
三维文物重建_基于NeRF实现的文物三维重建算法_附项目源码_优质项目实战
vue简单入门的项目
01-31
Vue.js 是一款简单易学的前端框架，下面我将用300字详细介绍如何进行Vue简单入门项目。 首先，你需要确保你已经安装了Node.js和npm。然后通过npm全局安装Vue CLI，使用以下命令： npm install -g @vue/cli 接下来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值