table取tr对象 vue_Vue笔记

  • Vue集成了React和Angular的优点，摒弃了他们的缺点。
  • Vue的官网：https://cn.vuejs.org/v2/api/
  • Vue诞生于2016年，是现在非常流行的MVVM框架。
  • Vue提供了“引包”的使用方法，初学者可以在这之下学习语法。不需要webpack，不需CMD打包。
  • Vue的包：https://cn.vuejs.org/js/vue.js
  • 在react中任何一个组件都是一个class（类），并且这个类继承于React.Component。当你放标签的时候等于实例化了这个类。Vue也是一样，任何一个组件也是一个类，但是Vue有个非常大的特点：语法隐藏底层细节
  • Vue中的指令都是以v-开头的
  • v-开头的指令里面不用{{ }}

一、Vue的基本使用

  1. Vue启动
  • 在VueTest>jslib文件夹下创建vue.js文件，将vue官网js文件内容复制进去。

2fb27a92255805dc04d27f2cd7499d0a.png
  • 在HTML文件中引用vue.js
  • 唯一一次用new,Vue的主程序要用new来引入
  • el是element的意思，就是挂载点。
  • 插入值使用{{ }}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{1+1}}</h1></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app"})      //实际作用域是id为app的div//唯一一次用new,Vue的主程序要用new来引入</script>
</body>
</html>
  • 输出结果

32b417dc69bf2f6605d41fb8ae212548.png

2. MVVM特性的演示

  • 创建html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>我爱你{{a}}年</h1><button @click="add()">按我加1</button><button @click="minus()">按我减1</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:100,},methods:{add(){this.a++;},minus(){this.a--;}}})</script>
</body>
</html>
  • 结果：

ec207f0fd0c9ff4d9156ad369116bb19.png

3. 指令

  • React中没有指令，指令是Angular发明的，Vue借鉴来的。
  • 标签身上的属性，这些属性有功能性

1）v-if、v-show

  • v-if是动态的向DOM树内添加或者删除DOM元素（是否上树）;
  • v-show是通过设置DOM元素的display样式属性控制显隐；
  • v-if和v-show的值都是布尔值（true, a>9, str.length>5， Math.random>6）
  • v-开头的指令不用{{ }}， 用双引号。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button @click="changeisInTree()">v-if添加、删除元素</button><button @click="changeisShow()">v-show显示、隐藏元素</button><h1 v-if="isInTree">你好</h1><h1 v-show="isShow">你好</h1></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{isInTree:true,      //true可见，false不可见isShow:true,},methods:{changeisInTree(){this.isInTree=!this.isInTree;},changeisShow(){this.isShow=!this.isShow;}}})</script>
</body>
</html>

结果：

63b7fe2ea5d79cb27e534ab75136bc3b.png

2) v-for

a. 案列一：

  • v-for用来实现循环某个节点，循环节点必须绑key。v-bind:key=""
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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" v-bind:key="index">{{index}}-{{item}}</li></ul></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{arr:["A", "B", "C", "D"]}})</script>
</body>
</html>

结果：

ff5ad7403b2d89479d1d369bb5c2e058.png

b. 案列二：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table, tr, td {border: 1px solid black;}td {padding: 10px;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in arr" v-bind:key="index">{{index}}-{{item}}</li></ul><table><tr v-for="item in student" v-bind:key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.sex}}</td><td>{{item.age}}</td></tr></table></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{arr:["A", "B", "C", "D"],student:[{"id":1, "name":"小红", "sex": "女", "age": 12},{"id":2, "name":"小明", "sex": "男", "age": 24},{"id":3, "name":"小东", "sex": "男", "age": 35},]}})</script>
</body>
</html>

结果：

0e26eecb5677765e781e3fe84726b1e7.png

c. 案列三：从1开始计数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p v-for="item in 5">{{item}}</p></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",})</script></body>
</html>

结果：

4995cd0045a0975e09f7ef7da07ac50b.png

d. 案列四：从0开始计数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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 5" v-bind:key="index">{{index}}</li></ul></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",})</script>
</body>
</html>

结果：

1f5135f77e954b88deb7ab29f739123f.png

e：案列五：九九乘法表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table, tr, td{border: 1px solid black;}td {padding: 20px;}</style>
</head>
<body><div id="app"><table><tr v-for="i in 9"><td v-for="j in 9"><span v-show="i>=j">{{i}}*{{j}}={{i*j}}</span></td></tr></table></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",})</script>
</body>
</html>

结果：

f6981ac94248b0aba148032c2a519b89.png

3）v-bind（重难点）

  • v-bind指令可以让任何w3c属性变“动态”。

a. 案列一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="text" v-bind:value="a"></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:10,},})</script>
</body>
</html>

结果：

f6804808ac607f060b3741ef07e1749c.png

b. 案列二：加入两张图

<p v-for="i in 3"><img :src="'./'+i+'.jpg'">
</p>

4）v-on 事件监听

  • 一般用@符号代替v-on:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button v-on:click="info()">点击</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{info(){alert("你好");}}})</script>
</body>
</html>

结果：

c4e12e0fc747ba9c996def0bc908ffdf.png

5) v-model

  • 双向绑定，是vue中的特色。Angular也有，是vue借鉴来的。
  • 双向绑定指的是：

1）当data的值变化了，控件就变化。

2）当控件的值变化了，data的值也变化。

  • Vue规定：携带v-model指令的元素，不能有监听或value了。

a. 案列一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1><input type="text" v-model="a"></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:10,},methods:{}})</script>
</body>
</html>

结果：

e381abe526fff137ae05c3bf78d8b183.png

b. 案列二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1><input type="range" v-model="a"></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:10,},methods:{}})</script>
</body>
</html>

结果：

3b93117585bbb29ac69d1791f49bb90c.png

案列：

1）调色板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;border: 1px solid black;}</style>
</head>
<body><div id="app"><div class="box" :style="'background-color:rgb('+r+','+g+','+b+')'"></div><p><input type="range" :min="0" :max="255" v-model="r"><br /><input type="range" :min="0" :max="255" v-model="g"><br /><input type="range" :min="0" :max="255" v-model="b"></p></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{r:100,g:175,b:130,},methods:{}})</script>
</body>
</html>

结果：

54300862022b4fd5608db3cee52fa012.png

2）微博发布框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.warning {color:red;}</style>
</head>
<body><div id="app"><textarea cols="30" rows="10" v-model="content"></textarea><span :class="{'warning': content.length > 140}">{{content.length}}-140字</span><br /> <!--json格式--><button :disabled="content.length>140 || content.length==0">发布</button><button :disabled="content.length==0" @click="clear()">清屏</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{content:"",},methods:{clear(){this.content=" ";},}})</script>
</body>
</html>

结果：

889ede6ad24f40ba62d9259791b07cc1.png

3）购物车

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><table><tr v-for="item in carts" :key="item.id"><td>{{item.id}}</td><td>{{item.title}}</td><td>{{item.price}}</td><td><input type="number" min="0" v-model="item.number">{{item.price*item.number}}</td></tr></table>总价：{{zonghe()}}</div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{carts:[{"id": 1, "title": "冰箱", "price": 100, "number": 1},{"id": 2, "title": "电视机", "price": 150, "number": 2},{"id": 3, "title": "空调", "price": 300, "number": 8},{"id": 4, "title": "电饭煲", "price": 50, "number": 5},]},methods:{zonghe(){return this.carts.reduce((a,b)=>{return a + b.number*b.price}, 0)}}})</script>
</body>
</html>

结果：

a4a03eb71aeff968e9785b8d44ebf3bb.png

4）computed

  • 小案例1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{},computed:{a:{get(){return 10;}}}})</script>
</body>
</html>

结果：

ea0b14760be1f8b3a1c134eabe41827b.png
  • 案例2
  • computed可以有get和set
  • computed可以看作特殊的data
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1><button @click="add()">button</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{add(){this.a++;}},computed:{a:{get(){return 10;},set(){alert("你试图更改a")}}}})</script>
</body>
</html>

结果：

c4315c172ffa6d92d9b4f2ec0e17b338.png

5) todos

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p><input type="text" ref="kuang"><button @click="addToDo()">增加</button></p><ul><li v-for="item in todos" v-bind:key="item.id"><input type="checkbox" v-model="item.done">{{item.title}}<button @click="removeToDo(item.id)">删除</button></li></ul><p>共：{{todos.length}}个。已做：{{yizuo}}个，未作：{{weizuo}}个。</p></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{todos:[{"id":1, "title":"睡觉", "done": false},{"id":2, "title":"吃饭", "done": false},{"id":3, "title":"洗碗", "done": false},]},methods:{removeToDo(id){this.todos=this.todos.filter(item=>item.id!=id);},addToDo(){var title=this.$refs.kuang.value;this.todos.push({"id":Math.random(),title,"done":false})}},computed:{yizuo(){return this.todos.filter(item=>item.done).length;},weizuo(){return this.todos.filter(item=>!item.done).length;}}})</script>
</body>
</html>

结果：

f46802d87d1c09273e26e166621bc41a.png

6）一维变二维（未结束）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>要求做3个ul,每个ul中有四个li</h1><ul v-for="i in 3"><li v-for="j in 4"><img src="`/images/${(i-1)*4+(j-1)}.jpg`" alt=""></li></ul></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{},computed:{}})</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/455055.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Beats入门简介

Beats入门简介

使用Beat收集nginx日志和指标数据 项目需求 Nginx是一款非常优秀的web服务器&#xff0c;往往nginx服务会作为项目的访问入口&#xff0c;那么&#xff0c;nginx的性能保障就变得非常重要了&#xff0c;如果nginx的运行出现了问题就会对项目有较大的影响&#xff0c;所以&…
阅读更多...
可编程led灯带原理_SCPSD-250-04-27派克真空压力传感器故障和工作原理

可编程led灯带原理_SCPSD-250-04-27派克真空压力传感器故障和工作原理

SCPSD-250-04-27派克PARKER真空压力传感器故障和工作原理PARKER压力开关现货 PARKER压力传感器特价 派克真空压力传感器 PARKER数字压力开关2020年还剩最后2天了&#xff0c;这一年大家都过得不太容易&#xff0c;尤其是我自己这是30年以来过得最艰难的一年&#xff0c;经…
阅读更多...
Kibana入门安装与介绍

Kibana入门安装与介绍

Kibana入门 Kibana 是一款开源的数据分析和可视化平台&#xff0c;它是 Elastic Stack 成员之一&#xff0c;设计用于和 Elasticsearch 协作。您可以使用 Kibana 对 Elasticsearch 索引中的数据进行搜索、查看、交互操作。您可以很方便的利用图表、表格及地图对数据进行多元化…
阅读更多...
友善串口工具接收数据随机换行_使用Python3+PyQT5+Pyserial 实现简单的串口工具方法...

友善串口工具接收数据随机换行_使用Python3+PyQT5+Pyserial 实现简单的串口工具方法...

练手项目&#xff0c;先上图先实现一个简单的串口工具&#xff0c;为之后的上位机做准备代码如下&#xff1a;pyserial_demo.pyimport sys import serial import serial.tools.list_ports from PyQt5 import QtWidgets from PyQt5.QtWidgets import QMessageBox from PyQt5.QtC…
阅读更多...
Vue渲染函数

Vue渲染函数

前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML。然而在一些场景中&#xff0c;真的需要 JavaScript 的完全编程的能力&#xff0c;这就是 render 函数&#xff0c;它比 template 更接近编译器。本文将详细介绍Vue渲染函数 引入 下面是一个例子&#xff0c;如果要…
阅读更多...
Logstash入门简介

Logstash入门简介

Logstash入门简介 介绍 Logstash是一个开源的服务器端数据处理管道&#xff0c;能够同时从多个来源采集数据&#xff0c;转换数据&#xff0c;然后将数据发送到最喜欢的存储库中&#xff08;我们的存储库当然是ElasticSearch&#xff09; 我们回到我们ElasticStack的架构图&a…
阅读更多...
Django templates 和 urls 拆分

Django templates 和 urls 拆分

如果在Django项目 下面新建了blog和polls两个APP应用&#xff0c;在每个APP下面都各自新建自己的url和templates&#xff0c;那么我们需要如何进行项目配置呢&#xff1f; INSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, dja…
阅读更多...
springboot怎么杀进程_线上服务平均响应时间太长，怎么排查？

springboot怎么杀进程_线上服务平均响应时间太长，怎么排查？

线上服务平均响应时间太长&#xff0c;怎么排查&#xff1f;https://xie.infoq.cn/article/914b5c56000a3880016abd8d6前言&#xff1a;最近线上环境某个接口服务响应时间偏长&#xff0c;导致用户体验超差&#xff0c;那平时该怎么快速的排查这类问题呢&#xff1f;①、为代码…
阅读更多...
MPEG音视频编解码之MP3编解码概述

MPEG音视频编解码之MP3编解码概述

2 MP3编解码原理 2.1 MP3音频压缩标准概述 MP3全称是动态影像专家压缩标准音频层面3&#xff08;Moving Picture Experts Group Audio Layer III&#xff09;。是当今较流行的一种数字音频编码和有损压缩格式&#xff0c;它设计用来大幅度地降低音频数据量&#xff0c;而对于…
阅读更多...
Python实现GitBook工具

Python实现GitBook工具

写在前面 本工具是通过Python脚本实现 GitBook 自动 生成 执行 编译 发布的功能 你可以在这里下载exe 使用 1. exe下载,并移动位置 将exe文件放在你的gitbook文件夹中,或者放在空文件夹中 2. file.md 创建 名为file.md的文件,在你要写book的目录下 注意: 这里file.md文件名…
阅读更多...
shell脚本中用到的条件和循环语句

shell脚本中用到的条件和循环语句

本博文介绍一下shell脚本中常用的条件和循环语句&#xff1a;条件语句&#xff1a;循环语句&#xff1a;示例&#xff1a;if语句&#xff1a;eg1.eg2.2.case语句&#xff1a;简单的case语句&#xff1a;配合循环的case语句&#xff1a;3.for语句&#xff1a;简单的for语句&…
阅读更多...
processing动态代码大全_做一张动态海报需要多少步？

processing动态代码大全_做一张动态海报需要多少步？

人们习惯性地把程序员跟设计师分成两种不同性质的人&#xff0c;好像程序员就不会有美感&#xff0c;设计师逻辑思维就一定会很弱&#xff0c;但最近几年我们发现越来越多的程序员学设计&#xff0c;设计师学编程的跨界故事。新媒体艺术家&#xff0c;邱伟豪也是其中一员&#…
阅读更多...
手写springboot_Spring Boot 入门教程 | 图文讲解

手写springboot_Spring Boot 入门教程 | 图文讲解

目录一、Spring Boot 是什么二、为什么要使用 Spring Boot三、快速入门3.1 创建 Spring Boot 项目3.2 项目结构3.3 引入 Web 依赖3.4 编写第一个接口3.5 启动程序&#xff0c;验证效果四、总结五、GitHub 示例代码一、Spring Boot 是什么以下截图自 Spring Boot 官方文档&#…
阅读更多...
lunix 安装python3

lunix 安装python3

Linux下默认系统自带python2.6的版本&#xff0c;这个版本被系统很多程序所依赖&#xff0c;所以不建议删除&#xff0c;如果使用最新的Python3那么我们知道编译安装源码包和系统默认包之间是没有任何影响的&#xff0c;所以可以安装python3和python2共存 首先去python官网下载…
阅读更多...
机器学习之朴素贝叶斯法

机器学习之朴素贝叶斯法

转载请注明出处&#xff1a;http://www.cnblogs.com/Peyton-Li/ 朴素贝叶斯法是机器学习模型中一个比较简单的模型&#xff0c;实现简单&#xff0c;比较常用。 是定义在输入空间上的随机向量&#xff0c;是定义在输出空间上的随机变量。是和的联合概率分布。训练数据集由独立同…
阅读更多...
如何让梯形变成平行四边形_开放的课堂 创新的天地——平行四边形的面积教学片段与反思...

如何让梯形变成平行四边形_开放的课堂 创新的天地——平行四边形的面积教学片段与反思...

一、 课题的确定学生在三年级学过长方形、正方形的面积计算&#xff0c;经历过从数方格的办法得出面积计算公式的过程。因此&#xff0c;学生对于面积计算公式的推导有一定的经验和知识基础。基于上述考虑&#xff0c;我想完全放手让学生去研究如何计算平行四边形的面积。这对学…
阅读更多...
bzoj1670【Usaco2006 Oct】Building the Moat 护城河的挖掘

bzoj1670【Usaco2006 Oct】Building the Moat 护城河的挖掘

1670: [Usaco2006 Oct]Building the Moat护城河的挖掘 Time Limit: 3 Sec Memory Limit: 64 MBSubmit: 387 Solved: 288[Submit][Status][Discuss]Description 为了防止口渴的食蚁兽进入他的农场&#xff0c;Farmer John决定在他的农场周围挖一条护城河。农场里一共同拥有N(8…
阅读更多...
Vue之组件之间的数据传递

Vue之组件之间的数据传递

Vue的组件作用域都是孤立的&#xff0c;不允许在子组件的模板内直接引用父组件的数据&#xff0c;必须使用特定的方法才能实现组件之间的数据传递。 下列为在vue-cli创建项目中的操作 一父组件向子组件传递数据 在Vue中&#xff0c;用props向子组件传递数据。 子组件部分&#…
阅读更多...
偶然发现一个大佬写的 React 脚手架，叫Moderate, 用起来很方便

偶然发现一个大佬写的 React 脚手架，叫Moderate, 用起来很方便

发现一个大佬写的 React 脚手架&#xff0c;叫Moderate, 用起来很方便 Moderate&#xff0c;意思为适中的&#xff0c;适度的&#xff0c;用这个作为代号&#xff0c;主要取决于他的本名“中用”&#xff0c;其一以贯之的想法就是中庸&#xff0c;秉承着以人为本的态度&#xf…
阅读更多...
案例 自动办公_1300张办公系列前台参考图，请您查收！

案例 自动办公_1300张办公系列前台参考图，请您查收！

设计情报局室内设计师的灵感聚集地关注一个有格调的空间必定有一处高颜值的前台漂亮的前台很重要...是空间给人的第一印象一个独一无二的前台设计还可以提升整个空间的气质与逼格连个漂亮的前台都没有作为颜控界扛把子的设计师们还怎么混&#xff1f;SO今天小编给大家带来一份《…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023