Vue基础笔记

已于 2023-01-12 02:23:47 修改
阅读量71 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-10-30 23:38:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq115482677/article/details/127591554
版权

1.Vue具有双向数据绑定、轻量级框架和组件化的优势。

2.Vue和React的区别是Vue用DOM模板，React依赖虚拟DOM

3.methods定义方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>methods定义方法</title>
		<script src="vue.min.js"></script>
	</head>
	<body>
		<div class="app">
			<button @click="show">请单击</button>
			<p>{{totalPrice}}</p>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'.app',
			data:{
				message:''
			},
			methods: {
				show() {
					this.message = '成功触发事件'
				}
			}
		})
	</script>
</html>

点击后show()方法执行，message被赋值为‘成功触发事件’

4.computed计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>computed计算属性</title>
		<script src="vue.min.js"></script>
	</head>
	<body>
		<div class="app">
			<button @click="num++">增加数量</button>
			<button @click="num == 0 ? 0:num--">减少数量</button>
			<p>{{totalPrice}}</p>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'.app',
			data:{
				num:0,
				price:25
			},
			computed: {
				totalPrice() {
					return this.num*this.price 
				}
			}
		})
	</script>
</html>

computed中的方法可以直接通过插值语法绑定到p标签中

5.watch状态监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>watch状态监听</title>
		<script src="vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="city">
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				city:'shanghai'
			},
			watch:{
				city(newName,oldName){
					console.log(newName,oldName)
				}
			}
		})
	</script>
</html>

data中的值名称需要与watch中的函数名相同

6.filter过滤器的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>filter过滤器</title>
		<script src="vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{message | touppercase}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				message:"helloworld"
			},
			filters: {
				touppercase(value) {
					return value.toUpperCase()
				}
			}
		})
	</script>
</html>

输出结果为HELLOWORLD

7.在v-bind属性绑定中使用过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
		  {{ message | toupperCase}}
		  <p :id="dataId | chatId">1111</p>
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
	 var app = new Vue({
	   el: '#app',
	   data: {
	     message: 'Hello Vue!',
		 dataId:'hello'
	   },
	   filters:{
		   toupperCase(value){
			   return value.toUpperCase()
		   },
		   chatId(value){
			   return value ? value.indexOf('o') : ''
		   }
	   }
	 })
	</script>
</html>

代码运行后p标签动态绑定的id为4

8.绑定内联样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定内联样式</title>
	</head>
	<body>
		<div id="app">
			<div :style="mDiv"></div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				mDiv:{width:'100px', height:'100px', backgroundColor:'red'}
			}
		})
	</script>
</html>

 

9.绑定样式类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定样式类</title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
			.inner{
				width: 100px;
				height: 100px;
				background-color: red;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :class="box">box</div>
			<div :class="inner">inner1</div>
			<div :class="inner">inner2</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				box:'box',
				inner:'inner'
			}
		})
	</script>
</html>

10.内置指令

指令说明
v-model双向数据绑定
v-on监听事件
v-bind单向数据绑定
v-text插入文本内容
v-html插入包含HTML的内容
v-for列表渲染
v-if条件渲染
v-show显示隐藏

指令简写：v-on可写为@click,v-bind:class可写为:class,v-bind的简写以此类推

11.v-model 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="text" @change="changeData()">
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				text:''
			},
			methods:{
				changeData(){
					console.log(this.text)
				}
			}
		})
	</script>
</html>

 可以看到input输入框和data中的text通过v-model双向绑定后input中的值发生改变data中text也会进行改变

 

12.v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<p>{{text}}</p>
			<button v-on:click='changeData'>请点击</button>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				text:'点击按钮查看内容'
			},
			methods:{
				changeData(){
					this.text = '我是v-on:click指令，可简写为@click'
				}
			}
		})
	</script>
</html>

 

 

从页面显示结果可以看出通过v-on指令给button按钮绑定了单击事件，点击之后成功出发了事件。v-on:click可简写为@click 

13. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-text</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<p v-text="text"></p>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				text:'text'
			}
		})
	</script>
</html>

v-text是在DOM元素中插入文本内容 ,仅仅是文本内容

14.v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<p v-html="text"></p>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				text:'<h2>text</h2>'
			}
		})
	</script>
</html>

 

v-html是在DOM元素中插入HTML标签内容，不仅可以是文本内容，还可以是HTML结构

15.v-bind

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-bind:value="text">
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				text:'hello world!'
			}
		})
	</script>
</html>

 通过v-bind:value数据单向绑定，data中的值改变时页面会自动更新，但是无法通过页面修改data中的值，所以是单向数据绑定

16.v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<div v-for="(item,i) in list" :key="i">
				<p>索引是{{i}}</p>
				<p>元素内容是{{item}}</p>
			</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				list:[1,2,3]
			}
		})
	</script>
</html>

 

v-for可以实现列表渲染，一般用来循环数组。item表示每一项元素内容，i表示当前元素的索引值 

 

能不能把我的愿望还给我
关注
Vue基础笔记111111111
08-11
Vue.js 是一款流行的前端JavaScript框架，用于构建...以上是Vue.js的基础知识点，包括其核心的MVVM模式、数据绑定、事件处理、条件渲染、循环遍历以及优化技术。掌握这些知识能帮助开发者有效地构建和维护Vue.js应用。
vue基础笔记2-自存资料-需要自取
08-10
Toto-list案例源码，需要的自取，打基础的vue练习
Vue.js中 watch 的高级用法
weixin_34113237的博客
05-02 3009
假设有如下代码： &lt;div&gt; &lt;p&gt;FullName: {{fullName}}&lt;/p&gt; &lt;p&gt;FirstName: &lt;input type="text" v-model="firstName"&gt;&lt;/p&gt; &lt;/div&gt; new Vue({ el:
vue 基础笔记
jueming32的专栏
11-21 187
vue基础笔记。
vue基础笔记五
清风明月的博客
05-25 321
什么是闭包？ 有权访问另一个函数作用域内变量的函数都是闭包。 闭包就是一个函数引用另一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量，这是优点也是缺点，不必要的闭包只会徒增内存消耗...
尚硅谷vue基础笔记
wlijun_0808的博客
02-26 1395
vue基础 1，vue简介 （1）vue的概念 一套用于构建用户界面的渐进式的js框架。 vue可以自底向上的逐层的因公 简单应用：只需要一个轻量小巧的核心库 复杂应用：介意引入各种各样的vue插件 （2）vue的作者 尤玉溪 （3）vue的特点： 1，采用组件化模式，提高代码复用率，让代码更好维护 .vue文件包含一个模块里面的.html，.css,.js 方便整个模块被被人引用 2，声明式编码，让编码人员不用直接操作DOM，提高代码效率 注，命令式代码，就是传统的js文件，需要一步一步的进行操作，缺少哪
VUE基础笔记
qwerasdctds的博客
08-03 549
VUE基础
vue基础笔记
HARDWORKING SURELY PAYS OFF
04-03 332
Vue基础 vue的七大对象の个人理解 el:绑定id，class，name data:数据 template:组件里面用的模板 methods:存方法 render: computed:完成计算，并将计算值保存成属性 watch: hello，vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
Vue 基础笔记 -Vuex
大鱼的博客
09-16 359
本文简单介绍了 Vuex 插件，记录了关于 Vuex 的核心知识。并通过一个简单的示例展示如何使用 Vuex。
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue基础学习笔记
ngczx的博客
08-05 672
vue基础学习
Vue基础笔记，适合小白
05-24
适合小白
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1226
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 897
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 940
自定义指令
vue-live2d看板娘集成方案设计使用教程
最新发布
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 738
vue-live2d看板娘集成方案设计使用教程
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1222
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值