Vue学习（学习打卡Day14）

最新推荐文章于 2023-03-24 22:41:35 发布
最新推荐文章于 2023-03-24 22:41:35 发布
阅读量337 收藏 11
点赞数 18
分类专栏： Vue 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yi_chen_c/article/details/124539523
版权


📋 作者介绍：友友们好我是乱披风锤，大二学生党一枚
💖作者主页：乱披风锤的个人博客主页.跳转到个人简介
🔥我和友友们一样喜欢编辑，天天敲代码🤭，沉迷学习，日渐消瘦。很荣幸能向大家分享我的所学，和大家一起进步。如果文章有错误，欢迎在评论区指正。那么开始今天的学习吧！
🎉 支持我：点赞👍+收藏⭐️+留言📝
在这里插入图片描述

Vue学习（学习打卡Day14）

1.姓名案例_插值语法实现.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      姓：<input type="text" v-model="firstName" /> <br /><br />
      名：<input type="text" v-model="lastName" /> <br /><br />
      全名：<span>{{firstName}}-{{lastName}}</span>
    </div>
  </body>

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

    new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
    });
  </script>
</html>

2.姓名案例_method实现.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_methods实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      姓：<input type="text" v-model="firstName" /> <br /><br />
      名：<input type="text" v-model="lastName" /> <br /><br />
      全名：<span>{{fullName()}}</span>
    </div>
  </body>

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

    new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
      methods: {
        fullName() {
          console.log("@---fullName");
          return this.firstName + "-" + this.lastName;
        },
      },
    });
  </script>
</html>

3.姓名案例_计算属性实现.html

				==1.定义：要用的属性不存在，要通过已有属性计算得来。
				2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
				3.get函数什么时候执行？
							(1).初次读取时会执行一次。
							(2).当依赖的数据发生改变时会被再次调用。
				4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
				5.备注：
					1.计算属性最终会出现在vm上，直接读取使用即可。
					2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变.==

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>
    <!-- 
			计算属性：
					1.定义：要用的属性不存在，要通过已有属性计算得来。
					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
					3.get函数什么时候执行？
								(1).初次读取时会执行一次。
								(2).当依赖的数据发生改变时会被再次调用。
					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
					5.备注：
							1.计算属性最终会出现在vm上，直接读取使用即可。
							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
		 -->
    <!-- 准备好一个容器-->
    <div id="root">
      姓：<input type="text" v-model="firstName" /> <br /><br />
      名：<input type="text" v-model="lastName" /> <br /><br />
      测试：<input type="text" v-model="x" /> <br /><br />
      全名：<span>{{fullName}}</span> <br /><br />
      <!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
    </div>
  </body>

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

    const vm = new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
        x: "你好",
      },
      methods: {
        demo() {},
      },
      computed: {
        fullName: {
          //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
          //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
          get() {
            console.log("get被调用了");
            // console.log(this) //此处的this是vm
            return this.firstName + "-" + this.lastName;
          },
          //set什么时候调用? 当fullName被修改时。
          set(value) {
            console.log("set", value);
            const arr = value.split("-");
            this.firstName = arr[0];
            this.lastName = arr[1];
          },
        },
      },
    });
  </script>
</html>

4.姓名案例_计算属性简写.html

/* fullName:{
get(){
console.log(‘get被调用了’)
return this.firstName + ‘-’ + this.lastName
},
set(value){
console.log(‘set’,value)
const arr = value.split(‘-’)
this.firstName = arr[0]
this.lastName = arr[1]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../初始vue/js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      姓：<input type="text" v-model="firstName" /> <br /><br />
      名：<input type="text" v-model="lastName" /> <br /><br />
      全名：<span>{{fullName}}</span> <br /><br />
    </div>
  </body>

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

    const vm = new Vue({
      el: "#root",
      data: {
        firstName: "张",
        lastName: "三",
      },
      computed: {
        //完整写法
        /* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
        //简写
        fullName() {
          console.log("get被调用了");
          return this.firstName + "-" + this.lastName;
        },
      },
    });
  </script>
</html>

5.姓名案例_watch.html

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../初始vue/js/vue.js"></script>
	</head>
	<body>
		<!-- 
				computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
				两个重要的小原则：
							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
							2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
								这样this的指向才是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>
</html>

6.天气案例.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../初始vue/js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
		})
	</script>
</html>

总结

好了，那么今天的学习就到这里了。友友们觉得不错的可以给个关注，点赞或者收藏哦！感谢各位友友们的支持。以下的代码希望各位大佬们自行检验哦，毕竟亲手操作让记忆更加深刻。

进击攻城狮
关注
  • 18
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 21
    评论
专栏目录
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue篇(超详细讲解)
最新发布
2301_77112535的博客
12-14 6937
Vue:一套用于构建用户界面的渐进式JavaScript框架渐进式: vue可以自底向上逐层的应用如果应用很简单:只需要一个轻量小巧的核心库如果应用很负责:可以引用各式各样的Vue插件1、采用组件化模式,提高代码复用率,且让代码更好维护。2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve2、首先先需要检测自己是否安装了yarn 命令。
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8211
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1714
一文带你从HelloWorld认识Vue框架，深刻理解！
前后端分手大师——MVVM 模式
weixin_34130389的博客
11-15 551
阅读目录简而言之组成部分没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，通过这两年对 Vue 框架的深入学习和项目实践，终于可以装B了有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Pet...
Vue基础day3学习资料.zip
03-31
Vue的基础语法是学习Vue开发的关键，而"Vue基础day3学习资料.zip"这个压缩包提供了全面的学习资源，包括案例、笔记、PPT和作业，帮助初学者深入理解Vue的核心概念。 首先，让我们来看看"day03_Vue01-基础语法3.ppt...
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
初学Vue(学习笔记 一) day one
01-20
Vue.js 是一个渐进式的JavaScript框架，它设计的目标是让开发者能够轻松地构建用户界面，尤其是在Web应用开发中。Vue的核心特性包括声明式渲染、组件系统、客户端路由管理和集中式状态管理。Vue的设计使得它对熟悉...
Vue基础day1学习资料.zip
03-31
"Vue基础day1学习资料.zip"这个压缩包包含了丰富的资源，适合初学者系统地学习Vue的基础知识。让我们逐一解析其中包含的内容。 首先，"2-案例"文件夹可能包含了一些实际的Vue应用示例，这些案例可以帮助你理解Vue的...
vue学习基础以及大纲
07-19
vue学习大纲
Vue中的注意点（二）
吃蛋糕的居居
08-10 140
1.插值语法的实现： <template> <div class="app"> <!-- v-mode:value 的简写形式： v-model --> 姓：<input type="text" v-model="firstName" /><br /><br /> 名：<input type="text" v-model="lastName" /><br /><br /&gt
Vue3中的计算属性与监视
李公子的博客
08-19 833
computed函数 与Vue2.x中computed配置功能一致 写法：有两种形式 简写形式 和完整写法 不管是那种写法我们都需要在组件中先引入computed方法在使用 引入computed 方法 import { computed } from 'vue' 下面我们通过代码来具体演示它的用法 我们在setup方法中声明了一个data对象, 对象中我们提供了一个人的姓（firstName） 和 名（lastName）...
Vue的计算属性-姓名案例
Web_South_Bay的博客
09-04 196
姓名案例： 一、插值语法实现
Vue+高德地图API的使用(定位打卡)
qq_59863007的博客
09-03 4758
使用高德地图API 写打卡功能。供参考
watch 和 computed 对比-姓名案例
Errol's Blog
03-24 233
watch 和 computed 对比
21.Vue的监视属性watch与计算属性computed对比
爱米酱的博客
06-09 465
Vue的监视属性watch与计算属性computed对比
9. 监视属性
s12345672的博客
08-17 237
监视属性 1. 天气案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气案例</title> <!-- 引入V
Vue-watch与computed对比
qq_40792800的博客
11-08 209
以姓名案例为版本，使用 watch 实现 <div id="root"> <div>姓：<input type="text" v-model='firstName'></div> <div>名：<input type="text" v-model='lastName'></div> <div>全名：{{fullName}}</div> </div> <script&
【Vue】watch监听器案例，watch监听器实战、用法，watch监听购物车小案例。watch、filters、computed
qq_51055690的博客
07-10 1970
首先讲一下应用场景，购物车，，购物车的总数需要重新计算，并且购物车的总价，也是需要重新计算的，这里不考虑勾选之类的问题。只对watch做一个简单的应用实战 这里有3个商品，现在对任意一个进行添加或者删除，总价格和总数量都需要发生变化。 这里的变量是定义在data数据中的 再写一下css 开✍ watch监听 最后添加和删除写好了，就是对页面中的totalNum和totalPrice进行实时监听数据了。 看到没有，watch监听 首先写监听的数据名，我定义的数组就叫list，我就写list.........
深入了解VUE框架及其应用，满足面试、学习和使用的需求。
Vue是一套用于构建用户界面的渐进式框架，“前端框架”，它的详细介绍可以满足面试，学习，使用等初步的了解。Vue让程序员脱离自己操作DOM，专注于写逻辑和操作数据，使得开发更加简单高效。Vue的核心库只关注视图层...
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进击攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值