Vue学习笔记 第 1 章：Vue 核心（上）

最新推荐文章于 2023-12-26 19:35:29 发布
最新推荐文章于 2023-12-26 19:35:29 发布
阅读量337 收藏 1
点赞数
分类专栏： 学习之路 文章标签： vue.js javascript 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41720396/article/details/120766948
版权

学习资料来自尚硅谷VUE教学视频

csdn：课程代码、vue3笔记、课件

gitee：课件、代码、资料

其他：vscode插件推荐、第三方库网站、npmjs库

工具库推荐：
moment.js 时间处理工具，很强很大。还有个轻量的叫dayjs
生成全球唯一id工具：uuid，但是很大，有个精简版：nanoid

章节导航：

第 1 章：Vue 核心（上）

第 1 章：Vue 核心（下）

第 2 章：Vue 组件化编程

第 3 章：使用 Vue 脚手架

第 4 章：Vue 中的 ajax

第 5 章：vuex

第 6 章：vue-router（Vue路由）

第 7 章：Vue UI 组件库

第 1 章：Vue 核心

1.1. Vue 简介

1.1.1. 官网

  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

  1. 动态构建用户界面的渐进式 JavaScript 框架
  2. 作者: 尤雨溪

1.1.3. Vue 的特点

  1. 遵循 MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.4. 与其它 JS 框架的关联

  1. 借鉴 Angular 的模板和数据绑定技术
  2. 借鉴 React 的组件化和虚拟 DOM 技术

1.1.5. Vue 周边库

  1. vue-cli: vue 脚手架
  2. vue-resource
  3. axios
  4. vue-router: 路由
  5. vuex: 状态管理
  6. element-ui: 基于 vue 的 UI 组件库(PC 端)
    ……

1.2. 初识 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(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<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>
</html>

1.3. 模板语法

1.3.2. 模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

  1. 插值语法（双大括号表达式）
  2. 指令（以 v-开头）

1.3.3 插值语法

  1. 功能: 用于解析标签体内容
  2. 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

1.3.4 指令语法

  1. 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
  2. 举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
  3. 备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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>
</html>

1.4. 数据绑定

1.4.2. 单向数据绑定

  1. 语法：v-bind:href ="xxx" 或简写为:href="xxx"
  2. 特点：数据只能从data流向页面。

1.4.3. 双向数据绑定

  1. 语法：v-model:value="xxx"可以简写为v-model ="xxx"，因为v-model默认收集的就是value值。
  2. 特点：数据不仅能从data流向页面，还可以从页面流向data。
  3. 备注：双向绑定一般都应用在表单类元素上（如：input、select等）
  4. v-model常用的三个修饰符：
    lazy：失去焦点再收集数据
    number：输入字符串转为有效的数字
    trim：输入首尾空格过滤
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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>
</html>

额外知识：el与data的两种写法

		data与el的2种写法
				1.el有2种写法
								(1).new Vue时候配置el属性。
								(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
								mount是Vue原型对象上的方法，在_proto_或[[Prototype]]中。
				2.data有2种写法
								(1).对象式
								(2).函数式
								如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
				3.一个重要的原则：
								由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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>
</html>

1.5. MVVM 模型

  1. M：模型(Model) ：对应 data 中的数据
  2. V：视图(View) ：模板
  3. VM：视图模型(ViewModel) ： Vue 实例对象

data中所有的属性，最后都出现在了vm身上。在这里插入图片描述

vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
5. 在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>理解MVVM</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <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>

</html>

额外知识：数据代理（数据绑定的原理）

1.回顾Object.defineproperty方法

Object.defineproperty方法可以给对象的属性设置get、set函数，从而通过对象外部变量控制对象内部属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顾Object.defineproperty方法</title>
	</head>
	<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

				//当有人读取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))

			console.log(person)
		</script>
	</body>
</html>

2.何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<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>
	</body>
</html>

3.Vue中的数据代理

  1. Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
  2. Vue中数据代理的好处：更加方便的操作data中的数据
  3. 基本原理：
    通过Object.defineProperty()把data对象中所有属性添加到vm(vue实例)上。
    为每一个添加到vm上的属性，都指定一个getter/setter。
    在getter/setter内部去操作（读/写）data中对应的属性。

1.6. 事件处理

1.6.1.事件的基本使用

事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2. 事件的回调需要配置在methods对象中，最终会在vm(vue实例)上；
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5. @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；
6. $event 是一个占位符，方法中可以接收到event（事件对象），的event.target则为事件对象的目标元素，可以执行event.target.innerText等操作，事件绑定的方法不传参进行调用则默认第一个参数为event，传参则需要用占位符表示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<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>

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

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
        },
        methods: {
            showInfo1(event) {
                console.log(event);
                console.log(event.target);
                console.log(event.target.innerText);
                console.log(this) //此处的this是vm
                alert('同学你好！')
            },
            showInfo2(event, number) {
                event.target.innerText = 'dsfsfsdfs';
                console.log(event, number)
                console.log(event.target.innerText)
                console.log(this) //此处的this是vm
                alert('同学你好！！')
            }
        }
    })
</script>
</html>

1.6.2.事件修饰符

  1. prevent：阻止默认事件（常用）；
    例如a标签跳转
  2. stop：阻止事件冒泡（常用）；
    一个大盒子包着一个小盒子，点击小盒子会先执行小盒子方法，再执行大盒子方法。给小盒子加stop可只生效小盒子方法
  3. once：事件只触发一次（常用）；
    例如按钮点第一次的时候弹窗，第2次3次不再弹窗
  4. capture：使用事件的捕获模式；
    一个大盒子包着一个小盒子，点击小盒子时，点击操作是 大盒子→小盒子 传递（这个过程叫捕获），然后执行事件，从 小盒子→大盒子的顺序执行（这个过程叫冒泡），capture加在大盒子上，可以改变大盒子的事件执行时机，也就是此时事件执行的顺序为 大盒子→小盒子
  5. self：只有event.target是当前操作的元素时才触发事件；
    补充知识：冒泡虽然会执行2遍事件，但并不是冒泡到大盒子事件对象就是大盒子，而是2次事件对象都是小盒子。
    加了self的元素身上的事件触发必须是这个元素本身才会触发。
    例：如果加在大盒子上，就不会执行小盒子冒泡上来的事件。
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
    例：鼠标滚轮事件，触发的方法里如果写了需要执行很久的代码，会等执行完再滚动页面。加了passive会立即滚动页面，和执行代码是同时进行的。在移动端会用的相对较多
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<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>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

1.6.3.键盘事件

键盘事件有2个，keydown（按下触发，按住可以一直触发），keyup（弹起触发）

1.Vue中常用的按键别名：
						回车 => enter
						删除 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						换行 => tab (特殊，必须配合keydown去使用，因为tab在按下未弹起时就已经把焦点切走了，keyup的时候焦点已经不在当前元素)
						上 => up
						下 => down
						左 => left
						右 => right

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

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

			4.也可以使用keyCode去指定具体的按键（不推荐，该特性已从web标准中删除，因为每个键盘可能code不统一）

			5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（也不推荐，原因同上）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<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 = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

1.6.补充

需要执行多事件：修饰可以连着写，比如@click.prevent.stop 则为先阻止默认事件，再阻止冒泡
键盘按键多个同时按：@keyup.ctrl.y

mildness丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue学习笔记（超详细）
jiey0407的博客
03-09 5440
文章目录 一. 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学习笔记（vue核心知识）
maohe的博客
01-22 2198
记录Vue学习过程笔记和知识点（更新中）。
Vue学习笔记（一）：跑马灯的实现
weixin_61908666的博客
11-12 3487
Vue学习笔记（一）：跑马灯的实现
Vue学习笔记（二）：简易计算器的实现
weixin_61908666的博客
11-13 1433
Vue学习笔记（二）：简易计算器的实现
Vue学习笔记(四)：Vue日期时间格式化
热门推荐
baidu_38300480的博客
12-27 5万+
1.自定义过滤器对日期进行格式化 （1）日期时间格式，大致可以分为以下四种情况： ① 年月日：yyyy-M-d ② 年月日（小于两位数时补0）：yyyy-MM-dd ③ 年月日时分秒：yyyy-M-d H:m:s ④ 年月日时分秒（小于两位时补0）：yyyy-MM-ddHH:mm:ss （2）针对上述的四种情况，对日期进行格式化处理： <template> <div> <p>{{time}}</p> &.
vue 学习笔记
weixin_43971312的博客
05-22 2195
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
Vue.js尚硅谷视频学习笔记(第一章：Vue 核心)
canxuezhang的博客
02-24 2304
个人学习笔记
Vue学习笔记(二)：Springboot+Vue项目整合
baidu_38300480的博客
12-29 2505
前面介绍了如何从零创建Vue项目，今天来谈谈如何整合SpringBoot和Vue，实现前后端的数据交互。 1.基于Springboot+Mybatis+MySQL开发后台接口 （1）建表并初始化数据 -- 创建数据表 create table if not exists user ( id int not null auto_increment comment 'ID', username varchar(255) not null comment '姓名', age i...
最新版本Vue3的学习笔记-第四章
最新发布
apple_51927114的博客
12-26 1109
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被。作用：让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：控制路由跳转时操作浏览器历史记录的模式。作用：可以简化路由跳转及传参（后面就讲）。作用：将特定的路径，重新定向到已有路由。浏览器的历史记录有两种写入方式：分别为。参数时，需要提前在规则中占位。文件夹，一般组件通常存放在。掉的，需要的时候再去。的对象写法，必须使用。
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记之vue1.0和vue2.0的区别介绍
12-29
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板，不在支持片段代码 VUE1.0是:　 我是组件</h3><strong>我是加粗标签 VUE2.0:必须有根元素,包裹住所有的代码 我是组件 我是加粗标签 ...
vue学习笔记vue学习笔记vue学习笔记
12-02
vue学习笔记vue学习笔记vue学习笔记
前端主流框架vue学习笔记第一篇
12-10
Vue.js 的第一个示例通常是从"Hello World"开始的。在HTML文件中，我们需要引入Vue.js库，这里通过CDN链接引入。创建`index.html`文件，然后在`<head>`标签内引入Vue.js的CDN链接。接着，在`<body>`内创建一个`<div>...
Java实例化泛型
学过的东西，讲不出来等于没学。
10-10 9323
核心代码（可复制）： public D newUsr(){ D newUsr; try { // 通过反射获取model的真实类型 ParameterizedType pt = (ParameterizedType) this.getClass().getGenericSuperclass(); ...
第 5 章：vuex
学过的东西，讲不出来等于没学。
12-02 897
学习资料来自尚硅谷VUE教学视频 课件、代码、资料 vscode插件推荐 章节导航： Vue学习笔记 第一章（上） Vue学习笔记 第一章（下） 第 5 章：vuex5.1 理解 vuex5.1.1 vuex 是什么5.1.2 什么时候使用 Vuex5.1.3 Vuex原理图5.1.4 使用Vuex3.搭建vuex环境4.基本使用5.getters的使用6.四个map方法的使用7.模块化+命名空间 5.1 理解 vuex 5.1.1 vuex 是什么 概念：专门在 Vue 中实现集中式状态（数据）管理的一
第 3 章：使用 Vue 脚手架
学过的东西，讲不出来等于没学。
12-01 857
学习资料来自尚硅谷VUE教学视频 到p67 课件、代码、资料 vscode插件推荐 章节导航： Vue学习笔记 第一章（上） Vue学习笔记 第一章（下） 第 3 章：使用 Vue 脚手架3.1 初始化脚手架3.1.1. 说明3.1.2. 具体步骤3.1.3. 模板项目的结构3.1.4. 自己的额外笔记 render: h => h(App)关于不同版本的Vuevue.config.js配置文件ES6暴露 和 引入3.2 ref属性3.3 props配置3.4 mixin混入(混合) 3.1 初始化脚
第 7 章：Vue UI 组件库
学过的东西，讲不出来等于没学。
12-02 734
学习资料来自尚硅谷VUE教学视频 课件、代码、资料 vscode插件推荐 章节导航： Vue学习笔记 第一章（上） Vue学习笔记 第一章（下） 第 7 章：Vue UI 组件库7.1 移动端常用 UI 组件库7.2 PC 端常用 UI 组件库 7.1 移动端常用 UI 组件库 Vant https://youzan.github.io/vant Cube UI https://didi.github.io/cube-ui Mint UI http://mint-ui.github.io 7.2 PC
Vue学习笔记：从环境搭建到项目实战
- 提供了丰富的学习资源链接，如Vue官网、JavaScript教程（廖雪峰、MDN）、ES6入门教程，以及冴羽在掘金上分享的学习笔记系列，如JavaScript深入、ES6等。 9. **项目实战与布局**： - 介绍了如何在实际工作中处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值