前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）

已于 2022-07-05 17:09:23 修改
阅读量3.9k 收藏 11
点赞数
分类专栏： 前端 文章标签： 前端 学习 vue.js
于 2022-07-05 16:56:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39514248/article/details/125623493
版权
这篇博客详细介绍了Vue.js的基础知识，包括MVVM架构、Vue CLI、虚拟DOM、双向绑定、组件化开发、Vue指令、事件处理、计算属性、Vue Router和Vuex等内容。文章适合初学者，提供了丰富的实例和面试重点，帮助读者从零开始掌握Vue.js。
摘要由CSDN通过智能技术生成

#【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）

前言

本文完全基于 参考资料：加工整理而成，包括其代码，案例，资源等。前置知识是学习尚硅谷的视频教程，本文配合其教程食用，效果更佳。

b站直接搜索 vue ，第一条结果即是：

在这里插入图片描述

https://www.bilibili.com/video/BV1Zy4y1K7SH?spm_id_from=333.337.search-card.all.click

目录

一、通用概念、前置知识

1.1 MVC 和 MVVM

大家一说起MVC 都知道，但是和MVVM一对比就搞混了。这里举两个例子搞清楚MVC和 MVVM：

MVC 架构（偏后端，以JavaWeb举例）

该架构就是传统JavaWeb项目开发的一般模式，比较简单。

下面两张图截取自：，详情可直接移步该博客

在这里插入图片描述 在这里插入图片描述

MVVM架构（偏前端，以Vue举例）

前置知识是你得懂双向绑定：本文下面有讲解双向绑定，先看双向绑定。

一图说清MVVM（图来源自尚硅谷课件，本人进行二次加工）：

在这里插入图片描述

在代码中体现上图中的Data Bindings（通过VM，将M绑定到View）：

在这里插入图片描述

在代码中体现上图中的DOM Listeners（通过VM，将V绑定到M）：

在这里插入图片描述 执行效果：

在这里插入图片描述

同时做到了将M绑定到V，和V绑定到M，就是实现了双向绑定。

VM（就是ViewModel），其实就是Vue实例本身，它负责将View和Model绑定起来

这就是Vue的MVVM体现！要理解透彻，需要对ViewModel，双向绑定，Vue实例都有详细的理解。其它前端框架对MVVM有不同的解释，但是原理和思想上是一致的。

最后看维基百科对其的定义：

维基百科对其的定义：

1.2 WebPack基本概念 和 Vue-CLI

不需要全部学会WebPack这门技术,只是对其有一个基本认知即可。

在这里插入图片描述 它依赖于Node，可以使用npm安装；

使用npm init 指令构建 package.json 文件；

webpack 能够编译打包 js 和 json 文件。 能将 es6 的模块化语法转换成浏览器能识别的语法。 生产环境能压缩HTML，CSS，JS代码。

可以打包各种各样的资源：样式资源、图片资源、HTML资源，提取压缩css，js语法检查/兼容性处理。

那Vue-CLI是什么呢？其实就是Vue官方给我们构建的适用于.vue的打包构建工具

1.3 【面试】虚拟DOM(vitural dom)

虚拟DOM是内存中的数据，然后将虚拟DOM变成真实DOM。

原生js（不使用虚拟DOM）: 在这里插入图片描述

Vue使用虚拟DOM方式：

在这里插入图片描述

虚拟DOM的好处：如上图，假如用了虚拟dom的技术，会将虚拟DOM和真实DOM比较（就是上图的diff算法），发现001，002，003是重复的。于是就不会再次渲染001，002，003. 而是复用它们。

只有004的虚拟DOM是不重复的，需要重新渲染。这就提高了展示效率。

虚拟DOM 和 v-for 中的key

v-for 中的 key，下文有提到。

虚拟DOM有一个比较算法，基于什么比较呢？就是基于key

这里直接看对应关系：

在这里插入图片描述

在进行渲染时，会将内存中的老虚拟DOM和新虚拟DOM根据key做比较，一旦发现虚拟DOM之间有变化，那么只重新渲染变化部分，复用未变化部分。所以 key 这个属性很重要。

一旦你的结构中包含输入类DOM，会产生错误DOM更新，导致界面渲染有问题。

【面试总结】总结key和虚拟DOM（react也有这概念）

在这里插入图片描述

1.4 vue官方文档和API

https://cn.vuejs.org/

官方推荐的Vue组件包：

在这里插入图片描述 在这里插入图片描述

1.5 双向绑定概念

https://blog.csdn.net/weixin_44757863/article/details/109110132

1.6 常用工具和资源，网站等

bootcdn.cn （收集无数三方库、工具类）

在这里插入图片描述

Vs Code 插件：Live Server

在这里插入图片描述 该插件真乃神器。内置小型Tomcat，以你在VS中打开的文件夹作为根资源，运行于一个小型的服务器。

该服务器的默认端口号为：5050

如下两张图所示，你就是只写了个HTML，也会给你跑在localhost:5050这个服务器上：

在这里插入图片描述 在这里插入图片描述

Vs Code 插件：Auto Close Tag

Vs Code 插件：Auto Rename Tag

其它实用VS插件：

JS Quick Console是真神器，快速生成console.log() 它不香吗？

在这里插入图片描述

在这里插入图片描述 在这里插入图片描述

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

Vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

如何安装：

在这里插入图片描述

固定该程序（谷歌浏览器）：

在这里插入图片描述

二、Vue 基础笔记

1、安装（引入）Vue.js

官网链接：https://cn.vuejs.org/v2/guide/installation.html

  • 1.1 原生安装方式：在HTML中使用JS标签引入 可以使用绝对路径和相对路径的方式。如果是绝对路径，就是https://这种直接引入互联网，如果是…/static 这种方式，就可以引入自己下载好的vue.js文件。 举例： 在这里插入图片描述 在这里插入图片描述 - Vue-Cli

2、创建Vue对象，和Vue插值语法{ { xxx }}

下图一图便知：

在这里插入图片描述 关于上图的补充细节：

  • 1、一个vue实例，只能绑定一个对应实例。这是一对一关系。多了就解析不了。- 2、{ {}} 插值语法，可以写JS表达式。（这点和thymeleaf有点类似）看下图例子： 在这里插入图片描述

【补充】el与data的两种写法（Vue实例管理）

el的另外写法如下：
在这里插入图片描述

原理是因为调用了原型链上的 $mount属性：

至于什么是原型链，下面会讲解。现在只需要记住可以使用这种方法来绑定容器即可。

在这里插入图片描述
data的另一种写法（函数式）如下：

组件式开发全部都是函数式。该函数必须返回一个对象。

注意，这个函数，只能写成普通函数。如果写成箭头函数，箭头函数的this是window，普通函数的this就是Vue实现对象：

ES语法小课堂：

普通函数的this指向是调用它的那个对象，而箭头函数没有this，如果强制它this，由于无人调用，最终指向的就是window。

在这里插入图片描述

ES规范中，如果想在对象中写函数，还可以这样简写（和上图完全就是一个东西，只不过简写了而已）：

在这里插入图片描述

就如上图那个data()一样，今后我们可以看到由很多由Vue管理的函数（Vue对象会调用它）。凡是由Vue管理的函数，都不能写成箭头函数，给老老实实的写成普通函数！

【补充】创建Vue对象时，其它可配置属性

刚刚只介绍了el和data，这里陆续介绍其他的。

【methods】可以传各式各样的函数

但是这个函数仍然受到Vue管理，所以不能写成箭头函数，只能写成普通函数。

methods是个对象，里面可以传入各式各样的函数。

传入的函数要符合：JS对象的某个属性是函数的语法规则。可以自行搜索JS对象中，如何让其某属性变成一个函数

举例：

在这里插入图片描述
methods 中的 event

event在不使用Vue时，可以通过windows.event调用

在Vue中，如果你不传任何参数，methods中的函数可以自动获取到event：

在这里插入图片描述 在这里插入图片描述

Vue中，如果你想传一个实参event对象（event为浏览器内置的全局对象），不能直接写event，而是应该写：$event

如果你想用event，有一个【实参】占位符 $event，可以传入event给形参中： 在这里插入图片描述 在这里插入图片描述

【重要】methods 调用 data 配置属性

使用this即可。

在这里插入图片描述 红色箭头是使用this获取到data的值，但是高明的地方在于蓝色箭头，因为蓝色箭头使用v-model，对data的属性进行了双向绑定，那么input框一旦改变，那么就会引起data改变，data改变从而引起methods里的自定义函数的返回值改变！！

computed 计算属性
watch 监视属性
filters 过滤器
template HTML模板

下图是最简单的用法 在这里插入图片描述

3、Vue指令语法

前面在2里面讲了Vue插值语法 { {}},这里讲指令语法。 这一块和thymeleaf更像了，直接在标签上绑定就行。

【v-bind】: 绑定html的标签属性：

v-bind可以直接简写为 : (一个冒号) v-bind: 后面的双引号，和{ {}}插值语法一样，可以写JS表达式。 和thymeleaf一样，v-bind: 可以绑定任何标签。

在这里插入图片描述

【v-model】 双向绑定：

https://blog.csdn.net/weixin_44757863/article/details/109110132

补充两个注意事项：

1、如下图 在这里插入图片描述 2、v-model:value的简写就是 v-model。原因很简单，因为v-model只能应用在表单类（输入类元素）上。

例：

在这里插入图片描述

指令语法和插值语法的区别：

插值语法用于标签体，例：

<p>Hello，{<!-- -->{name}}</p>

而指令语法则是直接绑在标签的自定义属性上，例：

<a v-bind:href="defineUrl" v-bind:xxxx="hello">超链接</a>

4、Object.defineProperty方法

更高级的给对象添加属性方式。比原来的person.age这种方法高级的多，可以配置很多详细信息。

用法如下图，更多详细的配置对象属性可以自行百度。

在这里插入图片描述

如果设置了不可以枚举【默认就是不可枚举！】，那么就不能用for-each循环遍历对象属性了。

  • 常用属性之：enumerable，布尔类型，默认值是false。如果想让该字段可枚举，就要显式设置为true。 - 常用属性之：configurable，布尔类型，默认值是false。控制字段是否可以被删除 - 常用属性之：writable，布尔类型，默认值是false。控制字段是否可以被修改 - 常用属性之：value，就是赋值，赋字段一个值。

常用属性之get和set

get和set这两个属性特别重要，所以单独拿出一节来讲解。

来看下面一个场景：

let number = 18
    let person = {<!-- -->
        name: "大吉",
        sex: "男",
        age: number
    }
    console.log(person.age)     //输出18

    number = 22     //将number这个变量修改为22
    console.log(person.age)     //输出仍然是18，而不是22

如果我们想让第二个console.log输出的是22呢？应该怎么操作？

这里就引入了我们强大的get和set功能了！！

  • 接上图例子，使用get将输出修改为22：
let number = 18
    let person = {<!-- -->
        name: "大吉",
        sex: "男",
        age: number
    }
    console.log(person.age)     //输出18

    Object.defineProperty(person, "age", {<!-- -->
        get() {<!-- -->
            console.log('有人读取了age属性')
            return number;  //return值很重要
        }
    })
    number = 22     //将number这个变量修改为22
    
    输出的是22。只要有人读取age属性，
    就会调用get方法，get方法return的值就是number这个变量
    
    console.log(person.age)         //22

执行效果如图所示：

在这里插入图片描述

所以我们通过get，实现了只要有人读取age属性，就可以执行get这个方法，至于get这个方法你里面想塞什么都可以。反正只要有人读取age这个属性，就执行get。

  • 下面再看set方法：
let number = 18
    let person = {<!-- -->
        name: "大吉",
        sex: "男",
        age: number
    }

    console.log("number的值是：" + number)  //18
    Object.defineProperty(person, "age", {<!-- -->
        //只要有人修改age属性
        //就会调用set方法，且会收到修改age属性的具体值
        set(value) {<!-- -->
            console.log('有人修改了age属性，age：' + value)
             //神奇的操作来了，我们让number这个变量修改
            number = value; 
        }
    })
    person.age = 22     //修改age属性，从而调用set方法
    //非常神奇，我们明明修改了age，却能对number做修改
    console.log("number的值是：" + number)  //22

执行效果图：

在这里插入图片描述

总结：通过get和set，使得操作对象更加灵活了

为什么要学这个Object.defineProperty方法呢？是为了下一节数据代理做准备！

5、数据代理（数据劫持）

概念：数据代理就是通过一个对象对另一个对象中属性的操作（读/写）

直接看下图：

在这里插入图片描述 上图中如果有人动了obj2，相当于通过obj2动了obj。 这就是最简单的数据代理实例

Vue如何应用数据代理呢？

在这里插入图片描述 在这里插入图片描述

通过数据代理，我们本应该操作vm._data.属性，现在我们直接操作vm.属性即可。

6、事件处理

6.1【v-on】绑定单击事件（结合前面讲的methods一起学习）

其简写是 @ 符号

举例：(下面两种方式等价。)

<button v-on:click="func1">按钮</button>
<button @click="func1">按钮</button>

如果你想传参(当然你的func1的定义处也需要定义形参才可以)：

<button v-on:click="func1(a,b,c,d)">按钮</button>

如何将func1和func2被Vue管理呢？移步前文中的methods，一查便知。

6.2事件修饰符

对事件进行操作，前置知识是你得知道JS中的event。

【JS基础之event】

https://blog.csdn.net/lhjuejiang/article/details/79455801

event是一个内置的全局对象，我们看看里面有什么：

<button onclick="func1(event)">按钮</button>

	function func1(event) {
   <!-- -->

        console.log("我是个函数")
        console.log(event.target)
    }

上面的代码调用了func1，并且传入了全局的event，下面来看event的属性：

在这里插入图片描述
event的常用姿势：
event.preventDefault()

它可以阻止默认事件的发生。比如<a>标签，其默认事件是跳转。如果我们想阻止单击超链接的跳转，可以这么玩儿：

<a href="https://www.baidu.com" onclick="func0(event)">超链接</a>

function func0(event) {<!-- -->
        event.preventDefault()
}

此时打开控制台：

在这里插入图片描述

event的 defaultPrevent属性默认为false的，现在是true了。现在单击超链接将不会跳转。

回到事件修饰符中来，如果我们想在Vue中实现上述操作，需要怎么做呢？事件修饰符马上登场：

<div id="root">
        <a href="https://www.baidu.com" @click.prevent="func00(event)">被Vue管理超链接</a>
</div>
<script>
    new Vue({<!-- -->
        el: '#root',
        data: {<!-- -->

        },
        methods: {<!-- -->
            func00(event) {<!-- -->
                console.log("vue阻止页面跳转")
            }
        }
    })
</script>

上面一坨代码，和event.preventDefault() 是一样的效果。

@click.prevent就是一个事件修饰符。

常用事件修饰符（共六种）：

prevent、stop、once、capture、self、passive 在这里插入图片描述

stop可以阻止事件冒泡到它的上层； once：once如果作用于按钮或者超链接，那么超链接只有第一次点击的时候 会跳转，除此之外该超链接将不会跳转。

键盘事件

以 @keyup.xxx 当键盘弹起 事件 为例：

有keyup当然就有keydown，当键盘按下立刻触发某事件。 在这里插入图片描述 上面的@keyup.esc就是当esc键弹起，就触发showInfo这个自定义函数（该函数必须受Vue管理，即放在methods中）

其它常用的按键别名： 在这里插入图片描述 上图的2 解释：假如你想绑定CapsLock，你应该这样写：@keyup.caps-lock="xxxFunction"，即转为小写且短横线命名。

【DEBUG：】似乎这里的事件修饰符绑定的函数不可以写 xxxFunction() 后面的小括号。否则会报错。必须把小括号去掉才可以。

7、计算属性（computed）

计算属性要解决的问题

计算属性要解决的问题是：插值语法{ {}} 中，越来越长的JS表达式，不利于阅读和组件化的问题。

来看案例：

在这里插入图片描述 在这里插入图片描述

计算属性使用案例

计算属性和data联动，同样可以用this。看下例：

在这里插入图片描述

上图input框框中的 firstName、lastName 和下图 data中的 firstName、lastName 是双向绑定关系。

input框变化，data也会变。如果此时有人调用 计算属性中的fullName，那么fullName自然会变化。

计算属性中get还有一个属性：只要get里面绑定的data有变化，也相当于调用了一次vm中的 get() ，所以只要data里面的firstName和lastName变了，那么fullName即被调用。

在这里插入图片描述 执行效果图：

在这里插入图片描述

顺便一提，计算属性的属性也有set，和Object.defineProperty的set用法原理一样，如下图所示

在这里插入图片描述

计算属性总结：

为什么叫计算属性？它是根据 data中，已经有的属性计算得出来的复杂属性。

在这里插入图片描述

计算属性简写

当你的计算属性只有人读，没有人修改，（也就是只有get没有set），那么计算属性可以简写为：

在这里插入图片描述 上图等价于下面的代码（其实就是简写了get，computed是一个对象，对象的 fullName 字段是一个函数而已）：

	computed: {<!-- -->
            fullName: {<!-- -->
                get() {<!-- -->
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                }
            }
        }

8、监视属性（watch）

概念作用：监视属性仍然是监视 data 的属性变化（也可以监视计算属性！）。

监视属性的传值是一个配置对象。

当data里面的某字段发生变化，就调用handler函数，handler函数里面有两个入参，分别是newValue、oldValue，顾名思义代表修改前和修改后。如下图所示：

在这里插入图片描述

如果被监视结构是多级的：

data:{<!-- -->
	numbers:{<!-- -->
		a:1,
		b:1
	}
}

那么应该这样配置：

	watch: {<!-- -->
            'numbers.a': {<!-- -->	//这样配置多级结构
                handler() {<!-- -->
                    console.log("a被改变了")
                }
            }
        }

监视属性的其它写法：

调用vm的$watch方法：

在这里插入图片描述

这种写法可以简写。但是简写的前提是：watch的配置项只有handler一个参数！！！！，不能有什么deep啊，immediate之类的。

简写办法：

在这里插入图片描述

监视属性简写

简写的前提是：watch的配置项只有handler一个参数！！！！

immediate :true 初始化时让handler调用一下。 什么immediate 啊，deep啊，都不能写，才能用这个缩写。

在这里插入图片描述

深度监视

深度监视是默认关闭的。

场景如下：

如果被监视结构是多级的：

data:{<!-- -->
	numbers:{<!-- -->
		a:1,
		b:1
	}
}

如果你想监测 numbers.a 的变化，上文已经讲过如何监视了。这里不做讲解。但是如果a变化了，那么numbers应该是也变化的。但是Vue却不认为numbers变化了！此时你再监视numbers，假如numbers.a被修改，那么Vue不认为numbers被修改。

如下所示：

		watch: {<!-- -->
            numbers: {<!-- -->
                handler() {<!-- -->
                	//就算numbers.a变了，下一句也不会执行
                    console.log("numbers被改变了")
                }
            }
        }

解决方案：打开深度监视：

		watch: {<!-- -->
            numbers: {<!-- -->
                handler() {<!-- -->
                	deep:true,	//开启深度监视
                	//numbers.a变了，下一句会执行
                    console.log("numbers被改变了")
最低0.47元/天 解锁文章
Only-CYY
关注
专栏目录
VUE.js笔记
wang_san_sui_的博客
09-25 1475
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 应用程序的基本结构通常围绕组件（Components）来组织。组件是 Vue 应用的构建块，它们可以包含 HTML、JavaScript 和 CSS，并且可以独立于其他组件工作。
vue.js入门到精通
07-23
vue.js入门到精通视频，感兴趣的可以看看，入门到精通只是上手视频
Vue.js 实战教程资源推荐：从入门到精通
最新发布
gitblog_06685的博客
10-29 674
Vue.js 实战教程资源推荐：从入门到精通 【下载地址】Vue.js实战教程资源下载 Vue.js 实战教程资源下载本仓库提供了一个名为“Vue.js 实战.pdf”的资源文件下载 项目地址: https://gitcode.c...
Vue.js 入门到精通
前端漫漫兮
08-03 1704
命令行安装： 全局安装 vue-cli npm install -g vue-cli 创建一个基于 “webpack” 模板的新项目 vue init webpack my-project 安装依赖，走你 cd my-project npm install npm run dev 2.代理的属性，才会在修改全局变量时候，反应到视图上。 var data = { a: 1 } var
【从入门到精通】Vue.js 教程
♀我爱摇滚，更爱金属乐♀
04-28 3223
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 002-实现第一个VueJS应用.html 下载vue: http...
VUE.JS视频教学-入门到精通-全套
07-04
vue.js视频教程从入门到精通，全套视频，好东西就要分享，祝愿所有的开发小伙伴能学到东西。
Vue.js语法详解：从入门到精通
m0_55416028的博客
03-23 1768
本文介绍了Vue.js的一些核心概念和语法，包括组件、模板、数据绑定、计算属性、生命周期钩子和指令。指令以`v-`开头，后面跟着指令的名称，例如`v-if`、`v-for`和`v-bind`。在本文中，我们将深入探讨Vue.js的语法，帮助读者更好地理解和应用Vue.js。如果你想深入学习Vue.js，可以查看官方文档或者其他相关资料，这些资源可以帮助你更好地掌握Vue.js的知识。在上述示例中，我们定义了一个简单的Vue.js组件，并在该组件中使用了常见的生命周期钩子。关注我，持续分享更多优质好文！
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
这个压缩包“Vue.js 3.0从入门到实战【配套资源】.zip”包含了两个重要的子文件：书配套代码.zip和视频配套代码.zip，它们分别对应于学习Vue.js 3.0理论知识的书籍和实践操作的视频教程的源代码。 1. **Vue.js 3.0...
vue+neo4j +纯前端（neovis.js / neo4j-driver） 实现 知识图谱的集成 大干货
09-05
vue+neo4j+（neovis.js / neo4j-driver）纯前端实现知识图谱的集成 一、Neovis.js 不用获取数据直接连接数据库绘图 二、 neo4j-driver 能够直接通过前端获取数据。 三、vis.js 绘图 四、 echarts绘图 neo4j是什么？ ...
vue.js从入门到精通
03-27
vue.js从入门到精通，想要学习vue的可以下载看看，视频资源，真实可靠
Vue.js 从懵逼到入门
01-30
本人一点积分都没了，拿出来一些宝贝，换点积分，希望对大家有用
vue.js前端开发技术读书笔记一：vue入门
weixin_51188461的博客
12-02 1015
文章目录一.vue入门1.什么是vue及vue特点？2.vue在前端开发中的优势？3.vue的下载及如何引入并应用？4.实例化vue对象，数据和方法？5.数据如何挂载到DOM页面？6.vue中的MVVM模式？7.vue开发工具 为了方便打字，所有Vue统一为小写vue 一.vue入门 ❤️❤️❤️什么是vue及vue特点？vue在前端开发中的优势？vue的下载及如何引入并应用？实例化vue对象，数据和方法？数据如何挂载到DOM页面？vue中的MVVM模式？ 1.什么是vue及vue特点？ 1）什么是vue
Vue从入门到精通
瑞萌萌会跳折翼舞的博客
08-09 1740
1.邂逅Vue.js 1.1 认识Vue.js 1.1.1 为什么学习Vue.js 对原有的项目使用Vue进行重构。 新项目决定使用Vue的技术栈。 招聘前端的需求中，10个有8个都对Vue有或多或少的要求。 Vue.js目前是前端必备的一个技能。 1.1.2 简单认识一下Vue.js Vue(读音/vju:/，类似于view)，不要读错。 Vue是一个渐进式的框架，什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vu
Vue.js从入门到精通（全），爆肝十一万字，“建议收藏”，国庆福利！！！
陈新科的博客
09-29 6500
内容很饱满，过程可能会枯燥，愿你经过风雨，过后能成为不一样的烟火????，为了奖励看到最后的小伙伴，博主为你们准备了礼物哦 目录 开始使用Vue el $mount data 插值表达式 vue的响应式-1 vm.$el vm.$nextTick & Vue.nextTick vue的响应式-2 扩展_剖析Vue响应式原理 Vue相关指令 v-pre v-cloak v-once v-text v-html 条件渲染 v-if v-else v-else-i
vue入门到精通
weixin_51517351的博客
08-01 808
Vue笔记（详细 *实时更新）一. Vue基础邂逅Vue.js初识Vue.jsVue安装方式二. Vue基础语法vue基本框架搭建el$mountdata插值表达式vue的响应式一. Vue基础二级目录三级目录 一. Vue基础 邂逅Vue.js 初识Vue.js Vue.js官网: https://www.vuejs.org. Vue是一个渐进式 的框架 渐进式意味着你可以将Vue作为你应用的一部分嵌套其中 Vue的核心库以及其生态系统 Core + Vue-router + Vuex Vue特点和Web
Vue.js从入门到精通
weixin_56580267的博客
12-14 2087
.stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件监听器使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时回调 .once 事件只触发一次
VUEjs从入门到精通
fanfangyu的博客
02-01 676
编码，让编码人员无需直接操作DOM，提高开发效率。模式，提高代码复用率、且让代码更好维护。Vue可以自底向上逐层的应用。JavaScript框架。，尽量复用DOM节点。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值