Vue复习之Vue2

最新推荐文章于 2024-07-10 21:37:49 发布
最新推荐文章于 2024-07-10 21:37:49 发布
阅读量153 收藏
点赞数
分类专栏： 前端 Java知识体系 文章标签： java 前端 javascript vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45464872/article/details/128026668
版权

Vue复习之Vue2

技术简介
MVVM模型
使用方式
指令  （重点）
Vue生命周期
综合案例

1 技术简介

(1)渐进式JavaScript 框架
	框架：一套现成的解决方案
	规则：遵循一定的规范->代码规范
	优势：代码量减少
(2)往页面填充：
	数据
(3)渐进式：
	自底向上：简单使用(xx.js文件)  复杂使用(引入相关的文件)   灵活
(4)特性：
	单向数据绑定：
		JS->页面
		JS中数据改变->页面数据随之改变
	双向数据绑定：
		JS->页面
		JS中数据改变->页面数据随之改变
		
		页面->JS  form
		页面数据随之改变 用户操作表单元素->JS中数据改变
(5)声明式编码
	指令(重点)

2 MVVM模型（重点）

(1)M：
	Model，模型   数据源
(2)V：
	View，视图    页面
(3)VM：
	ViewModel：视图模型  Vue实例
	中介
思想：
	是单向数据绑定和双向数据绑定特性的基础

3 Vue使用步骤

3.1 基础介绍

(1)引入vue.js文件
	本地文件->相对路径 根路径
	非本地文件->绝对路径
	Vue构造函数
(2)创建Vue实例：
    new Vue({
   
		el:'#id属性值',
        data:{
   
        	id:1,
        	name:'tom',
        	...
        }
    })
(3)创建div元素：
	设置id属性
	
使用Vue：
	不用再手动操作DOM，只需保证对应关系即可

3.2 案例

3.2.1 案例1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用步骤</title>
		<!-- 
			1.引入vue.js文件：
				vue.js  vue.min.js
				推荐使用vue.js->明确的报错和警告信息
		 -->
		<script src="js/vue.js"></script>

	</head>
	<body>
		<!-- 
			3.创建根标签： View
				div
				页面呈现所有内容
				设置属性->id
				代码格式：
					HTML代码
					Vue代码
		 -->
		<div id="root">
			<p>{
  {name}}</p>


		</div>
	</body>
	<script>
		/* 
			2.创建Vue实例： ViewModel
				el：
					监控页面哪个元素，对应于根标签   属性值：CSS选择器的字符串表示形式
				data：
					页面呈现数据   Model
		 */
		var vm = new Vue({
     
			el: '#root',
			data: {
     
				name: 'jack'
			}
		});
		// Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
		console.log(vm);
		// jack  ->不推荐使用
		console.log(vm.$data.name);
		// jack  ->推荐使用
		console.log(vm.name);
		
	</script>
</html>
3.2.2 案例2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- View -->
		<div id="root">

		</div>
	</body>
	<script>
		var vm = new Vue({
      // ViewModel
			// el: '#root',

			// 对象式
			/* data: { // Model
				id: 1


			} */

			// 函数式
			data() {
     
				return {
     
					id: 1
				}
			}

		})
		// el的另外一种写法
		vm.$mount('#root');
		console.log(vm.id);
	</script>
</html>

4 Vue指令（重点）

4.1 基础介绍

(1)渲染页面数据
(2)指令分类：
	内容渲染指令
	属性绑定指令
	事件绑定指令
	双向绑定指令
	条件渲染指令
	列表渲染指令

4.2 详细介绍

4.2.1 内容渲染指令
4.2.1.1 基础介绍
(1)v-text
	渲染文本内容   覆盖原先内容 
(2){
   {
   }}
	插值语法  设置标签体文本内容  ****  不能解析HTML标签
(3)v-html
	解析HTML标签
4.2.1.2 案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 
				内容渲染指令：
					(1)v-text
						渲染文本内容   覆盖原先内容 
					(2){
  {}}
						插值语法  设置标签体文本内容  ****  不能解析HTML标签
					(3)v-html
						解析HTML标签
			 -->

			<!-- v-text：渲染文本内容   覆盖原先内容  -->
			<p v-text='name'></p>
			<!-- {
  {}}：插值语法  设置标签体文本内容  ****  不能解析HTML标签    -->
			<div>名称：{
  {name}}</div>
			<!-- v-html：解析HTML标签 -->
			<div v-html='address'></div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#root',
			data: {
				name: '尚马教育',
				address: '<p>河南郑州</p>',
				addresss: '<p>河南郑州2</p>',
			}
		})
	</script>
</html>
4.2.2 属性绑定指令
4.2.2.1 基础介绍
(1)动态设置元素的样式属性
(2)属性：
	value
	placeholder
	class
	disabled
	src
	href
	......
(3)写法：
	完整写法：
		v-bind:xx    
    简化写法：
    	:xx
4.2.2.2 案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script
最低0.47元/天 解锁文章
katahill
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
复习Vue2
m1864787的博客
10-20 33
Vue是一套用于构建用户界面的渐进式框架。【渐进式：依赖性很小，不会像react依赖一些包、hooks、函数（高阶函数）等】。使用Vue框架，可以完全在浏览器端渲染（加载构建）页面，服务端只提供数据。【面试时介绍说】使用Vue框架，可以非常简单的构建单页面应用（SPA）。【面试题 --- 单页面跟多页面(MPA)的区别/哪个页面性能加载更快？答：单页面】 【下面也会说】
Vue2复习篇
weixin_45609702的博客
02-01 160
1.css关键字 scoped 2.mixin混入3.插件4.vuex5.router6.插槽
万字复盘Vue2相关知识（适合学过但忘了然而需要上手的朋友）
zxdznyy的博客
04-19 444
这是一篇帮助读者快速复盘Vue2有关实践知识点的博客。先说说笔者的情况吧，写这篇文章的一个月前，我刚帮老师做完他的公司的官方网站，这是一个展示形的网站，写了两天，内容基本写完。这一个月时间里，我没有碰Vue2的相关内容，而是复习了跟前端请求的相关内容。所以一个月后要我改这个网站，我看着代码内心是懵的。因此想花一个下午时间去复盘一下和Vue2实践相关的内容。注意事项：本文针对的是和我情况类似，之前系统学过Vue2但是因为很久没碰忘记了的朋友，目的不是重新学习，而是复盘。
vue2复习笔记
weixin_70856517的博客
01-23 398
学习尚硅谷笔记。
Vue2知识点汇总—尚硅谷
weixin_50637054的博客
04-21 2568
Vue2知识点——尚硅谷
前端框架Vue期末复习资料
11-13
前端框架 Vue 期末复习资料 Vue 是一个前端框架，提供了许多强大且灵活的功能，以下是 Vue 的一些重要知识点： 1. 生命周期钩子函数 * beforeCreate: 实例创建之前 * created: 实例创建完成后被调用 * ...
Vue复习1
08-08
Vue复习1
vue的简单-复习文件
02-12
2. **键值（key）的原理**：在Vue的列表渲染中，`v-for`指令用于遍历数组或对象。为列表项指定`key`属性是重要的优化手段，它帮助Vue识别并跟踪每个节点的身份，从而提高DOM操作的效率。特别是当列表需要重新排序或...
vue.md hhh复习资料
04-08
vue.md hhh复习资料
vue.js组件复习源码
10-24
Vue.js 的核心特性之一就是它的组件化系统，它使得开发者可以将复杂的UI拆分成独立、可重用的组件，每个组件都有自己的视图和数据逻辑。这个压缩包文件的内容似乎是一个Vue.js组件的学习复习项目，包含了一些组件的...
Vue2复习
前端如逆水行舟...
10-20 400
vue2 api 复习
vue2复习
WXY19990803的博客
07-10 302
【1】Vue实例和容器是一一对应的 【2】{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 【3】由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了 【4】data中所有的属性，最后都出现在了vm身上 【5】vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用 【6】Vue中的数据代理 【7】Vue中的事件修饰符（修饰符是可以连着写的） 【8】键盘事件 【9】Vue中的watch默认不监测对象内部值的改变（一层
vue2--复习
yang792508465的博客
05-03 175
1.路由导航守卫 又叫 路由的 生命周期函数 也叫路由的钩子函数 路由导航守卫 有没有第三个参数 next 取决于 vue-router 的版本 如果是 3.x 的路由必须写 next 如果是 4.x 的路由可以不写 一般来说 vue2 搭配 3.x 的路由 vue3 搭配 4.x 的路由 全局 守卫所有的页面 beforeEach 路由进入之前 afterEach 路由离开 组件 守卫单个页面 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 befo
vue 第二次复习
天天的博客
09-14 187
我准备去找份vue 工作干一干，才发现， vue 还是有点不会，这次再复习一下下，基本就没多大问题了！ 发现以前所学的，确实有点效果，越熟悉，掌握的越发娴熟了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g.
配置Java开发环境
最新发布
Broken_x的博客
07-10 638
Java开发环境配置
关于static定义初始化块和静态变量以及初始化块的执行顺序问题
你我约定有三的博客
07-08 230
第二步：在类加载的时候，按照从上到下执行static修饰的代码，此时执行static Test2 test1 = new Test2()，也就是创建出一个名为test1的对象。第六步：此时除了main方法，所有由static修饰的代码全部执行完毕(static修饰的代码只执行一次)，类初始化完成，开始执行main方法，main方法中只有一条语句(中的代码,此时输出aa以及a的值(由于第一步没赋初值，并且给了默认值为0 所以输出0)//首先输出a的值为10 然后输出bb，最后将a的值定义为11。
java Object 转 Integer
servepeople的博客
07-09 1129
在 Java 中，可以通过多种方法将一个Object转换为Integer。
vue3知识代码复习
04-17
Vue 3是一种流行的JavaScript框架，用于构建用户界面。它具有响应式和组件化的特性，使得开发者可以更轻松地构建交互式的Web应用程序。以下是一些Vue 3的重要知识点和代码复习： 1. 创建Vue实例： ```javascript const app = Vue.createApp({ // options }) ``` 2. 数据绑定： ```html <div>{{ message }}</div> ``` 3. 条件渲染： ```html <div v-if="show">显示内容</div> ``` 4. 列表渲染： ```html <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> ``` 5. 事件处理： ```html <button @click="handleClick">点击按钮</button> ``` 6. 计算属性： ```javascript computed: { fullName() { return this.firstName + ' ' + this.lastName; } } ``` 7. 监听属性变化： ```javascript watch: { count(newValue, oldValue) { // 处理属性变化 } } ``` 8. 生命周期钩子： ```javascript created() { // 在实例创建后执行的代码 } ``` 9. 组件化开发： ```javascript app.component('my-component', { // 组件选项 }) ``` 10. 组件通信： - 父子组件通信：通过props传递数据 - 子父组件通信：通过$emit触发事件 以上是一些Vue 3的重要知识点和代码复习。如果你有任何相关问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值