【笔记】VUE学习笔记
2024-04-27 04:23:37
学习视频
【B站学习视频】黑马程序员vue前端基础教程
整体思维导图
基础
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app">{{ message }}<div>{{student.name}}</div><div>{{campus[0]}} {{student.sex}}</div><ul><li>{{campus[1]}}</li><li>{{campus[2]}}</li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "Hello Vue!",student: {name: "wyl",sex: "man",},campus: ["hah1", "hah2", "hha3"],},});</script></body>
</html>指令
V-TEXT指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- 指令形式渲染 --><h2 v-text="message+'!'"></h2><h2>{{message+'!'}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "hello vue",},});</script></body>
</html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- 指令形式渲染 --><h2 v-text="message+'!'"></h2><h2>{{message+'!'}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "hello vue",},});</script></body>
</html>V-HTML指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><p v-html="content"></p><p v-text="content"></p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {content: "<a href='http://www.baidu.com'>baidu</a>",},});</script></body>
</html>V-ON指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><input type="button" value="确认" v-on:click="eat" /><input type="button" value="简要确认" @click="eat" /><h2 @dblclick="change">{{food}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {food: "肉",},methods: {eat: function () {alert("hahah");},change: function () {this.food += "好吃";},},});</script></body>
</html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><input type="button" value="anniu" @click="qaq" /><input type="text" @keypress.enter="qaqtwo(1,2)" /></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {},methods: {qaq: function () {alert("qaq");},qaqtwo: function (a, b) {alert(a);alert(b);},},});</script></body>
</html>V-SHOW指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><var id="app"><input type="button" value="显示" @click="changeisshow" /><input type="button" value="累加年龄" @click="addage" /><img v-show="isshow" src="/6.jpg" alt="图片" /><img v-show="age>=18" src="/6.jpg" alt="图片" /></var><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {isshow: false,age: 17,},methods: {changeisshow: function () {this.isshow = !this.isshow;},addage: function () {this.age++;},},});</script></body>
</html>V-IF指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><input type="button" value="切换" @click="toisshow" /><input type="button" value="up" @click="up" /><p v-if="isshow">www</p><p v-show="isshow">vshow</p><p v-if="t>=35">rerer</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {isshow: false,t: 34,},methods: {toisshow() {this.isshow = !this.isshow;},up() {this.t++;},},});</script></body>
</html>V-BIND指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><var id="app"><img v-bind:src="imgsrc" alt="" :title="imgti" /><br /><img:src="imgsrc"alt="":title="imgti":class="{active:isact}"@click="toact"/></var><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {imgsrc: "/6.jpg",imgti: "www",isactive: flase,},methods: {toact: function () {isactive = !isactive;},},});</script></body>
</html>V-FOR指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><ul><li v-for="(item,index) in arr">{{index + 1}} 123:{{item}}</li></ul><input type="button" value="+" @click="add" /><input type="button" value="-" @click="jian" /><h2 v-for="item in math" :title="123">{{item.m}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {arr: ["q", "w", "e"],math: [{ m: "1" }, { m: "2" }],},methods: {add: function () {this.math.push({ m: "4" });},jian: function () {this.math.shift();},},});</script></body>
</html>V-MODEL指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><input type="button" value="123" @click="setm" /><input type="text" v-model="message" @keyup.enter="getm" /><h2>{{message}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {message: "123",},methods: {getm: function () {alert(this.message);},setm: function () {this.message = "321";},},});</script></body>
</html>应用
·计数器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>button {width: 70px;height: 40px;}span {width: 50px;height: 20px;}</style></head><body><div id="app"><button @click="sub">-</button><span> {{num}} </span><button @click="add">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {num: 1,},methods: {sub: function () {if (this.num > 0) {this.num--;} else {alert("最小啦");}},add: function () {if (this.num < 10) {this.num++;} else {alert("最大啦");}},},});</script></body>
</html>【笔记】VUE学习笔记相关推荐
- ggggxc学习笔记----Vue学习笔记VI----可复用技术
九.可复用技术 1.混入mixin:混入是非常灵活的技术. 介绍:用来分发Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合&q ...
- 菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
- Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
- Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
- vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
- vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念 文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
- vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习 文章目录 vue学习笔记-01-前端的发展历 ...
- vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- 好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
- Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目 一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
最新文章
- 不限制内存用桶排序PHP
- 正式发布！中国首个LF Edge捐赠项目Baetyl 2.2发布
- 用Artifactory管理内部Maven仓库
- qt能使用logback_X04Logback的配置
- html 遍历div内check,vue+element中checkbox 实现遍历分组全选
- 迭代器 java_Java设计模式8：迭代器模式
- 【精辟】socket阻塞与非阻塞，同步与异步，select，pool，epool
- wifi传输信息需要连接服务器,基于近场通信的WiFi传输连接方案.pdf
- 在windows xp下,一块网卡绑定多个ip
- 互联网晚报 | 12月2日 星期四 | 荣耀60系列正式发布；高通发布全新一代骁龙8移动平台；新东方在线布局教育智能硬件...
- 《如何让你爱的人爱上你》第一部分：第一印象
- 自然语言处理(NLP)：国内会议
- 【Unity3D】Unity3D 软件安装 ( 注册账号并下载 Unity Hub | 安装 Unity Hub | 获取个人版授权 | 中文环境设置 | 安装 Unity3D 编辑器 )
- regedit参数+批处理修改IE标题
- css3 呼吸的莲花_Css实例制作“荷花盛开”代码演示
- 华科计算机学院新生家长群是多少,关于开通2020级本科和研究生新生群及新生家长群的公告...
- JointJS几个实用功能的简单实现
- Python爬虫问题汇总(持续更新)
- 你好，C++（22） 排排坐，吃果果——4.3.3 for循环：某个范围内…每个都…
- 数字化驱动全价值链卓越运营
热门文章
- 每天一道剑指offer-二叉搜索数的后序遍历序列
- # 笔记2021-11
- java破坏双亲委派_java的类加载机制-双亲委派，破坏双亲委派
- mysql date_default_timezone_set,date_default_timezone_set
- Node.js：node项目中连接postgresql以及基础使用
- CSS：布局——圣杯布局和双飞翼布局
- linux系统下，traceroute路由跟踪指令详解
- GIS_gdal geotiff文件与JAVA 浮点二维数组array之间的转换
- 算法笔记_面试_0.刷leetcode_基础知识范围
- 算法笔记_面试题_2.移动零(将数组的的0元素移到末尾)