Vue学习重点笔记整理

最新推荐文章于 2024-08-26 13:26:44 发布
最新推荐文章于 2024-08-26 13:26:44 发布
阅读量185 收藏
点赞数
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46365534/article/details/115371206
版权
本文是关于Vue.js的学习笔记，涵盖了Vue的基础知识，包括Vue实例的创建、数据绑定、事件处理、条件渲染和列表渲染。通过计数器、图片切换等实战案例加深理解，还介绍了如何结合axios进行网络应用开发。
摘要由CSDN通过智能技术生成

VueStudy

所需知识：HTML、CSS、JavaScript、AJAX等相关基础知识

Vue简介：①是一个JavaScript框架②简化Dom操作③响应式数据驱动

Vue官网：https://cn.vuejs.org

第一个Vue选择器

  • 导入开发版本的Vue.js
  • 创建Vue实例对象，设置el属性和data属性
  • 使用简洁的模板语法把数据渲染到页面上
el：挂载点
  • Vue实例的作用范围

Vue会管理el选项命中的元素及其内部的后代元素

  • 是否可以使用其他选择器

可以使用其他的选择器（如class、标签选择器），但建议使用ID选择器

  • 是否可以设置其他的dom元素

可以使用其他的双标签，不能使用HTML和BODY

data：数据对象
  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂数据类型时，遵守js的语法即可

Vue的本地应用

内容绑定，事件绑定

v-text
  • 设置标签的内容（textContent)
  • 默认写法会替换全部内容，使用**差值表达式{ {}}**可以替换指定内容
  • 内部支持写表达式
v-html
  • 设置标签的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么，只会解析为文本
  • 解析文本使用v-text，需要解析html结构使用v-html
v-on基础
  • 为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在method属性中
  • 方法内部通过this关键字可以访问定义在data中数据
实战操作：计数器效果

思路： 使用@click绑定点击事件；方法定义在methods里面；数据显示在span内部；使用v-text指令渲染上去（使用简写 { {}} ）；数据定义在data中

<div class="input-num">
    <button @click> - </button>
    <span> {
  {}} </span>
    <button @click> + </button>
</div>    

var app = new Vue({
el:""#app",
data:{
},
methods:{
}
});

步骤

  • data中定义数据：比如num
  • methods中添加两个方法：比如add（递增），sub（递减）
  • 使用v-text将num设置给span标签
  • 使用v-on将add，sub分别绑定给+，-按钮
  • 累加逻辑：小于10累加，否则提示
  • 递减的逻辑：大于0递减，否则提示

代码

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,
        initial-Scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <
最低0.47元/天 解锁文章
小明不想学习
关注
Vue2.0快速上手-重要知识点罗列-系列一
JackieDYH的博客
07-31 1391
Vue2.0快速上手 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .giti
Vue 学习笔记（全）
qq_47284422的博客
08-04 898
Vue入门 简述 ​ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。 MVVM模式的实现者 Model：模型层，在这里表现 JavaScript 对象 View：视图层，在这里表示 DO
vue知识点归纳与总结(笔记上部分)
weixin_42365757的博客
05-30 606
前言 当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门。如有不对，或不足的地方，也请各位大神，指出来，学习学习。 一 Vue 基础 1.模板语法 (1)插值 a.文本 {{}} b.纯HTML v-html ，防止XSS,csrf（ (1) 前端过滤 (2) 后台转义(< > &lt
vue知识归纳最近复习笔记
m0_68271787的博客
07-04 922
在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
vue整理笔记
weixin_49964559的博客
10-10 416
什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 vue生命周期的作用是什么？ 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 vue生命周期总共有几个阶段？ 它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。 第一次页面加载会触发哪几个钩子？ 会触发 下面这几个beforeCreate, created, be
vue 学习相关笔记大全
qq_52693197的博客
02-20 1483
u2112 与三阶段无关 框架是什么？ 封装与业务（功能）无关的代码块 简化了我们对于某些功能的代码量 但是我们需要记一套当前框架的语法 淘宝镜像 npm的服务器在国外 咱们国内下载的时候很慢 淘宝就自建了一个服务器 每个10分钟 就把npm的服务器里面所有的内容拉取一次 我们就可以通过淘宝这个国内的服务器来下载 速度更高 npm install -g cnpm --registry=https://registry.npm.taobao.org 如果下载的时候报错 1.把你的网线拔了 用
Vue3.0学习笔记
12-09
阅读官方文档 英文阅读起来虽然有些吃力 但是翻译过来还是很容易让人理解 重点整理了和vue2.0文档不同的地方
Vue——学习笔记整理（继续整理中）
Thaley的博客
01-19 1219
整合了一下黑马vue入门以及尚硅谷Vue2&Vue3全家桶的学习笔记
Vue 学习笔记（4）Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
2401_84435739的博客
04-29 703
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记（八）
weixin_44566194的博客
03-01 1713
本文整理了B站尚硅谷Vue2.0 + Vue3.0 全家桶入门到精通教程视频关于 Vue 3.0部分的知识课程笔记，包括：Vue3 简介、创建 Vue3.0 工程、常用 Composition API、 Composition API 的优势、新的组件以及其他改变等。
Vue学习知识笔记整理
KuZz_的博客
06-14 151
vue学习后的知识整理
Vue学习笔记汇总（基础）
qq_22865989的博客
06-29 320
Vue学习
Vue的学习重点
tianhuiman的博客
07-08 485
1. 原理性： vue数据驱动： 数据更新，视图更新 深入响应式原理 双向数据绑定原理 Vue.set/ this.$set ----- vue中不响应情况 数组的下标 和 length 2. 指令有哪些？ v-on 简写：‘@ ’， 用法：绑定事件 v-blind 简写：‘：’，动态地绑定一个或多个特性，或一个组件 prop 到表达式 v-model ...
Vue知识笔记
Mikeylllllll的博客
03-02 196
vue相关知识
Vue学习笔记总结
个人学习博客，不足之处，还望不吝赐教！
10-21 757
vue、vue学习教程、vue教程、vue3
Vue学习笔记
-
04-17 1295
Vue 学习目标 前端知识体系 HTML(页面的结构)、CSS(表现层)、JavaScript(行为) HTML 就不说了。 CSS CSS层叠样式是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具 任何语法支持，它主要缺陷如下： 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式夏用机制，使得逻辑上相关的属性值...
Vue学习笔记（一）
最新发布
kaikai_sk的博客
08-26 1050
vue的学习笔记
vue学习笔记汇总（持续更新）
weixin_54327001的博客
11-26 499
v-bind动态绑定style（对象）？v-bind动态绑定class数组语法？计算属性与methods的对比？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值