Vue笔记（入门）

最新推荐文章于 2025-04-24 17:20:34 发布
最新推荐文章于 2025-04-24 17:20:34 发布
阅读量140 收藏
点赞数
文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qi__lu/article/details/109776326
版权

目录

Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
在这里插入图片描述
所谓渐进式框架，就是把框架分层。
最核心的部分是是图层渲染，然后往外是组建机制，在这个基础上再加入路由机制，再加入状态管理，最外层是构建工具。

Vue基础

v-once

 v-once 只执行一次，后面没有表达式

<div id="app">
	<div>{{ message }}</div>
	<div v-once>{{ message}}</div>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
	message:'hello world'
	}
})
</script>

在console中改变vm.message的值，有v-once的不发生改变。效果如图：
在这里插入图片描述

v-html

 v-html  可以解析HTML标签

<div id="app">
	<div>{{ url }}</div>
	<div v-html="url"></div>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
		url:'<a href="https://www.baidu.com">百度一下</a>',
	}
})
</script>

效果如图：
在这里插入图片描述

v-text

  v-text  不想用{{大括号}}的时候，可以用v-text（一般不用），缺点是不够灵活。

<div id="app">
	<div>{{ message }}</div>
	<div v-text="message"></div>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
	message:'肖申克的救赎'
	}
})
</script>

效果如图：在这里插入图片描述

v-pre

  v-pre  类似于<pre>标签，当只想显示 {{ message }} ，而不想显示其内容的时候用

<div id="app">
	<div>{{ message }}</div>
	<div v-pre>{{message}}</div>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
	message:'肖申克的救赎'
	}
})
</script>

效果如图：在这里插入图片描述

v-cloak

   v-cloak  用得很少。
闪动（抖动），网络慢的时候，开始会显示 {{  msg  }} ，解析以后才显示其内容，
在div上加v-cloak，并设置[v-cloak] { display: none; }可以避免闪动

<div id="app">
	<div v-cloak>{{ message }}</div>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
	message:'肖申克的救赎'
	}
})
</script>

先把网络设置成3G的，再看效果，效果如图：在这里插入图片描述

v-bind

v-bind 动态绑定属性  ，可以简写成“：”，例如：<img v-bind:src="imgUrl" />可以简写成<img  :src="imgUrl" />

<div id="app">
	<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2775457732,1676441877&fm=11&gp=0.jpg"  />
	<img v-bind:src="imgUrl" />
	<img :src="imgUrl"/>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
		imgUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2775457732,1676441877&fm=11&gp=0.jpg',
	}
})
</script>

效果图如下：在这里插入图片描述

class  也可以用v-bind进行动态绑定，
		一个class可以用[className]来表示【注意：因为只有一个class，可以去掉[] 】，
		两个或多个就需要用[ className, className2 ]来表示

<style>
	.red{ color:red }
	.blue{ color:blue }
	.f20{ font-size:20px }
</style>
<div id="app">
	<p :class="[color1]">优快云 专业开发者社区</p>
	<p :class="color1">优快云 专业开发者社区</p>
	<p :class="[color2, fontSize]">优快云 专业开发者社区</p>
	<p :class="[color2, {fontSize:false}]">优快云 专业开发者社区</p>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
		color1: 'red',
		color2: 'blue',
		fontSize: 'f20',
	}
})
</script>

效果图如下：在这里插入图片描述

class  可以用在三目运算符中，例如上边的代码写成这样：
<p :class=" color1=='red' ? fontSize : ''  ">优快云 专业开发者工具</p>
效果如下图：

在这里插入图片描述

style  也可以用v-bind进行动态绑定，
		一个内部样式可以写成{attribute属性: styleName}【注意：如果没有属性，只有一个内部样式，可以把{}去掉】，
		两个或者多个内部样式，就需要写成数组的样子了 { attribute: styleName,  attribute: styleName } 

<style>
	.red{ color:red }
	.blue{ color:blue }
	.f20{ font-size:20px }
</style>
<div id="app">
	<p :style="{color:color2}">优快云 专业开发者社区</p>
	<p :style="red">优快云 专业开发者社区</p>
	<p :style="{color:color2, fontSize:fontSize}">优快云 专业开发者社区</p>
	<p :style="[pstyle,pstyle2]">优快云 专业开发者社区</p>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
		red: 'color:red',
		color2: 'blue',
		fontSize: 'f20',
		pstyle: { width:'200px', border:'5px solid red'},
		pstyle2: { color:'red', fontSize:'20px'},
	}
})
</script>

效果图如下：在这里插入图片描述

v-if

v-if  控制dom的移除和添加
注意：v-if 和 v-else 中间不能加东西，加了以后，v-else就不起作用了
		v-if / v-else-if / v-else
		v-else-if 可以有，可以没有，可以写多个

v-show  控制dom的显示和隐藏
	但是v-show的隐藏是把 display的值设置成none，也就是渲染的时候是加载的，只是隐藏了，
	v-if的移除是移除这个元素，就是渲染的时候不加载，需要显示的时候，重新添加。
	所以，频繁使用显示和隐藏的时候，用v-show
注意：v-show 在template上不起作用，所以最好不要在template上写v-show

v-on

v-on:xxx  事件，简写“@” 

<style>
	.box{ width:100px; height:100px; }
	.bred{ background:red; }
	.bblue{ background:blue; }
</style>
<div id="app">
	<h4 :class="colors[index]">优快云 专业开发者社区</h4>
	<div v-show="show" class="orange">是否展示这句话 优快云 专业开发者社区</div>
	<template v-if="show">
		<div class="box bred"></div>
		<div class="box bblue"></div>
	</template>
	<button v-on:click="changecolor()">点击换颜色</button>
	<button @click="togglehide">{{txt}}</button>
</div>
<script>
const vm = new Vue({
	el: '#app',
	data:{
		colors: ['red' , 'yellow', 'orange', 'green', 'blue','purple'],
		index: 0,
		count: 0,
		txt: '隐藏',
		show: true,
	},
	// 在 methods 中使用 data 里面的数据的时候，要加 this 指向该Vue实例对象
	methods:{
		changecolor(){
			this.index = ++this.count % (this.colors.length);
		},
		togglehide(){
			if(this.show == true){ 
				this.show = false; 
				this.txt = "显示"; 
			} else {
				this.show = true; 
				this.txt = "隐藏";
			}
		},
	},
})
</script>

最开始的样子：在这里插入图片描述
每个按钮 点击一次 的样子：在这里插入图片描述
剩下的自己试一试吧

v-on 事件修饰符：
	.stop  阻止事件冒泡
	.self  只有当事件在该元素本身触发时才触发事件
	.capture 添加事件侦听器是，使用事件捕获模式
	.prevent  阻止默认行为，例如a标签的跳转默认行为
	.once 事件只触发一次
	.native  监听组件根元素的原生事件
	按键修饰符	
	按键别名：
		.enter
		.tab
		.delete (捕获 "删除" 和 "退格" 键)
		.esc
		.space
		.up
		.down
		.left
		.right
		.ctrl
		.alt
		.shift
		.meta
事件修饰符
.stop
<div id="app">
    <div class="outer" @click="outerClick">
      <div class="inner" @click="innerClick">
        <button @click.stop="btnClick">阻止事件冒泡</button>
      </div>
    </div>
</div>
<script>
const vm = new Vue({
    el: '#app',
    methods: {
        outerClick () {
          console.log("触发了outer点击事件")
        },
        innerClick () {
          console.log("触发了inner点击事件")
        },
        btnClick () {
          console.log("触发了按钮点击事件")
        },
    }
})
</script>

当点击按钮的时候，只触发按钮点击事件，阻止了事件冒泡(不触发 inner事件 和 outer事件)在这里插入图片描述

.self
<style>
	.outer{ width:500px; border:1px solid red; }
	.inner{ width:300px; border:1px solid blue; }
</style>
<div id="app">
    <div class="outer" @click="outerClick">
      <div class="inner" @click.self="innerClick">
        <button @click="btnClick">self效果</button>
      </div>
    </div>
</div>
<script>
const vm = new Vue({
    el: '#app',
    methods: {
        outerClick () {
          console.log("触发了outer点击事件")
        },
        innerClick () {
          console.log("触发了inner点击事件")
        },
        btnClick () {
          console.log("触发了按钮点击事件")
        },
    }
})
</script>

第一次点击按钮，第二次点击蓝色的框，不在按钮的位置点击，第三次点击红色的框，不在按钮的位置点击，也不再蓝框的位置点击，后台的结果如下图：在这里插入图片描述

.capture
<style>
	.outer{ width:500px; border:1px solid red; }
	.inner{ width:300px; border:1px solid blue; }
</style>
<div id="app">
    <div class="outer" @click="outerClick">
      <div class="inner" @click.capture="innerClick">
        <button @click="btnClick">self效果</button>
      </div>
    </div>
</div>
<script>
const vm = new Vue({
    el: '#app',
    methods: {
        outerClick () {
          console.log("触发了outer点击事件")
        },
        innerClick () {
          console.log("触发了inner点击事件")
        },
        btnClick () {
          console.log("触发了按钮点击事件")
        },
    }
})
</script>

当点击按钮的时候，会从外到里依次触发outer点击事件、inner点击事件、按钮点击事件
当点击inner div时，会从外到里依次触发outer点击事件、inner点击事件
当点击outer div时，只触发outer点击事件在这里插入图片描述

.prevent
<div id="app">
    <a href="http://www.baidu.com" @click.prevent="preventClick">百度一下 你就知道</a>
</div>
<script>
const vm = new Vue({
    el: '#app',
    methods: {
        preventClick () {
          console.log("阻止了a标签的默认点击跳转事件")
        },
    }
})
</script>

点击只会触发preventClick事件，不会跳转页面，阻止了a标签的默认跳转在这里插入图片描述

.once
<div id="app">
	<input type="button" value="只触发一次" @click.once="onceClick">
</div>
<script>
const vm = new Vue({
    el: '#app',
    methods: {
        onceClick () {
        	console.log("事件只触发一次,点击再多次按钮，也只输出一次")
        },
    }
})
</script>

once 顾名思义，就是只有一次，也就是点击再多次也不执行

按键修饰符
<div id="app">
	// Enter键触发submit事件  下面两种写法都对
    <input type="text" @keyup.enter="submit" />
    <input type="text" @keyup.13="submit" />
</div>
<script>
const vm = new Vue({
    el: '#app',
    methods: {
        submit() {
           console.log("enter键触发事件");
        }
    }
})
</script>
修饰符可以串联
<div id="app">
	<div class="outer" @click="outerClick">
        <div class="inner" @click="innerClick">
			<!-- 既阻止了默认事件，又阻止了事件冒泡 -->
    		<a href="http://www.baidu.com" @click.stop.prevent="btnClick">修饰符串联</a>
    	</div>
    </div>
</div>
<script>
const vm = new Vue({
    el: '#app',
    methods: {
        outerClick() {
           console.log("触发了outer点击事件")
        },
        innerClick() {
            console.log("触发了inner点击事件")
        },
        btnClick() {
            console.log("触发了按钮点击事件")
        },
    }
})
</script>

【注意】使用修饰符时，顺序很重要。相应的代码会以同样的顺序产生。

v-on:click.prevent.self //会阻止所有的点击的默认事件
v-on:click.self.prevent //只会阻止元素自身点击的默认事件

v-model

v-model  双向数据绑定（只用于表单元素）
	常见的表单元素包括：input（radio,text,address,email...）、select、checkbox、textarea
	v-bind:只能实现数据的单向绑定，从M绑定到V
	v-model:可以实现双向绑定

<div id="app">
	<input type="text" v-model="value"/><span>{{value}}</span>
	<p><input type="checkbox" v-model="checked"/>{{checked}}</p>
	<div>爱好 多选：
		<label for="sing"><input type="checkbox" id="sing" value="sing" v-model="checkedList" />sing</label>
		<label for="dance"><input type="checkbox" id="dance" value="dance" v-model="checkedList" />dance</label>
		<label for="read"><input type="checkbox" id="read" value="read" v-model="checkedList" />read</label>
		<p>{{checkedList}}</p>
	</div>
	<div>爱好 单选：
		<label for="sing1"><input type="radio" id="sing1" value="sing" v-model="picked" />sing</label>
		<label for="dance1"><input type="radio" id="dance1" value="dance" v-model="picked" />dance</label>
		<label for="read1"><input type="radio" id="read1" value="read" v-model="picked" />read</label>
		<p>{{picked}}</p>
	</div>
	<select name="" id="" v-model="selected" multiple>
		<option value="" disabled>请选择</option>
		<option value="sing2">sing2</option>
		<option value="dance2">dance2</option>
		<option value="read2">read2</option>
	</select>
	<p>select选择的是：{{selected}}</p>
</div>
<script>
const vm = new Vue({
    el: '#app',
    data:{
    	value:'杉杉',
    	checked:true,
    	checkedList:[],
		picked:'',
		selected:[],
    },
})
</script>

效果如下图：在这里插入图片描述
做个简易计算器

<div id="app">
	<input type="text" v-model="input1"/>
	<select id="opt" name="opt" v-model="opt">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
	</select>
	<input type="text" v-model="input2"/>
	<button @click="jisuan"> = </button>
	<span>{{result2}}</span>
</div>
<script>
const vm = new Vue({
    el: '#app',
    data:{
		input1: 0,
		input2: 0,
		opt: '+',
		result2: 0
	},
    methods: {
        jisuan(){
			this.result2 = eval( 'parseFloat(this.input1)' + this.opt + 'parseFloat(this.input2)' )
		},
    }
})
</script>

渲染出来以后，将第一个input框输入5，计算符号选择 * ，第二个input 框输入6 ，点击“=”，结果会自动显示出来在这里插入图片描述

v-for

v-for   循环,循环数组，循环对象，循环数字，循环字符串
		v-for 要给key值，必须是数字类型或者string，必须是唯一的。
		不用key值的话，未来脚手架搭建项目时会报警告。key可以提升页面的性能。
		不建议用index下标作为key的值，因为下标会因为重新排序而从新排序，内部会做更改dom的操作，浪费性能
		
		1、不能通过索引的方式去更改数组，这样不会渲染
		2、不能通过更改长度的方式去更改数组，这样不会渲染
		3、数组变异方法（更改数组）只要执行这七个方法，就会进行渲染：
			pop、shift、unshift、splice、sort、reverse、push

<div id="app">
	<div v-for="(n,index) in m" :key="n">{{index}}--{{n}}</div>
	<div v-for="(value, key) in obj" >{{key}} : {{value}}</div>
	<div v-for="(num,indexs) in 10">{{indexs}} -- {{num}}</div>
	<div v-for="item in '优快云' ">{{item}}</div>
	<button @click="handleclick">第一组数组重新排序 reverse 回改变原数组</button>
</div>
<script>
const vm = new Vue({
	el:'#app',
	data:{
		m:['html','css','js','ajax'],
		obj:{'name':'shanshan','age':18,'heihgt':170},
	},
	methods:{
		handleclick(){
			this.m.reverse();
		},
	},
})
</script>

渲染出来以后的效果如下：在这里插入图片描述
点击按钮一次 的效果如下：在这里插入图片描述

齐露
关注
vue学习笔记（超详细）
jiey0407的博客
03-09 6038
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
Vue 史上最全学习笔记（2020年1月9日）
Sicily_winner的博客
01-11 3087
目录 ✎VUE学习 ◆VUE学习心路历程 ◆VUE学习视频来源 ➀VUE学习视频百度网盘资源 ➁VUE本笔记学习视频资源 ◆VUE语法 ❶ Vue基础语法——模板语法（Three rule of template） ❷ Vue基础语法——创建VUE实例（Create Vue） ❸Vue生命周期（Vue life） ❹Vue组件（Components type） ...
Vue2学习小笔记（一篇带你入门）
jc15274630894的博客
03-17 767
一篇带你入门vue2
【万字长文】 Vue全家桶从入门到实战，超详细笔记整理 ( 三 ) （建议收藏）
热门推荐
林深不见鹿 的博客
08-02 1万+
目录16、Vue CLI 脚手架16.1、什么是CLI16.2 什么是Vue CLI <====> (maven 项目构建工具)16.3 Vue CLI优势16.4 Vue CLI安装1、环境准备2、安装脚手架3、第一个vue脚手架项目4、如何开发Vue脚手架17、在脚手架中使用axios17.1、安装axios18、Vue Cli脚手架项目部署19、webstorm开发vue cli项目19.1、简介19.2、安装19.3、使用webstorm19.4、开发vue cli项目(一)19.5
Vue2笔记（全）
Jadon_z的个人博客
09-03 3107
Vue2 最全知识汇总
一、Vue2笔记--基础篇--15-Vue内置指令v-text、v-html、v-cloak、v-once、v-pre
weixin_49931650的博客
07-18 941
v-text、v-html、v-cloak、v-once、v-pre等Vue内置指令
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
【狂神说】Vue笔记（全部完整）.zip
01-22
在"【狂神说】Vue笔记"中，我们可以期待学习以下关键知识点： 1. **数据绑定**：Vue的数据绑定使用`v-bind`指令将数据模型与DOM元素属性关联。双向数据绑定通过`v-model`实现，使得视图和模型之间的数据实时同步。 ...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
狂神说Vue笔记完整版
08-10
【狂神说Vue笔记完整版】是一份详细记录Vue.js前端框架学习的资料，涵盖了从前端基础知识到Vue的深入理解，旨在帮助读者从零开始掌握前端开发，特别是Vue.js技术。以下是笔记中的关键知识点： 一、前端核心分析 ...
Vue2+Vue3笔记（黑马程序员+尚硅谷）
05-26
学习Vue2+Vue3笔记可以帮助开发者全面掌握Vue.js的两种主要版本，理解它们的异同，以及如何在实际项目中选择合适的版本。黑马程序员和尚硅谷是知名的在线教育平台，它们提供的笔记内容通常覆盖了基础概念、实战案例...
vue学习笔记--学习参考+一些基本注意点
qq_36580561的博客
12-04 147
参考链接：.vue文件的生成与使用 1.template中写html。 2..vue文件中不用Vue创建实例，用export default。 3.在route.js中设置跳转路径时，如果调到某一文件夹下的 index.vue文件，则可以省略文件夹后的 index.vue。 参考教程：菜鸟教程 1.Vue 构造器中的el 参数对应于DOM 元素中的 id。 ...
Vue笔记（完结版）
sokoooo的博客
02-10 3881
目录 一、Vue简介 二、Vue基本知识 （一）简单知识 （二）本地应用（指令） 三、axios与Vue 四、案例 （一）本地应用-计算机案例 （二）本地应用-图片切换案例 （三）本地应用-记事本案例 （四）网络应用-天气查询案例 #END（具体可观看b站黑马vue入门版） 一、Vue简介 1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动 4.Vue实例的作用范围是什么？ Vue会管理el选项命中的元素及其内部的子元素 5.是否可以使用其他的选择器？.
Vue学习笔记（全）-尚硅谷（借鉴他人）
m1215339620的博客
10-16 1175
Vue知识点
vue3基本使用笔记（汇集精华版）
weixin_66721210的博客
03-16 602
vue3基本使用笔记（汇集精华版）
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
sen_shan的专栏
04-24 2070
在实际项目开发中，表单（Form）的数据编辑功能是常见需求。为了提高开发效率，本章节将重点介绍如何对表单组件进行封装，从而实现快速开发。
vue浅试（1）
qq_51752841的博客
04-22 521
重新开始学习前端
vxe-table封装表头
最新发布
i_am_a_div的博客
04-24 393
vxe-table封装表头
el-table怎么显示 特殊单元格的值
ping
04-23 149
3. 在 <template> 的作用域插槽中，通过 scope.formattedValue 来获取 formatter 处理后的值（这是 el-table 中 formatter 处理后会自动添加到 scope 上的属性 ），然后直接在 <span> 中展示。1. 在 el-table-column 上绑定了 formatter 方法 formatEntityName ，它会对每一行该列的数据（ cellValue ）进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值