学习笔记——前端：Vue.js

最新推荐文章于 2024-09-07 15:49:58 发布

Ryan.1024

最新推荐文章于 2024-09-07 15:49:58 发布

阅读量344

点赞数

分类专栏：学习笔记文章标签： vue vue.js

本文链接：https://blog.csdn.net/YannKann/article/details/105400449

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

笔记目录

1 基础知识

1.1 这是一个渐进式的框架

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足各种各样的需求。

1.2 优点

体积小：压缩后33k；
更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于 Vue.JS 的 UI 框架、常用组件！拿来即用实现快速开发！

1.3 特点及常见的高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

1.4 数据驱动视图

数据驱动：是 Vue.js 最大的特点。在 Vue.js 中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。
MVVM： Vue.js 的数据驱动是通过 MVVM 这种框架来实现的。MVVM 框架主要包含3个部分：Model、View 和 ViewModel；
Model：指的是数据部分，对应到前端就是 JavaScript 对象；
View：指的是视图部分，对应前端就是 DOM；
ViewModel：就是连接视图与数据的中间件。
数据（Model）和视图（View）是不能直接通讯的，而是需要通过 ViewModel 来实现双方的通讯。当数据变化的时候，ViewModel 能够监听到这种变化，并及时的通知 View 做出修改。同样的，当页面有事件触发时，ViewModel 也能够监听到事件，并通知 Model 进行响应。ViewModel 就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。

Vue.js 的数据驱动实现：
首先，vuejs在实例化的过程中，会对遍历传给实例化对象选项中的 data 选项，遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
同时每一个实例对象都有一个 watcher 实例对象，他会在模板编译的过程中,用 getter 去访问 data 的属性，watcher 此时就会把用到的 data 属性记为依赖，这样就建立了视图与数据之间的联系。
当之后我们渲染视图的数据依赖发生改变（即数据的 setter 被调用）的时候，watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染。
这样就实现了所谓的数据对于视图的驱动。

2 Vue 实例应用

2.1 Vue 实例初体验

创建Vue实例对象，传入对象options: {}；
{}中包含了el属性：该属性决定了这个Vue将挂载到哪一个元素上，下方案例中挂载到id为app的元素上；
当一个 Vue 实例被创建时，它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
<div>{{message}}</div>

<!--引入VueJS文件-->
<script src="../js/vue.js"></script>
<script>
    // 编程范式：声明式编程
    const vm = new Vue({       // ES6 -> let（变量）/const（常量）
        el: '#app',             // 用于挂载要管理的元素
        data: {                 // 定义数据
            message: 'Hello Vue !',
            name: 'luvCode'
        }
    })

    // 原生js的做法（编程范式：命令式编程）
    // 1.创建div元素，设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在前面的div元素中显示
    // 4.修改message的数据：今天天气不错！
    // 5.将修改后的数据再次替换到div元素
</script>

</body>
</html>

2.2 生命周期

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
Vue.Js 八大生命周期钩子

3 注意要点

3.1 插值

文本：数据绑定最常见的形式就是使用“Mustache”语法（双大括号{{}}）的文本插值。
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。
原始 HTML：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令。

3.2 指令

3.2.1 阻止事件冒泡

子组件点击事件后缀加.stop即可阻止父级元素事件触发

<div @click="click1">
	<div @click.stop="click2">
		点击事件
	</div>
</div>

3.2.2 事件监听DOM事件

<button @click="warn('message', $event)">
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

3.3 计算属性

计算属性相比于方法，是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

3.4 条件渲染

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。相当于display: none / block。
对比：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
注：不推荐同时使用 v-if 和 v-for。

Ryan.1024

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记——前端：Vue.js

笔记目录1 基础知识1.1 这是一个渐进式的框架1.2 特点及常见的高级功能1 基础知识1.1 这是一个渐进式的框架渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足各种各样的需求。1.2 特点及常见的高级功能解耦视图和数...
复制链接

扫一扫

专栏目录