学习Vue

最新推荐文章于 2022-03-29 22:52:00 发布
最新推荐文章于 2022-03-29 22:52:00 发布
阅读量251 收藏 5
点赞数
分类专栏： vue 笔记 文章标签： vue javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43247904/article/details/110497619
版权

学Vue1

Vue简介

  • JavaScript框架
  • 简化Dom操作
  • 响应式数据驱动

Vue基础

04.el挂载点

el的作用：
el是用来设置Vue实例挂载（管理）的元素

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

是否可以使用其他选择器
可以是类选择器，id选择器，还可以是标签选择器，一般建议用id选择器，因为它是唯一的

是否可以设置其他dom元素？
可以使用其他双标签，不能使用html和body

05.data数据对象

  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型的数据时，遵守js语法即可（如对象的点语法，数组的索引语法）
    上课代码如下在这里插入图片描述
    网页结果：在这里插入图片描述

本地应用

06.介绍

  • 1.内容绑定，事件绑定
  • 2.显示切换，属性绑定
  • 3.列表循环，表单元素绑定

学习目标：

  • 通过vue实现常见的网页效果
  • 学习vue指令，以案例巩固知识点
  • vue指令指的是以v-开头的一组特殊语法

07.v-test指令

  • v-test:设置标签的文本值
  • 默认写法会替换全部内容，使用插值表达式{{ }}可以替换指定内容
  • 内部支持写表达式
    在这里插入图片描述
    在这里插入图片描述

08.v-html指令

  • 作用：设置标签的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么，只会解析为文本
  • 解析文本内容使用v-text,需要解析html结构使用v-html
    在这里插入图片描述
    在这里插入图片描述

v-on指令

  • 为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中的数据

在这里插入图片描述
在这里插入图片描述
点击“西兰花炒蛋”：
在这里插入图片描述

10.计数器

  • 创建vue示例时：el(挂载点)，data（数据），methods(方法)
  • v-on指令的作用是绑定事件，简写作@
  • 方法中通过this关键字获取data中的数据
  • v-text指令的作用是设置元素的文本值，简写为{{}}
  • v-html指令的作用是设置元素的innerHTML
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

11.v-show指令

突发报错：控制台不停报错’Vue’ is not defined
刚才宿舍突然跳闸大概停了两分钟电，然后原本能用的网页突然就没有动态效果了，还出现上面的报错，然后我发现是因为网断了，联网之后又可以了！！！

  • v-show指令的作用：根据真假切换元素的显示状态
  • 原理是修改display，实现显示隐藏
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，值为false元素隐藏
  • 数据改变之后，对应元素的显示状态会同步更新

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

12.v-if指令

  • 根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  • 频繁的切换v-show，反之使用v-if，前者的切换消耗小
    在这里插入图片描述
    在这里插入图片描述

13.v-bind

  • 设置元素的属性（比如：src,title,class都写在元素内部）
  • 完整写法：v-bind：属性名
  • 简写的话可以省略v-bind，只保留：属性名
  • 需要动态的增删class建议使用对象的方式

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

14.图片切换

  • 列表数据使用数组保存
  • v-bind指令可以设置元素属性，比如src
  • v-show和v-if都可以切换元素的显示状态，推荐v-show，消耗少

在这里插入图片描述
在这里插入图片描述
图片切换用数组加改src实现！！！
没有放出来的网页图，因为布局的css还没写，出来的网页比较丑

15.v-for指令

  • 作用：根据数据生成列表结构
  • 数组经常和这个指令结合使用
  • 语法是（item,index）in数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的

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

16.v-on指令补充

  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 时间的后面跟上.修饰符可以对事件进行限制
  • .enter可以限制触发的按键为回车（这个修饰符不止这一种，还有很多可以在这里看:[.修饰符](https://cn.vuejs.org/v2/api/#v-on
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

17.v-model指令

  • 获取和设置表单元素的值（双向数据绑定）
  • 绑定的数据会和表单元素相关联，他俩双向绑定，无论修改谁，另外一个都会同步更新

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

18-23.小黑记事本

  • 功能：

    • 新增：
      1.生成列表结构（v-for数组将数组和列表进行关联）
      2.获取用户输入（v-model）
      3.回车新增数据（v-on,enter添加数据）
      在这里插入图片描述
      在这里插入图片描述在这里插入图片描述

    • 删除

      • 点击删除指定内容
      • 数据改变，和数据绑定的元素同步改变
      • 时间的事件的自定义参数
      • splice方法的作用是根据索引删除指定的元素在这里插入图片描述
        在这里插入图片描述
        在这里插入图片描述

    • 统计

      • 统计信息个数（v-text length）
      • 基于数据的开发方式
      • 增删可以同步更新
      • 本质是把数组的长度通过v-text指令渲染到页面上在这里插入图片描述
        在这里插入图片描述

    • 清空

      • 点击清除所有信息（v-on）
      • 本质是清空数组
        在这里插入图片描述
        在这里插入图片描述
        在这里插入图片描述

    • 隐藏

      • 没有数据栏时隐藏最下面的统计栏（v-show v-if数组非空）
        在这里插入图片描述
        在这里插入图片描述
  • 总结：
    • 列表结构可以通过v-for指令结合数据生成
    • v-on结合事件修饰符可以对事件进行限制，比如.enter
    • v-on再绑定事件时可以传递自定义参数
    • 通过v-model可以快速的设置和获取表单元素的值
    • 基于数据的开发方式

网络应用

vue结合网络数据开发应用：

  • axios网络请求库
  • axios+vue
  • 天气预报案例

25.axios基本使用

  • axios必须先导入才能使用
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取响应内容
  • axios官方文档

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

26.axios+vue

  • axios回调函数中的this已经改变，无法访问到data中的数据
  • 把this保存起来，回调函数中直接使用保存的this即可‘
  • 和本地应用最大的区别就是改变了数据来源，一部分用了网络数据
    在这里插入图片描述
    在这里插入图片描述

27-29网络应用-天知道

  • 回车查询
    • 1.按下回车（v-on，.enter）
    • 2.查询数据（axios接口v-model）
    • 3.渲染数据 （v-for数组 that）
    • 应用的逻辑代码建议和页面分离，使用单独的js文件编写
    • axios回调函数中this指向变了，需要额外的保存一份
    • 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
  • 点击查询
    • 1.点击城市（v-on自定义参数）
    • 2.查询数据（this方法直接调用回车查询里面写好的函数）
    • 3.渲染数据
    • 自定义参数可以让代码的复用性更高
    • methods中定义的方法内部，可以通过this关键字点出其他的方法
      在这里插入图片描述
      同时在城市对应的li标签上标好：@click=“changeCity(‘城市名’)”
      在这里插入图片描述
      （因为没有加css样式，所以比较丑嘿嘿嘿）

30.综合应用

要实现的功能：

  • 1.歌曲搜索

    • 1.按下回车（v-on，.enter）
    • 2.查询数据（axios接口v-model）
    • 3.渲染数据 （v-for数组 that）

  • 2.歌曲播放

  • 3.歌曲封面

  • 4.歌曲评论

  • 5.播放动画

  • 6.mv播放

 孜怩儿～
关注
专栏目录
Vue2.0快速上手-重要知识点罗列-系列一
JackieDYH的博客
07-31 1392
Vue2.0快速上手 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .giti
Vue_test
qq_45849161的博客
07-22 1266
vue笔记
Vue指令 关于---v-html_指令 和 v-test_指令 详解
weixin_52915467的博客
12-14 2084
要学会大大方方的表达爱意，爱不是冷冰冰，爱是炙热的，永远都是，笨蛋才会说反话，笨蛋才会把喜欢的人越推越远 一.在讲解 v-test_指令 和v-html_指令 前我么先回顾一些基本指令： v-bind : 单项绑定解析表达式，可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组，对象，字符串 v-on : 绑定事件监听，可简写为@ v-if : 条件渲染（动态控制节点是否存在） v
vue入门test
qq_24822955的博客
06-18 217
Title                                 任务计划列表                         添加任务：                 v-model="todo"         v-on:keyup.enter="addTodo"/>                     {{noCheckL
Vue 指令01——v-test和v-html的使用
qq_57340195的博客
03-29 1049
Vue 指令01——v-test和v-html的使用 V-test指令 作用：替换标签里的文本内容 v-test的实例 <!--程序1--> <!--把h2标签的”1234“，替换成”笑哈哈“--> <div> <h2 v-text="message">1234</h2> </div> <!--程序2...
Vue基本指令
weixin_41086056的博客
10-09 460
1.v-test ：可以解析js的表达式 值为data里的数据，解析data里的数据 简写 —> {{}} 2.v-html 与 v-test 其实是一样的 只不过v-html可以解析html标签 3.v-show： 显示/隐藏 当值为true的时候为显示 false的时候为隐藏 底层原理是操作元素的display属性 4.v-if ： 显示/隐藏 当值为tru...
vue指令大全 不定时更新
qq_38904099的博客
11-28 249
最近在学vue  看到大佬的文章  在此基础上以后不定时补充我认为有用的 附上大佬地址： 作者：klmhly 链接：https://www.jianshu.com/p/c4a87e1b4ef7 1. v-text v-text主要用来更新textContent，可以等同于JS的text属性。 &lt;span v-text="msg"&gt;&lt;/span&gt; 这两者等价： ...
vue自定义指令
q1424966670的博客
06-29 715
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令 下面定义了一个v-test指令绑定数据name <template> <div class="hello"> <div v-test='name'></div> </div> </template> <script> export de...
vue js工具函数
mrzhangdulin的博客
04-29 944
/** Created by jiachenpan on 16/11/18. */ export function parseTime(time, cFormat) { if (arguments.length === 0) { return null } const format = cFormat || ‘{y}-{m}-{d} {h}:{i}:{s}’ let date if (type...
前端自动化测试——vue单元测试vue-test-utils
yujin0213的博客
08-25 1万+
自动化测试分类 单元测试 单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。简单来说，单元就是人为规定的最小的被测功能模块，可能是一个单一函数或方法、一个完整的组件或类。 单元测试是最小巧也是最简单的测试——它们通过隔离单个组件的每一个部分，来在最小工作单元上进行断言。 单元测试侧重：检验函数的输出结果 e2e测试 e2e (端到端) 测试，致力于确保组件的一系列交互是正确的。它们是更高级别的测试，例如可能会测试用户是否注册、登录以及更新他们的用户名。这种测试运行起来会比单元
前端 vue源码-小黑记事本.rar
07-22
学习前端vue框架后的练习，主要应用V-指令实现，还包html和css的练习，提供给大家，方便大家学习，下载后即可运行
VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
kingov
05-02 2万+
双向数据绑定 v-bindv-bindtitle简化写法为title 设置类名 v-bindclass 隐藏显示元素v-if和v-show v-for 遍历数组 遍历对象 v-onclick 点击事件简化语法click 组件 私有组件 过滤器 全局过滤器 私有过滤器 路由双向数据绑定<!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
vue中v-text，v-html, v-model, {{}}之间的异同
热门推荐
yummyH
10-09 6万+
首先我们知道vue中有很多自定义指令，以v- 开头，例如：v-text，v-bind，v-model, v-if,等 在这些指令中，部分指令之间是很容易被混淆，所以今天决定自己总结一下以下几个相似指令之间的异同： 1.v-text v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变
vue前端怎么代码自测_从vue-test-utils入门前端单元测试
weixin_39979167的博客
12-19 761
NNGX,又踩坑了。换个了环境，代码里面的api接口没还完，uat环境测试测着测到sit环境去了，记大过。抛开其他种种，发现自己不懂前端单元测试的东西，大过！今天翻出来vue官方自带vue-test-utils，虽然之前见到，但是没有重视，趁此机会赶紧补补.快速尝鲜按照官方教程，先安装官方案例跑起来一个简单的计数器测试案例。git clone https://github.com/vuejs/vu...
vue入门：为什么使用v-for的时候必须要添加唯一的key？
小五
05-05 1万+
v-for中的key 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法; 举个例子： const list = [ { id: 1, name: ...
vue中v-text、v-html和{{}}
cmolong的博客
03-08 1889
{{}}： 纯文本内容，不会将html标签一并输出，在页面加载时显示{{}}，所以通常使用v-html和v-text代替。 v-html=&quot;&quot;：输出html标签中的内容。 v-text=&quot;&quot;：纯文本内容，会将html标签一并输出，与花括号的区别是在页面加载时不显示{{}}。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;hea
vue本地项目——小黑记事本
wcy8733996wcy的博客
01-26 2865
B站看到了一套vue框架入门课程，手敲了一个小项目（小黑记事本） 一、实现效果 输入框输入任务，按下回车键，添加到任务最后 鼠标移动到某项任务，该任务后面出现红色叉号，点击可删除次任务 记事本最下方左边统计当前任务条数 记事本最下方右边clear实现清空所有任务 二、运行界面 三、代码（含样式） <!-- 卡片阴影样式：https://blog.csdn.net/qq_44607694/article/details/89605857 --> <!DOCTYPE html>
【练习】Vue实现记事本
weixin_46303867的博客
02-08 336
功能要求 输入框输入后，回车可添加输入的内容到事件栏 鼠标移到某一栏上可以点击×进行该栏的删除 左下角可以统计事件的条数 右下角可以清空事件 实现步骤 生成列表结构(v-for 数组) 获取用户输入(v-model 双向绑定) 回车,新增数据(v-on .enter事件修饰符) 页面布局不熟悉，可以通过审查元素的方式快速找到元素 CSS代码 html, body { margin: 0; padding: 0; } body { background: #fff ; } button
enter对应的keycode_vue 添加enter回车事件
weixin_39719472的博客
12-21 582
问题所在：今天遇到一个需求，给el-button组件添加点击事件，之前对这块一直一知半解，所以特此总结一下解决方法：Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，所以对一个普通的Vue input组件，可以这样实现一个回车事件：//当点击了回车时，便会调用function函数但是对于开发来说，键盘事件对应的keyCode比较难记，所以Vue 为常用的按键设置了别名，这样我们就无需再去匹...
学习vue需要学习什么
最新发布
07-10
学习Vue.js，前端开发框架，你需要掌握以下几个关键点： 1. HTML和CSS基础：虽然Vue本身处理视图层，但理解HTML结构和CSS样式是必要的，因为它们构成应用的基础。 2. JavaScript基础：Vue是基于JavaScript的，所以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值