41、Vue了解笔记

已于 2022-09-21 11:33:47 修改
阅读量161 收藏
点赞数
文章标签： vue.js javascript 前端
于 2021-12-19 21:11:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BaoTTing/article/details/121884287
版权

=>目的：了解Vue的大致机理、为更好的学习后端

一、Vue简介

二、Vue项目创建

三、Vue学习笔记

3.1、简易的计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloVue</title>
</head>
<body>
<div id="app1">
    <h2>计数器:{{counter}}</h2>

    <!--<button v-on:click="counter++">+</button>-->
    <!--<button v-on:click="counter--">-</button>-->

    <!--<button v-on:click="add">+</button>-->
    <!--<button v-on:click="sub">-</button>-->

    <button @click="add">+</button> <!--@为v-on:的简写-->
    <button @click="sub">-</button> <!--@为v-on:的简写-->

</div>
<script src="../vue2/vue.js"></script> <!--导入vue源码,类似C语言的#include<stdio.h>-->
<script>
    const app = new Vue({    <!--定义一个app对象-->
        el:"#app1",
        data:{               <!--注意 {counter:0} 是一个对象，即冒号之后放的是一个对象-->
            counter:0
        },
        methods:{
            add:function(){
                console.log('add被执行');    <!--在浏览器的控制台打印字符串-->
                this.counter++;
            },
            sub:function(){
                console.log('sub被执行');    <!--在浏览器的控制台打印字符串-->
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

3.2、 MVVM

MVVM：Model-View-ViewModel的简写，

MVVM的框架如图所示：
一、ViewModel通过Data Bindings让obj中的数据实时在DOM中显示。
二、ViewModel通过DOM Listeners来建通DOM事件,并通过methods中的操作,改变obj中的数据。
Vue是典型的MVVM框架，让界面UI与数据相互分离。

3.3、Vue的生命周期

Vue具体的执行过程可以看Vue源码，Vue执行有很多的阶段，其实就是一系列函数的执行过程，每个阶段执行完毕会执行相应的回调函数，用户可以自己定义回调函数，通过回调函数的执行来获取Vue到底执行到哪一步了。

3.4、基础语法

3.4.1、Mustache

Mustache语法就是双大括号的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-Mustache</title>
</head>
<body>
<div id="app1">
    <!--双大括号为Mustache语法,双大括号中不仅可以直接写变量，也可以写简单的表达式-->
    <h2>{{message}}</h2>
    <h2>{{message}},科比</h2>
    <h2>{{firstname + lastname}}</h2>
    <h2>{{firstname + ' ' + lastname}}</h2>
    <h2>{{firstname}} {{lastname}}</h2>
    <h2>{{counter*2}}</h2>
</div>
<script src="../vue2/vue.js"></script> <!--导入vue源码,类似C语言的#include<stdio.h>-->
<script>
    const app = new Vue({
        el:'#app1',
        data:{
            message:'你好呀',
            firstname:'kobi',
            lastname:'bryant',
            counter:100
        }
    })
</script>
</body>
</html>

3.4.2、v-once

app对象的成员和DOM的显示是实时的，我们在控制台更改app对象时，DOM会实时显示最新的值，如果想不实时更改，加v-once属性可以让大括号只响应一次，即只在初始更新一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-Mustache</title>
</head>
<body>
<div id="app1">
    <h2>{{message}}</h2>            <!--实时更新显示-->
    <h2 v-once>{{message}}</h2>     <!--不实时更新显示-->
</div>
<script src="../vue2/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app1',
        data:{
            message:'你好呀',
        }
    })
</script>
</body>
</html>

3.4.3、v-html

以html的形式展示字符串，例如从服务器接收到'<a href="http://www.baidu.com.com">百度一下</a>'，要求解析网址，并以html的形式展示字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-Mustache</title>
</head>
<body>
<div id="app1">
    <h2>{{message}}</h2>
    <h2 v-html="url"></h2>
</div>
<script src="../vue2/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app1',
        data:{
            message:'你好呀',
            url:'<a href="https://www.baidu.com">百度一下</a>'
        }
    })
</script>
</body>
</html>

3.4.4、v-text

v-text可以文本的形式解析变量并显示，但是一般不使用，因其本身在用法上不太灵活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-Mustache</title>
</head>
<body>
<div id="app1">
    <h2>{{message}}</h2>
    <h2 v-text="message"></h2>
</div>
<script src="../vue2/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app1',
        data:{
            message:'你好呀',
        }
    })
</script>
</body>
</html>

3.4.4、v-pre

Mustache语法或者其他的语法会被Vue解析显示，如果你想让标签不被解析显示，而是原封不动的显示标签的内容，就可以使用v-pre

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-Mustache</title>
</head>
<body>
<div id="app1">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../vue2/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app1',
        data:{
            message:'你好呀',
        }
    })
</script>
</body>
</html>

3.4.5、v-cloak

程序从上往下执行，故先渲染便签，再执行js解析显示，如如程序所示，当执行到js时，被卡了1000ms，以至于渲染后不能被js解析替换，从而出现前1000ms显示{{message}}，1000ms之后才解析被解析显示。
解决办法如下：

更新中·。。。。。。。。。。。。。。。

Bao@Ting
关注
尚硅谷Vue笔记
m0_56428225的博客
10-17 4174
vue学习笔记
vue 学习笔记
weixin_43971312的博客
05-22 2263
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
学习笔记：尚硅谷Vue2基础篇
D_boj的博客
04-22 1184
通过B站尚硅谷学习，了解Vue2基本概述，以及基本使用。本章节主要了解选项式API以及组件化编程
vue学习笔记（超详细）
fmk1023的博客
12-18 4万+
文章目录一. Vue基础认识Vue.jsVue安装方式Vue的MVVM二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合v-onv-for遍历数组v-model表单绑定v-model结合radio类型使用v-model结合checkbox类型使用v-model结合select类型使用值绑定修饰符检测数组更新计算属性 computed计算属性setter和gettercomputed / methods区别fulters过滤器三. 组件化开发组件的基本介绍注册组件的基本步骤全局
Vue学习笔记
m0_54051853的博客
05-12 1031
vue
Vue3笔记——（尚硅谷张天禹Vue笔记)
csdnidofkdy2138的博客
08-23 3374
vue3笔记
Vue3复习笔记
qq_52845451的博客
01-01 1663
Vue3复习笔记，把以前没注意到的细节和不太熟悉的都写在里面了，后续学到新知识还会添加
vue3笔记
m0_58266149的博客
04-10 2619
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
Vue笔记，Vue笔记，Vue笔记
07-18
Vue笔记主要涵盖了从基础到进阶的各种Vue知识，通过一系列的学习日程，旨在帮助开发者深入理解和熟练掌握Vue框架。 在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue教程(vue2笔记+vue3笔记)
04-22
Vue.js 是一款流行的前端JavaScript框架，它以声明式的数据绑定和组件化开发为...通过这个教程，开发者不仅能深入了解Vue2和Vue3的关键特性，还能掌握在实际项目中应用这些知识的方法，从而提升开发效率和应用质量。
本人开发初级阶段学习VUE整理笔记.zip
10-23
12. **部署与优化**：了解如何配置Vue CLI进行项目构建，以及如何利用Vue的懒加载、按需引入、代码分割等技术进行性能优化。 这些知识点是初学者掌握Vue开发的基础。通过阅读这份笔记，你将逐步理解Vue的架构和工作...
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1143
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
最新发布
2301_77358195的博客
09-30 844
自定义指令
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 498
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Vue.js组件开发教程
q903249871的博客
09-29 1174
组件是 Vue.js 应用程序的基本构建块。它们是独立且可复用的代码块，可以包含模板、逻辑和样式。提高代码的可维护性实现代码复用使应用结构更加清晰子组件可以通过$emit方法向父组件发送事件。组件是构建 Vue.js 应用程序的基石。通过本教程，您应该对如何创建和使用组件有了基本的了解。继续探索 Vue.js 的组件系统，可以让您的应用更加模块化、可维护和强大。希望这份教程对您有所帮助，祝您在 Vue.js 的学习和开发中取得成功！
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1110
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
尚硅谷 vue2 笔记
06-20
通过阅读这份笔记，我们可以了解Vue的整个生命周期，并且学习如何在Vue中绑定数据、响应事件、使用组件化等等。另外，笔记中也提到了Vue的MVVM模式、路由、状态管理、Ajax等进阶使用方法，以及Vue的一些注意点和优化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值