Vue.js尚硅谷视频学习笔记(第一章：Vue 核心)

article/2025/5/10 14:25:31

第1 章：Vue 核心

1.1. Vue 的基本认识

1.1.1. 官网

  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/

1.1.2. 介绍描述

  1. 渐进式JavaScript 框架
  2. 作者: 尤雨溪(一位华裔前Google 工程师)
  3. 作用: 动态构建用户界面

1.1.3. Vue 的特点

  1. 遵循MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注UI, 可以轻松引入vue 插件或其它第三库开发项目

1.1.4. 与其它前端JS 框架的关联

  1. 借鉴angular 的模板和数据绑定技术
  2. 借鉴react 的组件化和虚拟DOM 技术

1.1.5. Vue 扩展插件

  1. vue-cli: vue 脚手架
  2. vue-resource(axios): ajax 请求
  3. vue-router: 路由
  4. vuex: 状态管理
  5. vue-lazyload: 图片懒加载
  6. vue-scroller: 页面滑动相关
  7. mint-ui: 基于vue 的UI 组件库(移动端)
  8. element-ui: 基于vue 的UI 组件库(PC 端)

1.2. Vue 的基本使用

理解Vue的MVVM模式：

M：model，模型，数据对象（data）
V：view，视图，模板页面
VM：viewModel：视图模型（Vue的实例）

在这里插入图片描述
声明式开发：Vue。
命令式开发：jQuery。

1.3. 模板语法

1. 模板的理解

动态的html页面
包含了一些JS语法代码
双大括号表达式
指令(以v-开头的自定义标签属性)

2. 双大括号表达式

语法: {{exp}} 或 {{{exp}}}
功能: 向页面输出数据
可以调用对象的方法

附加：两个属性：v-text和v-html，相当于textContent和innerHTML。后者可以识别链接样式的字符串。

3. 指令一: 强制数据绑定

功能: 指定变化的属性值
完整写法:
v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行
简洁写法:
:xxx=‘yyy’

4. 指令二: 绑定事件监听

功能: 绑定指定事件名的回调函数
完整写法:
v-on:click=‘xxx’
v-on:keyup=‘xxx(参数)’
v-on:keyup.enter=‘xxx’
简洁写法:
@keyup=‘xxx’
@keyup.enter=‘xxx’

编码

<div id="app"><h2>1. 双大括号表达式</h2><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p><h2>2. 指令一: 强制数据绑定</h2><a href="url">访问指定站点</a><br><!--不能使用--><a v-bind:href="url">访问指定站点2</a><br><a :href="url">访问指定站点3</a><br><h2>3. 指令二: 绑定事件监听</h2><button v-on:click="handleClick">点我</button><button @click="handleClick">点我2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#app',data: {// data 的所有属性都会成功vm 对象的属性, 而模板页面中可以直接访问msg: 'NBA I Love This Game!',url: 'http://www.baidu.com'},methods: {handleClick () {alert('处理点击')}}})
</script>

1.4. 计算属性和监视

计算属性

  1. 在computed 属性对象中定义计算属性的方法
  2. 在页面中使用{{方法名}}来显示计算的结果

监视属性

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

计算属性高级

  1. 通过getter/setter 实现对属性数据的显示和监视

getter：属性的get方法
setter：属性的set方法

  1. 计算属性存在缓存, 多次读取只执行一次getter 计算（效率优化）

回调函数满足的三个条件：

  1. 你定义的
  2. 你没有调用
  3. 但最终它执行了

1.5. class 与style 绑定

理解

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

class 绑定

  1. :class=‘xxx’
  2. 表达式是字符串: ‘classA’
  3. 表达式是对象: {classA:isA, classB: isB}
  4. 表达式是数组: [‘classA’, ‘classB’]

style 绑定

  1. :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
  2. 其中activeColor/fontSize 是data 属性

1.6. 条件渲染

条件渲染指令

  1. v-if 与v-else
  2. v-show

比较v-if 与v-show

  1. 如果需要频繁切换v-show 较好
  2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

v-show是将display设置为none，而v-if是创建DOM元素后插入，性能不一样。

1.7. 列表渲染

  1. 列表显示指令
    数组: v-for / index
    对象: v-for / key
  2. 列表的更新显示
    删除item
    替换item
  3. 列表的高级处理
    列表过滤
    列表排序

注：
1.vue本身只是监视了data里面数组对象的变化，并没有监视数组内部数据的变化。
2.vue重写了数组中的一系列改变数组内部数据的方法，对其进行包装（1.调用原生，2.更新界面）。——>数组内部改变，界面自动变化。
在这里插入图片描述

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

1.8. 事件处理

绑定监听

  1. v-on:xxx=“fun”
  2. @xxx=“fun”
  3. @xxx=“fun(参数)”
  4. 默认事件形参: event
  5. 隐含属性对象: $event

事件修饰符

  1. .prevent : 阻止事件的默认行为event.preventDefault()
  2. .stop : 停止事件冒泡event.stopPropagation()

按键修饰符

  1. .keycode : 操作的是某个keycode 值的键
  2. .keyName : 操作的某个按键名的键(少部分)

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

1.9. 表单输入绑定

使用v-model 对表单数据自动收集

  1. text/textarea
  2. checkbox
  3. radio
  4. select

1.10. Vue 实例生命周期

生命周期流程图

在这里插入图片描述

vue 生命周期分析

  1. 初始化显示
  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()
  1. 更新状态: this.xxx = value
  • beforeUpdate()
  • updated()
  1. 销毁vue 实例: vm.$destory()
  • beforeDestory()
  • destoryed()

常用的生命周期方法

  1. created()/mounted(): 发送ajax 请求, 启动定时器等异步任务
  2. beforeDestory(): 做收尾工作, 如: 清除定时器

1.11. 过渡&动画

vue 动画的理解

  1. 操作css 的trasition 或animation
  2. vue 会给目标元素添加/移除特定的class
  3. 过渡的相关类名
    xxx-enter-active: 指定显示的transition
    xxx-leave-active: 指定隐藏的transition
    xxx-enter/xxx-leave-to: 指定隐藏时的样式
    在这里插入图片描述

基本过渡动画的编码

  1. 在目标元素外包裹<transition name="xxx">
  2. 定义class 样式
    指定过渡样式: transition
    指定隐藏时的样式: opacity/其它

1.12. 过滤器

理解过滤器

  1. 功能: 对要显示的数据进行特定格式化后再显示
  2. 注意: 并没有改变原本的数据, 可是产生新的对应的数据

定义和使用过滤器

  1. 定义过滤器
    Vue.filter(filterName, function(value[,arg1,arg2,...]){// 进行一定的数据处理return newValue})
  1. 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

1.13. 内置指令与自定义指令

常用内置指令

  1. v:text : 更新元素的textContent
  2. v-html : 更新元素的innerHTML
  3. v-if : 如果为true, 当前标签才会输出到页面
  4. v-else: 如果为false, 当前标签才会输出到页面
  5. v-show : 通过控制display 样式来控制显示/隐藏
  6. v-for : 遍历数组/对象
  7. v-on : 绑定事件监听, 一般简写为@
  8. v-bind : 强制绑定解析表达式, 可以省略v-bind
  9. v-model : 双向数据绑定
  10. ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
  11. v-cloak : 防止闪现, 与css 配合: [v-cloak] { display: none }

自定义指令

  1. 注册全局指令
Vue.directive('my-directive', function(el, binding){el.innerHTML = binding.value.toupperCase()
})

el: 指令所在的标签对象
binding: 包含指令相关数据的容器对象

  1. 注册局部指令
directives : {'my-directive' : {bind (el, binding) {el.innerHTML = binding.value.toupperCase()}}
}
  1. 使用指令
v-my-directive='xxx'

自定义插件

说明

  1. Vue 插件是一个包含install 方法的对象
  2. 通过install 方法给Vue 或Vue 实例添加方法, 定义全局指令等

编码

/**
* 自定义Vue 插件
*/
(function () {const MyPlugin = {}MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {alert('Vue 函数对象方法执行')}// 2. 添加全局资源Vue.directive('my-directive', function (el, binding) {el.innerHTML = "MyPlugin my-directive " + binding.value})// 3. 添加实例方法Vue.prototype.$myMethod = function () {alert('vue 实例对象方法执行')}}window.MyPlugin = MyPlugin
})()

页面使用插件

<div id="demo">
<!--使用自定义指令-->
<p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">//使用自定义插件Vue.use(MyPlugin)var vm = new Vue({el: '#demo',data: {msg: 'atguigu'}})//调用自定义的静态方法Vue.myGlobalMethod()//调用自定义的对象方法vm.$myMethod()
</script>

注意：
1.匿名函数自调用。
2.实例方法放原型上面，一般函数名前面有个$。
3.插件库应该在Vuejs下面引入。

内容大部分来自尚硅谷课件


http://chatgpt.dhexx.cn/article/TglAUWMb.shtml

相关文章

尚硅谷Kylin视频教程发布！

尚硅谷Kylin视频教程发布！

Atlas视频教程发布后&#xff0c;有谷粉说&#xff1a; 就这&#xff1f;我两天就学完了。 垒哥小浣熊脸&#xff0c;不服又很无奈&#xff1a; 人生路还很长&#xff0c;年轻人别太狂。 我们尚硅谷的大数据学科&#xff0c; 不能给生产队的驴和老母猪丢脸&#xff01; 来…
阅读更多...
「尚硅谷与腾讯云官方合作」硅谷课堂项目视频发布

「尚硅谷与腾讯云官方合作」硅谷课堂项目视频发布

硅谷课堂是尚硅谷与腾讯云官方合作的项目&#xff0c;是一款基于微信公众号B2C模式的在线学习平台。项目包含后台系统和微信公众号部分&#xff0c;采用前后端分离开发模式。 本套项目教程针对有一定开发经验的Java程序员精心打造&#xff0c;项目技术涵盖微服务、微信公众号、…
阅读更多...
javascript全笔记-基础版（尚硅谷视频李立超老师）

javascript全笔记-基础版（尚硅谷视频李立超老师）

目录 一.JavaScript简介 1.1 JS简介 1.2 JS的HelloWorld 1.3 JS代码编写的位置 二.JS的基础语法 2.1 JS的基本语法 2.2 字面量与变量 2.3 标识符 2.4 数据类型 2.4.1 typeof运算符 2.4.2 String 2.4.3 Number 2.4.4 Boolean 2.4.5Null 2.4.6Undefined 2.5 强制…
阅读更多...
尚硅谷前端视频总结（二）

尚硅谷前端视频总结（二）

尚硅谷前端视频总结&#xff08;二&#xff09; 原文链接 动画animation CSS animation 属性是 animation-name&#xff0c;animation-duration, animation-timing-function&#xff0c;animation-delay&#xff0c;animation-iteration-count&#xff0c;animation-directi…
阅读更多...
Spring Cloud 尚硅谷阳哥学习笔记，每一行代码均有解释，适合快速上手，并配合尚硅谷视频食用

Spring Cloud 尚硅谷阳哥学习笔记，每一行代码均有解释，适合快速上手，并配合尚硅谷视频食用

Spring Cloud ATenOne ❤️ 一、正常 SpringBoot 环境的测试 1、版本的选择 SpringCloud Hoxton.SR1SpringBoot 2.2.2.RELEASESpringCloud Alibaba 2.1.0.RELEASEJava 8Maven 3.5Mysql 8.0.25 父 pom.xml 如下 <?xml version"1.0" encoding"UTF-8&quo…
阅读更多...
vue3快速上手（尚硅谷视频笔记）

vue3快速上手（尚硅谷视频笔记）

Vue3快速上手 1.Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;https://github.com/vuejs/vue-next/releas…
阅读更多...
Linux全笔记（尚硅谷视频）

Linux全笔记（尚硅谷视频）

Linux是什么 是一个操作系统&#xff08;OS&#xff09; 李纳斯托瓦兹 Linux 能运行主要的 UNIX 工具软件、应用程序和网络协议。它支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想&#xff0c;是一个性能稳定的多用户网络操作系统。 比较WindowsLinux界…
阅读更多...
软件开发介绍-尚硅谷视频学习随记

软件开发介绍-尚硅谷视频学习随记

目录 软件开发相关概念 Java相关介绍 环境配置 常用dos命令 常用快捷键 软件开发相关概念 1.软件&#xff1a;一系列按照特定顺序组织的计算机数据和指令集合&#xff0c;进而构成的一种工具。分为系统软件&#xff08;操作系统&#xff09;和应用软件。 应用程序算法数据…
阅读更多...
NodeJs（尚硅谷视频学习笔记）

NodeJs（尚硅谷视频学习笔记）

内容来自尚硅谷Nodejs学习课件以及自己添加 课前预热&#xff1a;CMD基本知识 1.命令行窗口&#xff08;小黑屏&#xff09;、CMD窗口、终端、shell - 开始菜单 --> 运行 --> CMD --> 回车 - Win R --> CMD --> 回车 - 常用的指令dir 列出当前目录下的所…
阅读更多...
前端项目-尚品会-来自b站尚硅谷视频

前端项目-尚品会-来自b站尚硅谷视频

目录 前言gulishop-client---vue2项目目录分页器 前言 重温Vue&#xff0c;打开之前的项目文件夹&#xff0c;陌生又熟悉… 3月份左右看的项目视频&#xff0c;现在已经忘得差不多了…甚至记不清自己是看的哪个视频…刚刚才想起来自己并没有看Vue的视频教程&#xff0c;当初直…
阅读更多...
Linux的使用_尚硅谷视频学习笔记

Linux的使用_尚硅谷视频学习笔记

到达底部 文章目录 Linux的使用参考 第 1 章 Linux 开山篇1.1 本套 Linux 课程的内容介绍1.2 Linux 的学习方向1.3 Linux 的应用领域1.3.1个人桌面应用领域1.3.2服务器应用领域1.3.3嵌入式应用领域 1.4 学习 Linux 的阶段&#xff08;高手进阶过程&#xff09;1.5 Linux 的学习…
阅读更多...
【javaScript】学完js基础，顺便把js高级语法学了（尚硅谷视频学习笔记）

【javaScript】学完js基础，顺便把js高级语法学了（尚硅谷视频学习笔记）

文章目录 【1】基本总结深入一、什么是数据1、数据类型基本&#xff08;值&#xff09;类型对象&#xff08;引用&#xff09;类型 2、判断相关问题 二、什么是内存1、什么是数据2、什么是内存&#xff1f;3、什么是变量4、内存、数据、变量三者之间的关系相关问题1、问题&…
阅读更多...
Mybatis-plus (教程来自尚硅谷视频)

Mybatis-plus (教程来自尚硅谷视频)

1.什么是Mybatis-plus? 官网地址&#xff1a;MyBatis-Plus 1.1MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 Mybatis-plus的愿景成为Mybatis的最好拍档&a…
阅读更多...
JavaSE(尚硅谷视频学习笔记）

JavaSE(尚硅谷视频学习笔记）

文章目录 Java基础编程Java语言概述Java语言简述1.基础图解2.常识3.计算机语言的发展迭代4.Java语言版本迭代概述5. Java语言应用的领域6.Java语言的特点 开发环境的搭建1. JDK、JRE、JVM的关系2. JDK的下载安装 注释与API文档1. 注释Comment2. Java API 文档3. 良好的编程风格…
阅读更多...
尚硅谷Java入门视频教程（一）编程入门

尚硅谷Java入门视频教程（一）编程入门

冯诺依曼体系结构&#xff1a;中央处理器(CPU)(寄存器、算术逻辑单元、控制单元)、内存(主存)、存储设备(内存、硬盘)、输入输出设(外设、显示器)、通信设备(网卡等)。通过总线连接&#xff0c;传输数据。 中央处理器&#xff1a;(Central Processing Unit CPU)&#xff1a;获…
阅读更多...
尚硅谷Java入门视频教程第五章——面向对象编程（中）

尚硅谷Java入门视频教程第五章——面向对象编程（中）

尚硅谷Java入门视频教程第五章——面向对象编程&#xff08;中&#xff09; 第5章&#xff1a;面向对象编程(中)5.1 面向对象特征之二&#xff1a;继承性5.2 方法的重写&#xff08;override/overwrite&#xff09;5.3 四种访问权限修饰符5.4 关键字&#xff1a;super5.5 子类对…
阅读更多...
“为了对电脑进行保护，已经阻止此应用。”

“为了对电脑进行保护，已经阻止此应用。”

环境&#xff1a;Win10专业版 解决方法&#xff1a;
阅读更多...
win10运行安装软件程序提示“为了对电脑进行保护，已经阻止此应用” 有效解决方法记录

win10运行安装软件程序提示“为了对电脑进行保护，已经阻止此应用” 有效解决方法记录

问题&#xff1a; 解决&#xff1a; 在程序文件上&#xff0c;按住【shift】键&#xff0c;同时点击鼠标右键→【复制为路径】&#xff0c;打开C:\Windows\System32&#xff0c;找到cmd.exe&#xff0c;右键→【以管理员身份运行】&#xff0c;在打开的界面将路径粘贴&#xff…
阅读更多...
【windows】Windows10为了对电脑进行保护，已经阻止此应用解决方案

【windows】Windows10为了对电脑进行保护，已经阻止此应用解决方案

winr打开运行输入“gpedit.msc”,打开“本地组策略编辑器”&#xff0c;依次点开&#xff1a; 1.计算机配置 2.Windows设置 3.安全设置 4.本地策略 5.安全选项 在右边框内找到并双击“用户账户控制&#xff1a;以管理员批准模式运行所有管理员” 在打开的对话框中选择“…
阅读更多...
为了对电脑进行保护，已经阻止此应用 解决办法

为了对电脑进行保护，已经阻止此应用 解决办法

上面就是问题&#xff0c;这个是我在安装百度硬盘搜索的时候出现的&#xff0c;不知道啥原因。在网上找了一堆的解决方法都没有成功&#xff0c;比如修改本地策略&#xff0c;修改安全级别等等。最后发现一个人的方法有效分享给大家&#xff1a; 1.用管理员身份执行cmd 2.复制该…
阅读更多...
推荐文章

Copyright @ 2022~2023