Vue入门（一）

最新推荐文章于 2024-08-15 12:28:07 发布
最新推荐文章于 2024-08-15 12:28:07 发布
阅读量641 收藏 27
点赞数 14
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44793245/article/details/135432640
版权

文章目录

一、Vue是什么？

一套用于构建用户界面的渐进式JavaScript框架
在这里插入图片描述

Vue开发作者历程介绍

在这里插入图片描述

Vue特点

1、采用组件化模式，提高代码复用率，且让代码更好维护
2、声明式编码，让编码人员无需直接操作dom，提高开发效率
在这里插入图片描述
3、使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点

二、Vue入门使用

Vue官网地址

1、想让vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2、root容器中的代码被称为【Vue模版】
3、vue实例和容器是一一对应的
4、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性数据
5、一旦data中的数据发生改变，页面中的数据也会发生改变

三、Vue的模版语法

插值语法

功能：用于解析标签体内容
在这里插入图片描述

指令语法

功能：用于解析标签（包括标签属性，标签体内容，绑定事件等）
Vue中有很多指令，且形式都是：v-???
在这里插入图片描述

四、Vue的数据绑定

单向数据绑定

单向绑定（v-bind）数据只能从data流向页面
在这里插入图片描述

双向数据绑定

双向绑定（v-model）数据不仅能从data流向页面还是从页面流向data中 但双向绑定只能用在表单类元素上（input、select等）
在这里插入图片描述

el和data的两种写法

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

MVVM模型

1、M：模型（model）：对应data中的数据
2、V：视图（View）模版
3、VM：视图模型（viewModel）：Vue实例对象

在这里插入图片描述

五、数据代理

何为数据代理
通过一个对象代理对另一个对象中的属性操作 读/写

vue中的数据代理
通过defineProperty进行数据代理

在这里插入图片描述

getter和setter
在这里插入图片描述

六、事件处理

在这里插入图片描述

事件修饰符

修饰符可以连着写
既阻止默认事件又阻止冒泡事件
在这里插入图片描述

在这里插入图片描述

键盘事件

在这里插入图片描述

七、计算属性

计算属性无法进行异步任务比如定时器
在这里插入图片描述
计算属性完整写法
在这里插入图片描述
计算属性简写方式
在这里插入图片描述

八、监视属性

1、通过vm对象的$watch()或watch配置来监视指定的属性
2、当属性发生变化时，回调函数自动调用，在函数内部进行计算

属性监视，方式一
在这里插入图片描述
属性监视，方式二
在这里插入图片描述
属性监视，方式三，简写形式
在这里插入图片描述

深度监视

配置属性为deep
方便监视多级结构中某个属性的变化
在这里插入图片描述
在这里插入图片描述

计算属性与监视属性配置的区别

computed与watch的区别
1、computed可以完成的事情watch都能完成
2、watch可以完成的事情，computed不一定可以完成，比如进行异步操作，定时器异步函数等
重要的两个原则
1、所有被vue管理的函数，最好写成普通函数，这样this才会指向vue实例对象或组件实例对象
2、所有不被vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm 或组件实例对象

九、class与style绑定

1、在应用界面中，，某些元素的样式是变化的
2、class/style绑定就是专门用来实现动态样式效果的技术

在这里插入图片描述

十、条件渲染

条件渲染指令

v-if 和v-else

比较v-if 与 v-show

如果需要频繁的切换 v-show较好 当条件不成立时，v-if所有节点都不会被解析（项目中使用）

在这里插入图片描述

十一、列表渲染

列表渲染指令

v-for
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

列表过滤

监视器的写法
在这里插入图片描述
计算属性写法
在这里插入图片描述

列表排序

在这里插入图片描述

表单收集

在这里插入图片描述

过滤器

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

十二、内置指令说明

指令：
	v-bind  ：单向绑定解析表达式，可简写为 :xxx
	v-model ：双向数据绑定
	v-for   ：遍历数组/对象/字符串
	v-on    ：绑定事件监听，可简写为@
	v-if    ：条件渲染(动态控制节点是否存在)
	v-else  ：条件渲染(动态控制节点是否存在)
	v-show  ：条件渲染 (动态控制节点是否展示)
	v-text指令:
		1.作用:向其所在的节点中渲染文本内容
		2.与插值语法的区别: v-text会替换掉节点中的内容，{{xx}}则不会
失落的IT流浪汉
关注
  • 14
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 入门
x94410891的博客
07-02 1369
vue3 Vue是一套用于构建用户界面的渐进式框架。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。目前最新版本是Vue3.x。 Vue3 支持 vue2 的大多数特性 更好的支持 Typescript 性能提升 打包大小减少 41% 初次渲染快 55%, 更新渲染快 133% 内存减少 54% 使用 Proxy 代替 define
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue学习-Vue入门
weixin_59357453的博客
04-02 4323
这是一篇vue学习记录
vue入门示例（一）
heroking
08-21 3万+
为了让广大后端人员更快的理解上手vue，我们先不适用ide和vue-cli等工具，先采用手动引入js的方式，从一个最简单的例子开始，循序渐进 1. 到官网下下vue.js vue官网 我们这里使用开发版，它包含了许多警告提示信息 新建一个文件夹把vue.js放进去，然后创建一个html文件命名为index.html 2. 第一个hello world 编辑index的内容 <!DOCT...
vue基础入门
weixin_58470558的博客
05-13 6592
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
vue入门教程（一）
yfy的博客
12-03 8493
1. vue简介 1.1 vue是什么 官网：https://cn.vuejs.org/ Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 1.2 vue的特点 1) 遵循 MVVM 模式 2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发 .
Vue入门——初步了解
秋书一叶的博客
11-25 2469
Vue的简单介绍及快速入门
Vue入门教程
tttalk的博客
12-23 5007
一、Vue介绍 简介：Vue.js（ /vjuː/） 是一套构建用户界面的渐进式框架, Vue只关注视图层， 采用自底向上增量开发的设计。 特点：响应式编程、组件化。 优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 注：这里是基于Vue2的教程，现在已经出了Vue3,但是还没完全普及，并且Vue3基本兼容Vue2，所以可以先学Vue2，再去了解Vue3的更新，后面会更新这部分内容。 二、安装 一般有三种方式：本地下载、CDN和NPM(推荐)。 1.本地下载地址：
Vue快速入门
梵高的向日葵
11-05 8235
文章目录一、Vue快速入门1、第一个Vue程序2、Vue基本语法2.1、if判断2.4、事件双向绑定3、Vue组件4、Axios异步通信5、计算属性6、插槽slot7、自定义事件内容分发8、创建vue项目二、Vue实战1、项目创建2、项目开发未完结 一、Vue快速入门 1、第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
vue小白入门教程
08-27
本篇文章为初学者提供了一个详细的 Vue 入门教程，介绍了 Vue 的基本概念、环境搭建、第一个 Vue 应用程序、生命周期等知识点。 一、Vue 是什么 Vue 是一套用于构建用户界面的渐进式框架，压缩后仅有 17kb。它提供...
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 349
【代码】Vue项目-Table添加Form表单校验。
el-checkbox 状态不更新
bao
08-13 292
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
element table 判断当前行是否展开和只展开一行
最新发布
m0_68716504的博客
08-15 382
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
vue 实现上浮气泡效果
m0_68964998的博客
08-13 268
1.用 li 来做每个气泡。
vue 入门 demo
07-20
Vue.js入门示例通常涉及创建一个简单的单页应用，这里有一个基础的Vue组件Hello World的例子： 首先，你需要安装Vue CLI（命令行工具）来创建新的项目。如果你还没有安装，可以这样做： ```bash npm install -g @vue/cli ``` 然后创建一个新的Vue应用： ```bash vue create my-vue-app ``` 接下来，进入项目目录并启动服务： ```bash cd my-vue-app npm run serve ``` 现在打开浏览器访问`http://localhost:8080`，你会看到一个空白页面。我们来编写一个基本的Vue组件： 在`src/App.vue`文件中添加以下内容： ```html <template> <div id="app"> <h1>{{ message }}</h1> <button v-on:click="sayHello">点击我</button> </div> </template> <script> export default { data() { return { message: '你好，Vue世界！' }; }, methods: { sayHello() { this.message = 'Hello Vue!'; } } }; </script> <style> #app { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; } </style> ``` 在这个例子中，我们定义了一个数据属性`message`，并在模板中显示。当用户点击按钮时，`sayHello`方法会被触发，更新`message`的值。 这是最基本的Vue入门教程中的步骤，通过实践，你可以学习到更多关于Vue指令如`v-on:click`、计算属性、组件化等知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值