vue技术学习
vue快速入门
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue快速入门</title>
</head>
<body>
<!--老师解读
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div
2. 因为div更加适合做布局
3. id 不是必须为app , 是程序员指定,一般我们就使用app
-->
<div id="app"><!--老师解读1. {{message}} : 插值表达式2. message 就是从model的data数据池来设置3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换, 如果没有匹配上, 就是输出空--><h1>欢迎你{{message}}-{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>//创建Vue对象/*** 老韩解读* 1. 创建Vue对象实例* 2. 我们在控制台输出vm对象，看看该对象的结构！(data/listeners)**/let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)message: "Hello-Vue!",name: "韩顺平教育"}})console.log("vm=>", vm);console.log(vm._data.message);console.log(vm._data.name);console.log(vm.name);console.log(vm.message);
</script></body>
</html>
单向渲染
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>单向数据渲染</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><!--老师解读1. 使用插值表达式引用 data数据池数据是在标签体内2. 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind--><!--<img src="{{img_src}}">--><img v-bind:src="img_src" v-bind:width="img_width"><img :src="img_src" :width="img_width">
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)message: "hello, 耗子精",img_src: "1.jpg",img_width: "200px"}})console.log("vm=>", vm);
</script>
</body>
</html>
双向渲染
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>双向数据渲染</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><!--老韩解读1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view2. v-model="hobby.val" 是数据的双向渲染,(1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】--><input type="text" v-model="hobby.val"><br/><br/><input type="text" :value="hobby.val"><br/><br/><p>你输入的爱好是: {{hobby.val}}</p>
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)message: "hi, 输入你的爱好",hobby: {val: "购物"}}})console.log("vm=>", vm);
</script>
</body>
</html>
小作业
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--1、使用Vue的数据双向绑定 完成如下功能-->
<!--1) 当用户在输入框输入1.jpg 、2.jpg 、3.jpg时可以切换显示对应的图片-->
<!--2) 使用Vue的数据双向绑定完成-->
<body>
<div id="app">
<h1>请输入图片名称1.jpg-2.jpg-3.jpg</h1><!--老师说明:1. 这里我们使用了数据的双向渲染-data{} 数据池的 img_src--><input type="text" v-model="img_src"><br/><br/><img :src="img_src" :height="img_height"><br/><img src="1.jpg" :height="img_height"><img src="4.png" :height="img_height"><img src="3.png" :height="img_height">
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)img_src: "1.jpg",img_height: "100px"}})
</script>
</body>
</html>
事件处理
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件处理</title>
</head>
<body>
<!--视图-->
<div id="app"><h1>{{message}}</h1><!--老韩解读1. v-on:click 表示我们要给button元素绑定一个click的事件2. sayHi() 表示绑定的方法, 在方法池 methods{} 定义的3. 底层仍然是dom处理4. 如果方法不需要传递参数，可以省略()5. v-on:click可以简写@, 但是需要浏览器支持--><button v-on:click="sayHi()">点击输出</button><button v-on:click="sayOk()">点击输出</button><button v-on:click="sayHi">点击输出</button><button @click="sayOk">点击输出</button>
</div>
<!--引入我们的vue.js-->
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>//老师说明:这里创建的Vue实例, 你可以不去接收, 也可以接收//方便我们调试信息let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)message: "Vue事件处理的案例",name: "韩顺平教育"},//老师解读:// 1. 是一个methods属性, 对应的值是对象{}// 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池// 3. 这里需要小伙伴有js的基础=>java web第4章methods: {sayHi() {console.log("hi, 银角大王~");},sayOk() {console.log("ok, 金角大王~");}}})
</script>
</body>
</html>
修饰符使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Vue修饰符使用</title>
</head>
<body>
<div id="app"><!-- 老韩解读1. 修饰符用于指出一个指令应该以特殊方式绑定。2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为3. 执行 程序员指定的方法--><form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">妖怪名: <input type="text" v-model="monster.name"><br/><br/><button type="submit">注册</button></form><p>服务返回的数据是{{count}}</p><h1>修饰符扩展案例</h1><button v-on:click.once="onMySubmit">点击一次</button><br/><input type="text" v-on:keyup.enter="onMySubmit"><input type="text" v-on:keyup.down="onMySubmit"><input type="text" v-model.trim="count">
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el: '#app',data: {//数据池monster: {//monster数据(对象)的属性, 可以动态生成},count: 0},methods: {//方法池onMySubmit() {//console.log("我们自己的表单提交处理...");//"", null, undefined都是falseif(this.monster.name) {console.log("提交表单 name=", this.monster.name);//这里，程序员就可以根据自己的业务发出ajax请求到后端//得到数据后，在进行数据更新this.count = 666;} else {console.log("请输入名字..");}}}})
</script>
</body>
</html>
小作业
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件处理-作业1</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><button v-on:click="add">点击增加+1</button><!--老师解读1. 这里count += 2 的count数据是data数据池的count2. 案例不难，重点是掌握和理解机制--><button v-on:click="count += 2">点击增加+2</button><p>你的按钮被点击了{{count}}次</p>
</div>
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)message: "Vue事件处理的作业",count: 0//点击的次数},methods: {add() {//修改data数据池的count//因为data和methods在同一个vue实例中,因此可以通过this.数据方式访问this.count += 1;}}})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件处理-作业2</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1>请输入书名: <input type="text" v-model="bookName"><button v-on:click="show">点击显示书名~</button>
</div>
<script src="vue.js"></script>
<!--创建一个vue实例,并挂载到id=app的div-->
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)message: "Vue事件处理的作业",bookName: "天龙八部"},methods: {show() {//老韩提醒,如果你要访问当前Vue实例的数据池的数据, 需要this//否则，会报错ReferenceError: bookName is not definedalert("你输入的书名是:" + this.bookName)}}})
</script>
</body>
</html>
相关文章：
vue技术学习
vue快速入门 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>vue快速入门</title> </head> <body> <!--老师解读 1. div元素不是必须的，也可以是其它元素࿰…...
基于空间的图卷积神经网络：GNN
目录 欧氏空间中神经网络发挥巨大最作用，DNA，知识图谱三维或者多维空间不行 邻接矩阵实现图结构的矩阵化表示：造梦师 局和操作实现层内消息传递：带线的连接机传递消息 GCN通过邻域聚合实现特征提取 SVM支持向量机 编辑 硬分…...
.net core发布到IIS上出现 HTTP 错误 500.19
1.检查.net core 环境运行环境是否安装完成，类似如下环境 2.IIS是否安装全 本次原因就是IIS未安装全导致的 按照网上说的手动重启iis（iisreset）也不行...
01_Redis单线程与多线程
01——Redis单线程与多线程 一、Redis是单线程还是多线程 在谈Redis的单线程或多线程时，需要根据版本来区分。 在redis 3.x之前，redis是单线程的从redis 4.x开始，redis引入多线程。处理客户端请求时，使用单线程；在异…...
机器学习——随机森林【手动代码】
随机森林这个内容，是目前来说。。。最最最简单，最好理解，应该也是最好实现的了！！！ 先挖坑，慢慢填 随机森林，这个名字取得，果然深得该算法的核心精髓，既随机&a…...
Vue 2 处理边界情况
访问元素和组件 通过Vue 2 组件基础一文的学习，我们知道组件之间可以通过传递props或事件来进行通信。 但在一些情况下，我们使用下面的方法将更有用。 1.访问根实例 根实例可通过this.$root获取。 我们在所有子组件中都可以像上面那样访问根实例&…...
写一个mysql 正则表达式，每三个img标签图片后面添加＜hr＞
你可以使用MySQL的REGEXP_REPLACE函数来实现这个需求。下面是一个示例的正则表达式和SQL语句： sql UPDATE your_table SET your_column REGEXP_REPLACE(your_column, (<img[^>]*>){3}, $0<hr>) WHERE your_column REGEXP (<img[^>]*>){3}…...
Spring MVC异常处理
Spring MVC异常处理 Spring MVC异常处理机制HandlerExceptionResolver的实现类DefaultHandlerExceptionResolver实现类DefaultHandlerExceptionResolver 在Controller的请求处理方法中手动使用try…catch块捕捉异常，当捕捉到指定的异常时，系统返回对应的…...
Centos7安装docker后默认开启docker0的网卡|卸载默认网卡
docker实战(一):centos7 yum安装docker docker实战(二):基础命令篇 docker实战(三):docker网络模式(超详细) docker实战(四):docker架构原理 docker实战(五):docker镜像及仓库配置 docker实战(六):docker 网络及数据卷设置 docker实战(七):docker 性质及版本选择 认知升…...
04_Redis与mysql数据双写一致性案例
04——redis与mysql数据双写一致性 一、canal 是什么 canal[ka’nel,中文翻译为水道/管道/沟渠/运河，主要用途是用于MySQL数据库增量日志数据的订阅、消费和解析，是阿里巴巴开发并开源的,采用Java语言开发； 历史背景是早期阿里巴巴因为杭州和…...
vue的开发者工具下载『保姆级别』
1.先进官网 极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn) 2.搜索vue devtools，点击进去 3.下载插件 4.下载到文件下你自己的文件下：我的是下载到E盘下。 5.压缩到当前目录下 6.电脑进入拓展程序（不同的浏览器操作不同ÿ…...
vue的scrollTop手机环境设置值失效，本地正常可以赋值
获取div盒子ref或者document获取都行 监听方法 一定要加this.$nexttick,在本地测试只用nexttick是没有问题的，但是到手机测试就不行了，原因是因为手机渲染比本地更快，所以结合setTimeout使用 如果有更好的处理方法，恳请大佬指点一…...
[前端系列第7弹]Vue：一个渐进式的 JavaScript 框架
Vue 是一个用于构建用户界面的 JavaScript 框架，它具有以下特点： 渐进式：Vue 可以根据不同的使用场景，灵活地选择使用库或者框架的方式，从而实现渐进式的开发。响应式：Vue 通过数据绑定和虚拟 DOM 技术&am…...
C#键盘按键对应Keys类大全
...
SpringBoot 学习(03): 弱语言的注解和SpringBoot注解的异同
弱语言代表：Hyperf，一个基于 PHP Swoole 扩展的常驻内存框架 注解概念的举例说明； 说白了就是，你当领导，破烂事让秘书帮你去安排，你只需要批注一下，例如下周要举办一场活动，秘书将方…...
CloudQuery：更好地管理你的 OceanBase 数据库
前言：作为 OceanBase 的生态合作伙伴，CloudQuery（简称“CQ”） 最新发布的社区版 2.2.0 新增了 OceanBase 数据库，为企业使用 OceanBase 数据库提供全面的支持。包括连接与认证、查询与分析、数据安全与权限管理&#x…...
php的password_verify 和 password_hash密码验证
password_hash() 使用足够强度的单向散列算法创建密码的散列(hash)。 当前支持的算法： PASSWORD_DEFAULT - 使用 bcrypt 算法 (PHP 5.5.0 默认)。 注意，该常量会随着 PHP 加入更新更高强度的算法而改变。 所以，使用此常量生成结果的长度将在未…...
JAVA免杀学习与实验
1 认识Webshell 创建一个JSP文件： <% page import"java.io.InputStream" %> <% page import"java.io.BufferedReader" %> <% page import"java.io.InputStreamReader" %> <% page language"java" p…...
Apche Kafka + Spring的消息监听容器
目录 一、消息的接收1.1、消息监听器 二、消息监听容器2.1、 实现方法2.1.1、KafkaMessageListenerContainer2.1.1.1、 基本概念2.1.1.2、如何使用 KafkaMessageListenerContainer 2.1.2、ConcurrentMessageListenerContainer 三、偏移 四、监听器容器自动启动 一、消息的接收 …...
[JavaWeb]【五】web后端开发-Tomcat SpringBoot解析
目录 一 介绍Tomcat 二 基本使用 2.1 解压绿色版 2.2 启动TOMCAT 2.3 关闭TOMCAT 2.4 常见问题 2.5 修改端口号 2.6 部署应用程序 三 SpringBootWeb入门程序解析 前言：tomcat与SpringBoot解析 一 介绍Tomcat 二 基本使用 2.1 解压绿色版 2.2 启动TOMCAT 2…...
pdf2pptx：LaTeX到PowerPoint的无缝转换终极方案
pdf2pptx：LaTeX到PowerPoint的无缝转换终极方案 【免费下载链接】pdf2pptx Convert your (Beamer) PDF slides to (Powerpoint) PPTX 项目地址: https://gitcode.com/gh_mirrors/pd/pdf2pptx 还在为LaTeX Beamer制作的精美学术幻灯片无法在PowerPoint中完美展…...
C语言--day14
指针的常见操作 指针变量，有两方面的意思 一个指针指向的内容(数据值，一级) 指针变量本身存储的数据 (地址值) #include <stdio.h> int main() {int a 10;int b 0 ;int c 50;int *p NULL;int *q NULL;p &a; // 对指针变量本身进行修改…...
别再乱点鼠标了！用netsh advfirewall命令搞定Windows防火墙，效率翻倍（附常用场景命令清单）
Windows防火墙命令行实战：netsh advfirewall高阶应用指南 每次看到同事在图形界面里一层层点击"控制面板→系统和安全→Windows Defender防火墙→高级设置"时，我都忍不住想递给他一个命令行窗口。作为IT运维老手，我早已习惯用netsh…...
NPC逆变器模糊超螺旋滑模控制【附仿真】
✨ 长期致力于NPC型逆变器、滑模控制、超螺旋算法、模糊控制、电能质量优化研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）改进型超螺旋滑模变结构控…...
强化学习如何优化城市洪水管理？哥本哈根项目揭示数据驱动规划新范式
1. 项目概述：当强化学习遇见城市洪水管理如果你是一位城市规划师或水务工程师，面对日益频发的极端降雨和城市内涝，传统的静态规划模型是否让你感到力不从心？气候变化带来的不确定性，让“一次性”的工程解决方案风险陡增…...
WordPress站点AI友好化：LLMs.txt插件配置与Markdown输出实战
1. 项目概述：为你的WordPress站点打造AI友好的内容接口如果你运营着一个WordPress网站，并且希望你的内容能被当下最前沿的大型语言模型（LLMs）——比如ChatGPT、Claude、Gemini等——更好地发现、理解和利用，那么你很可…...
解锁网络音视频传输：DistroAV插件从零构建高效工作流
解锁网络音视频传输：DistroAV插件从零构建高效工作流 【免费下载链接】obs-ndi DistroAV (formerly OBS-NDI): NDI integration for OBS Studio 项目地址: https://gitcode.com/gh_mirrors/ob/obs-ndi 在现代直播制作和视频协作场景中，跨设备高质…...
告别云服务器：手把手教你用QEMU在Ubuntu 18.04上搭建专属内核调试环境
从零构建QEMU内核调试环境：Ubuntu 18.04下的UEFI开发实战手册 当深夜的调试灯亮起，你是否还在为云服务器高昂的费用和网络延迟苦恼？本文将带你用一台普通Ubuntu机器，打造媲美物理机的内核开发环境。不同于常规教程，我…...
开源机械爪OpenClaw Max：从设计原理到实践应用全解析
1. 项目概述：从开源机械爪到OpenClaw Max的进化之路如果你和我一样，对机器人、自动化或者DIY硬件充满热情，那么“机械爪”这个组件一定不会陌生。它就像是机器人的“手”，是实现抓取、搬运、操作等复杂任务的核心执行器。市面上有…...
从零部署OpenClaw：打造私有AI助手全流程指南
1. 项目概述：从零部署你的专属AI助手 如果你对AI Agent（智能体）感兴趣，想拥有一个能24小时在线、不仅能聊天还能帮你执行任务、操控浏览器、生成图片的私人助手，但又觉得技术门槛太高、无从下手，那么你来对…...