Vue2 - 基础知识点（待补充VUE3）

已于 2024-05-31 14:30:46 修改
阅读量246 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js 前端
于 2022-08-27 09:57:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuanghuajun/article/details/125269343
版权

vue-basic

video - 【尚硅谷】2021最新Vue技术全家桶丨vue3.x最新版详细讲解

示例对应 code web

初识vue
<!DOCTYPE html>
<body>
	<!-- 初识Vue：
           1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
           2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
           3.root容器里的代码被称为【Vue模板】；
           4.Vue实例和容器是一一对应的；
           5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
           6.{
   {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
           7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
           
           注意区分：js表达式 和 js代码(语句)
               1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                   (1). a
                   (2). a+b
                   (3). demo(1)
                   (4). x === y ? 'a' : 'b'
               2.js代码(语句)
                   (1). if(){}
                   (2). for(){}
	-->
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h1>Hello，{
  {name.toUpperCase()}}，{
  {address}}</h1>
	</div>
	<script type="text/javascript" >
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		//创建Vue实例
		new Vue({
     
			el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
			data:{
      //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
				name:'atguigu',
				address:'北京'
			}
		})
	</script>
</body>
Vue-模板语法
<!DOCTYPE html>
<body>
	<!-- Vue模板语法有2大类：
		1.插值语法：
		    功能：用于解析标签体内容。
		    写法：{
   {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
		2.指令语法：
		    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
		    举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
		    		 且可以直接读取到data中的所有属性。
		    备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
	-->  
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>插值语法</h1>
		<h3>你好，{
  {name}}</h3>
		<hr/>
		<h1>指令语法</h1>
		<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{
  {school.name}}学习1</a>
		<a :href="school.url" x="hello">点我去{
  {school.name}}学习2</a>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	new Vue({
     
		el:'#root',
		data:{
     
			name:'jack',
			school:{
     
				name:'尚硅谷',
				url:'http://www.atguigu.com',
			}
		}
	})
</script>
vue-数据绑定
<!DOCTYPE html>
<body>
	<!-- Vue中有2种数据绑定的方式：
           1.单向绑定(v-bind)：数据只能从data流向页面。
           2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
               备注：
                   1.双向绑定一般都应用在表单类元素上（如：input、select等）
                   2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
	 -->
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 普通写法 -->
		<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
		双向数据绑定：<input type="text" v-model:value="name"><br/> -->

		<!-- 简写 -->
		单向数据绑定：<input type="text" :value="name"><br/>
		双向数据绑定：<input type="text" v-model="name"><br/>

		<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
		<!-- <h2 v-model:x="name">你好啊</h2> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
     
		el:'#root',
		data:{
     
			name:'尚硅谷'
		}
	})
</script>
vue-el与data的两种写法
<!DOCTYPE html>
<body>
	<!-- data与el的2种写法
           1.el有2种写法
               (1).new Vue时候配置el属性。
               (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
           2.data有2种写法
               (1).对象式
               (2).函数式
               如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
           3.一个重要的原则：
               由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>你好，{
  {name}}</h1>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	//el的两种写法
	/* const v = new Vue({
		//el:'#root', //第一种写法
		data:{
			name:'尚硅谷'
		}
	})
	console.log(v)
	v.$mount('#root') //第二种写法 */

	//data的两种写法
	new Vue({
     
		el:'#root',
		//data的第一种写法：对象式
		/* data:{
			name:'尚硅谷'
		} */

		//data的第二种写法：函数式
		data(){
     
			console.log('@@@',this) //此处的this是Vue实例对象
			return{
     
				name:'尚硅谷'
			}
		}
	})
</script>
vue-MVVM
<!DOCTYPE html>
<body>
	<!--  MVVM模型
           1. M：模型(Model) ：data中的数据
           2. V：视图(View) ：模板代码
           3. VM：视图模型(ViewModel)：Vue实例
       观察发现：
           1.data中所有的属性，最后都出现在了vm身上。
           2.vm身上所有的属性，及Vue原型上所有属性，在Vue模板中都可以直接使用。
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>学校名称：{
  {name}}</h1>
		<h1>学校地址：{
  {address}}</h1>
		<!-- <h1>测试一下1：{
   {1+1}}</h1>
		<h1>测试一下2：{
   {$options}}</h1>
		<h1>测试一下3：{
   {$emit}}</h1>
		<h1>测试一下4：{
   {_c}}</h1> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
     
		el:'#root',
		data:{
     
			name:'尚硅谷',
			address:'北京',
		}
	})
	console.log(vm)
</script>
数据代理
回顾Object.defineProperty方法
<body>
	<script type="text/javascript" >
		let number = 18
		let person = {
     
			name:'张三',
			sex:'男',
		}

		Object.defineProperty(person,'age',{
     
			// value:18,
			// enumerable:true, //控制属性是否可以枚举，默认值是false
			// writable:true, //控制属性是否可以被修改，默认值是false
			// configurable:true //控制属性是否可以被删除，默认值是false

			// number 和 person.age 关联上
			//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get(){
     
				console.log('有人读取age属性了')
				return number
			},

			//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set(value){
     
				console.log('有人修改了age属性，且值是',value)
				number = value
			}

		})
		// console.log(Object.keys(person))
	</script>
何为数据代理
<!DOCTYPE html>
<script type="text/javascript" >
	let obj = {
     x:100}
	let obj2 = {
     y:200}

	Object.defineProperty(obj2,'x',{
     
		get(){
     
			return obj.x
		},
		set(value){
     
			obj.x = value
		}
	})
</script>
Vue中的数据代理
<body>
	<!-- 
		1.Vue中的数据代理：
			通过vm对象来代理data对象中属性的操作（读/写）
		2.Vue中数据代理的好处：
			更加方便的操作data中的数据
		3.基本原理：
			通过Object.defineProperty()把data对象中所有属性添加到vm上。
			为每一个添加到vm上的属性，都指定一个getter/setter。
			在getter/setter内部去操作（读/写）data中对应的属性。
	 -->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>学校名称：{
  {name}}</h2>
		<h2>学校地址：{
  {address}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	const vm = new Vue({
     
		el:'#root',
		data:{
     
			name:'尚硅谷',
			address:'宏福科技园'
		}
	})
</script>

请添加图片描述
请添加图片描述

事件处理
事件的基本使用
<body>
	<!-- 
       事件的基本使用：
           1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
           2.事件的回调需要配置在methods对象中，最终会在vm上；
           3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
           4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
           5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{
  {name}}学习</h2>
		<!-- <button v-on:click="showInfo">点我提示信息</button> -->
		<button @click="showInfo1">点我提示信息1（不传参）</button>
		<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
	</div>
</body>
事件修饰符
<body>
	<!-- 
       Vue中的事件修饰符：
           1.prevent：阻止默认事件（常用）；
           2.stop：阻止事件冒泡（常用）；
           3.once：事件只触发一次（常用）；
           4.capture：使用事件的捕获模式；
           5.self：只有event.target是当前操作的元素时才触发事件；
           6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{
  {name}}学习</h2>
		<!-- 阻止默认事件（常用） -->
		<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

		<!-- 阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>

		<!-- 事件只触发一次（常用） -->
		<button @click.once="showInfo">点我提示信息</button>

		<!-- 使用事件的捕获模式 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>

		<!-- 只有event.target是当前操作的元素时才触发事件； -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>

		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<ul @wheel.passive="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>

	</div>
</body>
键盘事件
<body>
	<!-- 
		1.Vue中常用的按键别名：
			回车 => enter
			删除 => delete (捕获“删除”和“退格”键)
			退出 => esc
			空格 => space
			换行 => tab (特殊，必须配合keydown去使用)
			上 => up
			下 => down
			左 => left
			右 => right

		2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

		3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
			(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
			(2).配合keydown使用：正常触发事件。

		4.也可以使用keyCode去指定具体的按键（不推荐）

		5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{
  {name}}学习</h2>
		<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	Vue.config.keyCodes.huiche
最低0.47元/天 解锁文章
some-one
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3基础知识点
liao_11的博客
09-06 3036
拉开序幕的setup 理解：Vue3.0中的一个新的配置项，值为一个函数 setup是所有Composition API（组合API） 的’表演舞台‘ 组件中所用到的：数据、方法等等，均要配置在setup中 setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法，在模板中均可直接使用（重点） 若返回一个渲染函数：则可以自定义渲染内容（了解） 注意点： 1、尽量不要与Vue2.配置混用 vue2.x配置（data、methos、compute…）中可以访问到setup中的属性，
vue3基础知识点快速掌握
06-07
其核心知识点包括：响应式系统、组件化开发、生命周期钩子、指令系统、模板语法、计算属性和侦听器、Vue Router（路由管理）、Vuex（状态管理）等。Vue 3 相较于 Vue 2 带来了性能提升、更小的包体积、更好的 ...
Vue2-基础知识
qq_54379580的博客
09-28 1万+
一些vue的基础知识啦, 基本用法, 指令相关,侦听器,过滤器,计算属性, 组件相关, 路由相关的基础知识点啦~~~
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue2、Vue3知识总结---完整版✨
weixin_43323097的博客
08-21 5606
Vue2Vue3知识总结---完整版✨
vue2知识点：vue-cli脚手架配置代理服务器
刘大猫
06-01 2022
vue2知识点：vue-cli脚手架配置代理服务器
Vue3.0----基础入门(第一章)
程序研博客
10-24 2772
vue 是一套用于构建用户界面的前端框架。
vue3---组件基础(上)保姆级篇
qq_61950936的博客
08-15 9226
关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用。这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。ibootstrap - Bootstrap可视化布局系统所展示的效果，就契合了组件化开发的思想。.........
前端vue视频vue-video-player插件总结知识点案例(带源码)
m0_49714202的博客
06-16 9105
前端vue视频vue-video-player插件总结知识点案例(带源码)
Vue基础知识总结 2：vue 动态绑定
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
vue3.md暂存vue3基础知识点
07-05
vue3.md暂存vue3基础知识点
详解vue-router 2.0 常用基础知识点之导航钩子
01-21
vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。 全局钩子 const router = new VueRouter({ ... }) router....
Vue3基础知识点附带实例
01-30
vue3
vue-router知识点讲解源码
03-21
vue-router知识点讲解源码，如需下载学习，配合博文查看：https://blog.csdn.net/xiaoge_586/article/details/113091267
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 354
在vue.config.js中配置关闭Uncaught runtime errors显示。
Spring Boot、MongoDB、Vue 2和Nginx实现一个小说网站
iku_n的博客
06-08 1301
后端API：使用Spring Boot实现，负责处理数据和业务逻辑。数据库：使用MongoDB存储小说数据。前端页面：使用Vue 2实现，负责展示数据和用户交互。反向代理：使用Nginx进行前后端分离。
vue3如何定义一个组件
Java程序员专栏
06-09 548
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 184
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
vue-router所有知识点详细
06-09
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。下面是 Vue Router 的所有知识点详细介绍： 1. 路由概念 路由是指根据不同的 URL 地址展示不同的页面或视图，常见的有前端路由和后端路由。前端路由是指通过 JavaScript 解析 URL，根据 URL 的不同参数展示相应的视图，不需要刷新页面；后端路由是指通过服务器解析 URL，根据 URL 的不同参数返回相应的 HTML 页面。 2. Vue Router 安装和使用 安装 Vue Router 可以通过 npm 或 yarn，使用时需要在 main.js 中引入并挂载到 Vue 实例上。使用 Vue Router 可以通过 router-link 和 router-view 两个组件实现。 3. 路由配置 路由配置指的是在 Vue Router 中定义路由的规则，包括路由路径、组件、名称、参数等。路由配置可以通过对象字面量或函数返回对象的形式定义，也可以通过单独文件的形式定义。 4. 动态路由 动态路由是指根据不同的参数动态生成路由，常见的参数包括 ID、用户名等。在 Vue Router 中，可以通过冒号（:）定义动态路由参数。 5. 嵌套路由 嵌套路由是指在一个路由中再定义子路由，实现多级路由嵌套的效果。在 Vue Router 中，可以通过 children 属性定义子路由。 6. 命名路由 命名路由是指给路由定义名称，方便在代码中调用和跳转。在 Vue Router 中，可以通过 name 属性定义命名路由。 7. 路由参数 路由参数是指通过 URL 传递参数，常见的有查询参数和动态路由参数，可以通过 $route 对象获取当前路由的参数。 8. 路由导航 路由导航指的是在页面中跳转路由，包括通过 router-link 跳转和通过编程式导航跳转。在 Vue Router 中，可以通过 $router 对象和 $route 对象实现路由导航。 9. 导航守卫 导航守卫是指在路由导航过程中执行的钩子函数，包括全局守卫、路由独享守卫和组件内守卫。导航守卫可以实现路由跳转前的验证、权限控制等功能。 10. 路由元信息 路由元信息是指在路由中定义的额外信息，可以通过 meta 属性定义。路由元信息可以实现页面标题、权限控制等功能。 11. 懒加载 懒加载是指在需要时才加载组件，可以提高应用性能。在 Vue Router 中，可以通过异步组件和 import() 函数实现懒加载。 以上就是 Vue Router 的所有知识点详细介绍。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值