当前位置: 首页 > article >正文

前端入门(二)Vue2到Vue3

文章目录

  • Vue简介
    • Vue的特点
    • Hello, Vue
  • Vue基本语法
    • 模板语法
    • 数据绑定(v-bind、v-model)
      • el与data的两种写法
    • 数据代理实现原理
      • Object.defineProperty()
      • 数据代理
    • 事件处理(v-on:click / @click)
      • 事件修饰符
      • 键盘事件(略)
    • 计算属性与监视(computed、watch)
      • 计算属性-computed
      • 监视属性-watch
      • 深度监视-deep
      • computed和watch的区别
  • 样式渲染
    • class与style绑定
    • 条件渲染

Vue简介

在这里插入图片描述

Vue的特点

在这里插入图片描述

在这里插入图片描述

3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。

在这里插入图片描述

Hello, Vue

1、Vue实例与HTML容器是一一对应的,使用el属性让容器与Vue实例关联起来。
2、Vue可以使用插值语法(双层花括号)解析Vue的data属性,插值语法还可以解析其他的js表达式(所谓js表达式,就是可以产生一个值的js语句,一般为元素赋值语句的等号右边部分或者函数的返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境, 关闭vue对于生产环境的提示信息
    </script>

    <div id = "r1">
        <h1>
            {{msg}}  // vue的插值语法
        </h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
                msg: "hello vue"
            }
        });
    </script>
</body>

</html>

Vue基本语法

模板语法

Vue模板语法有2大类:
1、插值语法:

  • 功能:用于解析标签体(开闭标签之间部分)内容。
  • 写法:{{****}} ****是js表达式,且可以读取vue实例中data的所有属性。

2、指令语法:

  • 功能:用于解析标签(包括标签属性,标签体内容,绑定事件……)
  • 举例:v-bind:href = "***" 或简写为 ::href="***",***同样要写js表达式,且可以直接读取到data中的属性。
  • 注:vue中除了v-bind还有很多v-???的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境, 关闭vue对于生产环境的提示信息
    </script>

    <div id = "root">
        <h1>
        差值语法
            <h3>{{name}}</h3>  // vue的插值语法
        </h1>
        <h1>
			指令语法
			<a v-bind:href="school.url.toUpperCase()">点我去{{school.url}}学习</a>
		</h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#root",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
            	name: 'jack'
                school:{
					name:'ULCA',
					url:'https://www.ulca.com'
				}
            }
        });
    </script>
</body>
</html>

数据绑定(v-bind、v-model)

Vue中有2中数据绑定方式:

  • 1、单向绑定(v-bind):数据只能从data流向页面
  • 2、双向绑定(v-model):数据不仅能从data流向页面,也可以从页面流向data。
    • 双向绑定一般应用在表单元素上(如:input、select等,这些元素都有value属性,v-model绑定的正是这个value属性)
    • v-model:value 可以简写为v-model,因为v-model默认收集的就是value值。

el与data的两种写法

el:

  • 使用el属性绑定容器
  • 使用代码.$mount('#root')绑定

下边演示了一个案例,使用一个定时器,在1秒后再建立vue实例与html容器之间的关联。
在这里插入图片描述
data:

  • 使用data属性,对象式
  • 使用函数返回值,函数式。当学习组件时,data必须使用函数式,否则会报错。
  • 一个重要的原则,由Vue管理的函数,不可以写箭头式,一旦写了箭头式,this就不再是Vue实例了。

在这里插入图片描述

数据代理实现原理

Object.defineProperty()

Object.defineProperty()字面意思就是可以为对象设置属性,且在设置属性时,可以控制属性的一些高级选项:

  • enumerable:是否可以枚举
  • writable:是否可修改
  • configurable:是否可删除
    在这里插入图片描述
    此外可以设置属性的get()和set()方法。

数据代理

  1. Vue中通过VM对象来代理data对象属性中的操作(读/写)
  2. 数据代理可以更加方便的操作data中的数据
  3. 实现原理:通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个属性指定getter和setter方法,在这些方法中去读/写data中对于的属性。
    在这里插入图片描述

事件处理(v-on:click / @click)

  1. 使用v-on:×××@×××绑定事件,其中××× 是事件名。
  2. 事件的回调需要配置在method对象中,最终会在vm上。
  3. method中配置的函数都是被Vue管理的函数,this指向的就是组件实例对象,最好不要用箭头函数(lambda)表示。
  4. @click="demo" 和 @click="deme($event)"效果是一致的,但是后者可以给函数传参数。

事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用)
  2. stop:阻止事件冒泡(即事件不会向外层传播,常用)
  3. once:事件只触发一次(常用)
  4. capture:使用事件的捕获模式(即外层容器的事件也会被捕获)
  5. self:只有event.target是当前操作的元素才触发事件
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕。

键盘事件(略)

计算属性与监视(computed、watch)

计算属性-computed

计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!

计算在虚拟dom中进行,计算结果在缓存中,不会随时间变化,当计算属性中的参数有更新时,虚拟dom清空,重新计算,这时计算属性才会发生变化。
注意计算属性是vue component的属性,可以用方法定义,但不可用作方法调用。

计算属性的优势:有缓存,多次调用,只计算一次。仅当计算所依赖的数据变化后才会重新修改。

computed: {
		fullname:{
			get(){
				return this.firstName + '-' + this.lastName;
				}
			}
        }

计算属性:也可以使用函数返回值设置,但是methods,computed 方法名不能重名,重名字后,只会调用methods的方法。

computed: {
            //计算属性:methods,computed 方法名不能重名,重名字后,只会调用methods的方法
            fullname: function () {
				return this.firstName + '-' + this.lastName;
            }
            // 或者函数也可直接这样写:
            fullname() {
				return this.firstName + '-' + this.lastName;
            }
        }

监视属性-watch

监视属性有两种配置方式:

  • Vue实例中使用watch
  • 调用Vue实例的.$watch方法

主要是可以设置handler(new, old)方法,每次监测的值变化时,都会调用该方法。
在这里插入图片描述

和计算属性一样,监测属性也可以进行简写:
在这里插入图片描述

深度监视-deep

监视多级结构中的某个属性时,使用’number.a’指定对象的key。
在这里插入图片描述
深度监视:

  • Vue中的watch默认不监测对象内部值的改变
  • 配置deep:true,则可以监测对象内部值的改变(多层)

在下边的例子中number对象开启了深度监测,无论属性a还是b变化,都会触发handler()。
在这里插入图片描述

computed和watch的区别

  1. computed能完成的功能,watch都可以完成。
  2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则:

  • 被Vue管理的函数,最好不要写为箭头函数,即写成普通函数,这样this的指向才是Vue实例对象。
  • 所有不被Vue管理的函数(定时器回调函数,Ajax的回调函数等),最好写成箭头函数,这样this的指向才是Vue实例对象。

样式渲染

class与style绑定

条件渲染


http://www.kler.cn/a/136100.html

相关文章:

  • linux 压缩文件为zip
  • UnityShaderLab 实现黑白着色器效果
  • 深入浅出云计算 ---笔记
  • Leecode刷题C语言之判断国际象棋棋盘中一个格子的颜色
  • 日志基础示例python和c++
  • TimeXplusplus——提高时间序列数据的可解释性,避免琐解和分布偏移问题的深度学习可解释性的框架
  • golang学习笔记——要求用户输入一个数字,如果该数字为负数,则进入紧急状态
  • 试用无线调试器PowerDebugger小记
  • ES6有何新特性?(下篇)
  • 【C语法学习】26 - strcat()函数
  • 智能门禁刷脸照片格式gif、bmp,png转换,转换base64
  • 力扣labuladong——一刷day44
  • 网络参考模型与标准协议(一)
  • ORA-00600 【3948】,ORA-00600 【3949】
  • 何时使用Elasticsearch而不是MySql?
  • 虚拟化逻辑架构: 创建KVM中的VM与实现VNC远程登录
  • 键盘控制ROS车运动
  • Linux 串口应用编程
  • 阿里国际站(直通车)
  • 【开题报告】基于SpringBoot的膳食营养健康网站的设计与实现
  • WebGoat通关攻略之 SQL Injection (intro)
  • 持续集成交付CICD:Jenkins Sharedlibrary 共享库
  • Java语言基础第四天
  • centos oracle11g开启归档模式
  • 下一代搜索引擎会什么?
  • 力扣贪心——跳跃游戏I和II