Vue学习记录

已于 2022-08-02 22:48:47 修改
阅读量203 收藏
点赞数
文章标签： 学习 vue.js 前端
于 2022-07-31 22:47:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang54188a/article/details/126086033
版权

开头附上官网Vue.js 教程 | 菜鸟教程 (runoob.com)

一、Vue核心

1.模板语法

1.1插值语法

{{ name.toUpperCase() }}  作用将属性值中的字符串转换为大写
{{}}为插值语法，其中name为data{ name：‘zhangsan’}中的属性

1.2指令语法

v-bind:href = 'xxxx' ，其中xxxx会被会被作为js表达式解析
​例如：写一个超链接
                <a v-bind:href = 'url'>点击跳转</a>
                data{ url：‘http://www.xxx.com’}
        如此即可修改url，解析跳转网页
显而易见，两种语法都可以读取data中的值，但是插值语法常用语标签体，指令语法常作用于标签属性。另外， v-bind:href 可以直接简写为 :href

2.数据绑定 

数据绑定有单向数据绑定v-bind，还有双向数据绑定v-model（数据不仅能从 data 流向页面，还能从页面流向 data）

3.MVVM模型

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

4.Object.defineProperty与数据代理

let person = {
        name:'张三',
        sex:'男'
        //age:18
}
Object.defineProperty(person,'age',{
        value:18,
        //enumerable:true,      //控制属性是否可以枚举，默认值为false
        //writable:true,        //控制属性是否可以被修改，默认值为false
        //configurable:true        //控制属性是否可以被删除，默认值是false
})

4.1Object.defineProperty功能

采用此方法Object.defineProperty为person追加的age属性，但是无法被遍历
测试：console.log(Object.keys(person))查看，可以发现只显示了name与sex，数组当中没有age；若想遍历到age将enumerable设置为true即可
        Object.keys(person)：此方法会将person里面的属性名都提取出来变成一个数组

4.2数据代理

数据代理就是为了更加方便的操作data中的数据，方便程序员编写代码。
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="root">
    <h1>学校名称：{{name}}</h1>
    <h2>地址名称：{{address}}</h2>
  </div>
</body>

<script type="text/javascript">
  const vm = new Vue({
    el:'#root',
    data:{
      name:'武汉理工大学',
      address:'洪山区'
    }
  })
</script>
</html>

以上述代码为例，Vue中的数据代理是通过vm对象来代理data对象中的属性的操作（读/写）
基本原理是通过Object.defineProperty将data对象中所有属性添加到vm上，为每一个vm上的属性都指定一个getter/setter方法，从而操作data中的属性。不需要data.name/data.address。

5.事件处理

5.1绑定监听

v-on绑定事件，例如点击v-on:click='方法名'        或        @click='方法名'

5.2事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
.once：事件只触发一次
.capture：使用事件的捕获模式——事件有捕获和冒泡阶段，倘若从div还有一层div嵌套，访问内层必然会冒泡到外层（控制台先输出内层后输出外层）。给外层div事件添加.capture则外层div会在捕获阶段即输出（控制台先输出外层后输出内层）。

例如：@click.prevent='方法名'
        @click.capture='方法名'

5.3键盘事件 

@keyup="方法名"


例如：@keyup.enter / @keyup.ENTER        按下回车触发 

6.计算属性

6.1小案例

下面三块html代码分别是插值语法实现姓名拼接、methods方法实现姓名拼接、计算属性实现需求： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
  <!-- 将两个输入框的文字拼接起来 -->
  <div id="root">
    姓：<input type="text" v-model="firstName"></input><br>
    名：<input type="text" v-model="lastName"></input><br>
    <!-- .slice为截取firstName前三位 -->
    全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
  </div>
</body>

<script type="text/javascript">
  new Vue({
    el:"#root",
    data:{
      firstName:'张',
      lastName:'三'
    }
  })
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>姓名案例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
  <div id="root">
    姓：<input type="text" v-model="firstName"></input><br>
    名：<input type="text" v-model="lastName"></input><br>
    <!-- 注意这里的方法名后面要加（），否则输出的是全名：function () { [native code] } -->
    全名：<span>{{fullName()}}</span>
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el: "#root",
    data: {
      firstName: '张123',
      lastName: '三'
    },
    methods: {
      fullName(){
        return this.firstName + '-' + this.lastName
      }
    }
  })
</script>
</html>
<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>

 7.监视属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../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>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气小案例</title>
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
  <div id="root">
    <h1>今天的天气很{{info}}</h1>
    <button @click="changeWeather">切换天气</button>
  </div>
</body>
<script>
  new Vue({
    el: "#root",
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    },
    watch: {
      isHot: {
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue, oldValue) {
          console.log('isHot被修改了', newValue, oldValue)
        }
      }
    }
  })
</script>
</html>

同样的，监视属性还可以监视computed里面的info，另外watch还可以方便的开启异步，见下段代码：

watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}

（空白格）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue学习笔记一
wd
09-04 286
v-once当name修改的时候，不会改变，只绑定一次，并且会影响到span节点中所有的数据绑定<span v-once>姓名:{{name}}</span> 这里讲rawHTML解析为HTML代码，主要使用在后台编辑文章发布的时候v-html<span v-html="rawHTML"></span>数据绑定时，也可以计算，但是必须是单个表达式，对于if语句采用三元表达式例如通过后台获取图片名称<
vue学习笔记
11-22
vue学习笔记，刚开始学习vue，接触了一些基础，整理一下。
Vue学习记录（二）
weixin_30667649的博客
04-16 147
一、指令 　　指令是Vue.js中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM行为。当数据变化时，指令会依据设定好的操作对DOM进行修改，这样就可以只关注数据的变化，而不用去管理DOM的变化和状态，使得逻辑更加清晰，可维护性更好。 　　1、内置指令 　　　　1.1、v-bind 　　　　　　v-bind主要用于动态绑定DOM元素属性（attribute），即元素属性实际的值由...
vue学习记录
S___Lei的博客
03-18 234
第一次接触这个东西有点蒙，所以记录一下。 首先，列出来我们需要的东西： node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.js 从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。 （1）安装完成之后，打开命令行工具，输入node -v，如下图，如果出现相应的版本号，则说明安...
VUE学习记录
凉茶冰
09-30 488
   在尝试了解了React和Vue之后，还是选择了Vue作为开发前端web的单页应用的框架，主要是vue相对来说还简单容易理解一些。通过断断续续的两周学习和准备，现在基本对vue的开发有了一个比较深入的认识。Vue最核心的魅力就在于双向绑定，可以让我们专注于数据，而不用管dom。之所这样说，是因为，只要数据改变了，页面就实时的调整改变了，这也之前使用jquery进行dom操作完全是两个概念。我觉...
Vue学习笔记
04-29
最火的前端框架VUE学习中所记录的所有笔记，其中包括了一些案例，如果亲自动手，按照笔记完整的走一遍代码，VUE也就学的差不多了，简单的开发是不成问题的。
JavaWeb03-Vue学习笔记
最新发布
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
Vue学习记录（1）
loringray的博客
07-25 182
记录下前段时间学习的vue，方便自己后面回来查看。 ps： vue全家桶套餐：1. vue - router; 2. vuex; 3. vue-resource 加上构建工具： vue-cli 饿了么： 组件 PC端： element-ui 移动端： mint-ui Vue基础知识： （1）历史介绍 angular 09年 react 2013年，用户体验好 ...
Vue学习记录（一）
GuardianMANGO的博客
04-08 125
初识Vue 想让Vue工作，必须创建一个Vue实例，且需要传入一个配置对象。 root容器里的代码仍然符合html规范，不过是混入了一些Vue语句。 root容器里面的代码称为【Vue模板】 Vue的实例和容器是一一对应的 真是开发中只有一个Vue实例，且会配合着组件一起使用 {{xxx}}中xxx要写js表达式， 注意区分：js表达式 和 js代码（语句） 表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方： a a + b demo(1) x === y ? ‘a’
VUE 记录学习
学习java 一起进步
05-24 137
记录学习 一起进步
vue学习记录——2
从无到有的代码学习
05-09 173
组件化应用构建     组件系统是vue的另一个重要特征，可以将大型应用拆分为小型的、独立的、可复用的小组件，从而可以使大型应用的页面逻辑更加清晰，也大幅降低了页面编写的工作量。     一个页面打印出列表的demo: <!--HTML--> <div id="four"> <to...
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

（空白格）

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

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

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

打赏作者

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

抵扣说明：

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

余额充值