table取tr对象 vue_Vue笔记
2024-04-21 06:21:34
- 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的基本使用
- Vue启动
- 在VueTest>jslib文件夹下创建vue.js文件，将vue官网js文件内容复制进去。
- 在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>- 输出结果
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>- 结果：
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>结果：
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>结果：
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>结果：
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>结果：
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>结果：
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>结果：
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>结果：
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>结果：
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>结果：
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>结果：
案列：
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>结果：
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>结果：
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>结果：
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>结果：
- 案例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>结果：
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>结果：
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>table取tr对象 vue_Vue笔记相关推荐
- table取tr对象 vue_javascript的DOM对象终极总结：你必看的js面向对象
<大数据和人工智能交流>头条号向广大初学者新增C .Java .Python .Scala.javascript 等目前流行的计算机.大数据编程语言,希望大家以后关注本头条号更多的内容.作 ...
- JS-JSON-获取JSON对象中的数据展示到表格里
JS-JSON-获取JSON对象中的数据展示到表格里 1.要求 点击按钮,将学生信息展示到表格里,并显示总记录条数. 2.实现思路 创建JSON对象 先创建一个JSON对象data,有总人数total ...
- html表格整体左移动,js操作table统制tr jquery 两个table左右移动
js操作table控制tr jquery 两个table左右移动 一.关于动态操作select的问题: ------------------------------------------------ ...
- Spring Boot整合Spring Data Redis-存取Java对象
如何通过Spring Data Redis,来将我们一个实体对象,做一个存储的操作,Spring Data Redis操作实体对象,我们回到代码当中,我们首先去创建一个实体,比如我这个实体叫Users ...
- 谈一谈HTML中table、tr、td标签的width和height
一般我们利用HTML中table做表格式,经常会遇到table.tr.td标签的width和height问题,而有时候发现在对tr.td设置宽度或高度时没有效果,其实这就是表格标签的特殊性,他们几个互 ...
- Jquery和JS获取Table中tr标签的值以及赋值问题
Jquery和JS获取Table中tr标签的值以及赋值 业务场景:根据 类型,给比例赋值,是当前td比例动态变化:废话少说,直接上代码 1.以下是HTML代码; <div class=" ...
- table中tr使用toggle不好，选择换一张方式
好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...
- 原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
- 根据div 标签 查看数组@class=modulwrap 下面的/table/tbody/tr/td
<div class="modulwrap"><div class="request_title"><span class=&qu ...
最新文章
- On-Heap与Off-Heap
- Windows Mysql添加用户
- 计算机职业短命,最短命10种活法你占几条？9成人长期对电脑
- Python随机梯度下降法（二）
- SAP License：SAP顾问该不该参与数据搜集
- MySQL数据丢失情况分析
- OpenGL基础39：GLSL内建变量与接口块
- h5扫描pc端二维码登录
- javascript文档_用javascript print js打印文档的最简单方法
- java+js+html 实现webSocket广播及私聊
- wordpress后台打开速度非常慢怎么办
- java求矩阵的逆矩阵_Java逆矩阵计算
- Kylin高级主题-Cube构建算法介绍（逐层算法和快速算法）
- Word:文字中“插入”和“改写”设置
- Gitlab项目上传
- GEF（Graphical Editing Framework）介绍
- ajax请求时拒绝访问,ajax跨域请求js拒绝访问的解决方法
- pycharm自定义模板代码
- 12.13 Daily Scrum
- ACPI Specification 第二章 条款的定义