Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

目录

4、事件绑定

4.1、事件绑定（点击、双击、鼠标移动）

点击按钮-最简单的事件绑定（无参函数）

格式

点击按钮-数字累加

Math.random()---随机数

事件对象、节点对象（生成随机颜色快）

4.2、事件传参

4.3、事件对象

4.4、既要传参又要获取事件对象（固定格式：$event）

事件对象-固定格式：$event

传3个参数

4.5、代码

运行截图

代码

样式处理操作（模板、事件、属性绑定）

运行图

关键技术点

代码

样式操作

Tab切换

原生实现Tab切换

Vue.js实现Tab切换

JavaScript中的this关键字

4、事件绑定

4.1、事件绑定（点击、双击、鼠标移动）

点击按钮-最简单的事件绑定（无参函数）

格式

// 模板（Body）⾥⾯
<标签 v-on:事件类型="事件函数"></标签>
// 缩写
<标签 @事件类型="事件函数"></标签>// JS⾥⾯
new Vue({...methods:{ // 事件事件函数:function(){...}}
})

点击按钮-数字累加

数据绑定 --> js中的变量发生变化，body中的变量会随之发生变化。

Math.random()---随机数

Math.random() --> [0, 1)

Math.floor() --> 向下取整【floor---地板】

事件对象、节点对象（生成随机颜色快）

4.2、事件传参

// 缩写
<标签 @事件类型="事件函数(实参)"></标签>// JS⾥⾯
new Vue({...methods:{ // 事件事件函数:function(形参){ // 形参就是上⾯调⽤时候传递的数据...}}
})

1、调用函数的时候，不写参数【@click="change"】，

但<script></script>标签中Vue对象中的函数含参数【change: function (ev){}】，则-->ev代表事件对象。

2、【@click="change(30)"】--> ev代表30。【会报错！！！】

3、总之，就是：不传参，ev代表事件对象；传参：ev代表实参数据。

4.3、事件对象

// 缩写
<标签 @事件类型="事件函数"></标签>// JS⾥⾯
new Vue({...methods:{ // 事件事件函数:function(形参){ // 形参就是事件对象！ 形参⼀般⽤ e ev event 标识符表示...}}
})

4.4、既要传参又要获取事件对象（固定格式：$event）

// 缩写
<标签 @事件类型="事件函数(实参,$event)"></标签>// JS⾥⾯
new Vue({...methods:{ // 事件事件函数:function(形参,ev){ // 和上⾯实际传⼊⼀⼀对应。 $event就表示事件对象。...}}
})

事件对象-固定格式：$event

传3个参数

4.5、代码

运行截图

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>06、事件相关</title><script src="./vue.js"></script><style>.box {border: 2px solid blue;width: 100px;height: 100px;text-align: center;color: #fff;}</style>
</head><body><div id="app">{{num}}<!-- <button v-on:click="say">点击一下！</button> --><button @click="say">点击一下！</button><div class="box" @click="change"></div><hr><button @click="setNum(10)">将num设为10</button><button @click="setNum(20)">将num设为20</button><button @click="setNum(40)">将num设为40</button><div class="box" @click="setinfo('你好',$event,'red')"></div><div class="box" @click="setinfo('天下第一！',$event,'blue')"></div></div>
</body>
<script>new Vue({el: "#app",  // 作用的范围data: {      // 数据num: 1},methods: {   // 事件say: function () {// console.log(this)console.log(this.num)this.num++;},change: function (ev) {   //  【形参(ev)表示事件对象】console.log(ev)console.log(ev.target)  // 就是当前这个节点对象  div#box// Math.random()  生成一个0-1 之间的随机小数，包含0  不包含1// Math.floor()   向下取整let r = Math.floor(Math.random() * 256)   // [0,255]   let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)ev.target.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"console.log("change")},setNum: function (x) {    //  【形参就是上面调用的时候,传递的数据！】 console.log(x)this.num = x;},setinfo: function (str, event, color) {  // 【既要获得参数，又要获得事件对象！】console.log(str)console.log(event)console.log(color)event.target.style.backgroundColor = color;event.target.innerHTML = str;}}})
</script></html>

样式处理操作（模板、事件、属性绑定）

运行图

关键技术点

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>07、ToDoList</title><script src="./vue.js"></script><style>.bg {background-color: red;color: #fff;}</style>
</head><body><div id="app"><ul v-if="list.length"><!-- v-bind:class="变量/表达式/'字符串'" --><li v-for="(item,index) in list" v-bind:class=" item.iscom ? 'bg':'' ">序号：{{index+1}} ==>主题：{{item.title}}==>状态：{{item.iscom ? "完成":"待完成"}}==>操作：<!-- change：修改这一组、这一条的数据。 --><button v-if="!item.iscom" @click="change(item)">完成</button><button @click="del(index)">删除</button><hr></li></ul><h3 v-else>没有数据了哦！</h3></div>
</body>
<script>new Vue({el: "#app",data: {list: [{ title: "晚上出去看电影", iscom: false }, // iscom表示完成情况{ title: "明天去游泳", iscom: false },{ title: "做完作业", iscom: true },{ title: "一起开黑！", iscom: false },]},methods: {change: function (val) {  // val就是这一条数据val.iscom = true;},del(idx) {  // 删除的数据是数组里面的第几条console.log(idx)// 数组.splice(开始的位置,删除的个数)this.list.splice(idx, 1)}}})
</script></html>

样式操作

操作标签的class

操作标签的style

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>08、样式操作</title><script src="./vue.js"></script><style>.cc {background-color: blue;width: 100px;height: 100px;margin-top: 20px;}.active {background-color: orange;}</style>
</head><body><div id="app"><div id="box" :style="cssdesc"></div><!-- 掌握下面的这种 样式操作！ --><div :class="state ? 'cc active':'cc'" @click="toggle"></div></div>
</body>
<script>// 样式操作！// 操作标签的class// 操作标签的stylenew Vue({el: "#app",data: {cssdesc: {backgroundColor: "red",border: "2px solid blue",width: "100px",height: "100px"},state: false},methods: {toggle() {console.log(this) // Vue对象this.state = !this.state}}})// 网页制作的时候：// 行为、结构、表现三者分离！// JS   HTML   CSS
</script></html>

Tab切换

Vue.js简化代码 --> 减少工作量

原生实现Tab切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>09、原生实现tab切换</title><style>.title span {display: inline-block;padding: 5px 10px;background-color: #eee;}.title .active {background-color: red;color: #fff;}.box {width: 200px;height: 100px;border: 2px solid blue;}</style>
</head><body><div class="title"><span class="active">军事</span><span>音乐</span><span>娱乐</span></div><div class="content"><div class="box">军事的内容</div><div class="box" style="display: none;">音乐的内容</div><div class="box" style="display: none;">娱乐的内容</div></div>
</body>
<script>// 原生实现！// 1、给标题绑定事件var span = document.getElementsByTagName("span"); // 找到的是一个集合var box = document.getElementsByClassName("box");// 2、给每个都绑定一个点击事件for (var index = 0; index < span.length; index++) {// 给每个span节点对象，添加一个 xuhao 的属性  值为他所在的下标span[index].xuhao = index;  // 【重要！】span[index].onclick = function () {// 去掉所有标题的激活class            for (var idx = 0; idx < span.length; idx++) {span[idx].className = ""}// console.log(this)  // this就是当前点击的这个span节点对象！this.className = "active" // 当前这个激活！// 遍历下面所有的box，如果位置和 xuhao一致，就是显示，不一致就隐藏console.log(this.xuhao)for (var k = 0; k < box.length; k++) {if (k == this.xuhao) {box[k].style.display = "block"} else {box[k].style.display = "none"}}}}
</script></html>

Vue.js实现Tab切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>10、vue.js实现Tab切换</title><script src="./vue.js"></script><style>.title span {display: inline-block;padding: 5px 10px;background-color: #eee;}.title .active {background-color: red;color: #fff;}.box {width: 200px;height: 100px;border: 2px solid blue;}</style>
</head><body><div id="app"><div class="title"><span :class="curIndex==1 ?'active':''" @click="tab(1)">军事</span><span :class="curIndex==2 ?'active':''" @click="tab(2)">音乐</span><span :class="curIndex==3 ?'active':''" @click="tab(3)">娱乐</span></div><div class="content"><div class="box" v-if="curIndex==1">军事的内容</div><div class="box" v-if="curIndex==2">音乐的内容</div><div class="box" v-if="curIndex==3">娱乐的内容</div></div></div>
</body>
<script>new Vue({el: "#app",data: {curIndex: 1},methods: {tab(idx) {this.curIndex = idx;}}})</script></html>

JavaScript中的this关键字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>11、JavaScript中的this</title>
</head><body>
</body>
<script>// 1、函数里面的this    【情况1】 windowfunction show() {console.log(this)   // window  }show();console.log(window.show == show)// 2、对象里面方法的this   【情况2】  当前对象var person = {name: "张飞",age: 20,say: function () {console.log(this)    // person}}person.say();// 3、对象里面的方法里面的函数里面的thisvar person2 = {name: "张飞",age: 20,say: function () {console.log(this)    // person2function tt() {console.log(this)   //  window}tt();}}person2.say();// 4、函数里面的 对象里面的方法里面的thisfunction go() {console.log(this)    // windowlet obj = {name: "李四啊",run: function () {console.log(this)   // obj}}obj.run();}go()// 5、 es5定时器里面的this 是window。   // 6、节点对象的事件函数里面this 是当前节点var body = document.getElementsByTagName("body");console.log(body)body[0].onclick = function () {console.log(this)  // body节点！}// 7、构造函数里面的this  指的是实例化出出来的对象！   【3、构造函数里this】function Cat(name) {this.name = name;this.sayName = function () {console.log(this)}}var c1 = new Cat('波斯猫');var c2 = new Cat('黑猫警长')c1.sayName();c2.sayName();// 8、 call/apply/bind      【4、改变this的指向  （借用,谁借this就是指的谁！） 】var p1 = {name: "小明",cc: function () {console.log(this)}}var p2 = {name: "李四",age: 20}// 函数.apply(借用者)   函数里面的this就指向这个借用者！show.apply(p1)  // p1这对象 调用 show方法。 那么show方法里面的this就是p1p1.cc.apply(p2) // p2这个对象 调用了p1对象的cc方法，所以cc方法里面的this指向p2  </script></html>

多谢观看~

Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】相关推荐

js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
js 正则中冒号代表什么_javascript中正则表达式语法详解
好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要 ...
computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...
Python中self用法详解
Python中self用法详解 https://blog.csdn.net/CLHugh/article/details/75000104 首页博客学院下载图文课论坛 APP 问答商城 V ...
Asp.net中GridView使用详解(引)【转】
Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList ...
iOS中ImageIO框架详解与应用分析
2019独角兽企业重金招聘Python工程师标准>>> iOS中ImageIO框架详解与应用分析一.引言 ImageIO框架提供了读取与写入图片数据的基本方法,使用它可以直接获取到 ...
vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
props写法_Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...
ALSA声卡驱动中的DAPM详解之四：在驱动程序中初始化并注册widget和route
前几篇文章我们从dapm的数据结构入手,了解了代表音频控件的widget,代表连接路径的route以及用于连接两个widget的path.之前都是一些概念的讲解以及对数据结构中各个字段的说明,从本章开 ...

Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】

4、事件绑定

4.1、事件绑定（点击、双击、鼠标移动）

点击按钮-最简单的事件绑定（无参函数）

格式

点击按钮-数字累加

Math.random()---随机数

事件对象、节点对象（生成随机颜色快）

4.2、事件传参

4.3、事件对象

4.4、既要传参又要获取事件对象（固定格式：$event）

事件对象-固定格式：$event

传3个参数

4.5、代码

运行截图

代码

样式处理操作（模板、事件、属性绑定）

运行图

关键技术点

代码

样式操作

Tab切换

原生实现Tab切换

Vue.js实现Tab切换

JavaScript中的this关键字

Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】相关推荐

最新文章

热门文章