VUE-DAY01

最新推荐文章于 2024-07-19 10:30:06 发布
置顶 最新推荐文章于 2024-07-19 10:30:06 发布
阅读量206 收藏
点赞数
分类专栏： VUE vue学习笔记 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221321/article/details/112210574
版权

VUE-来源bilibili

04、简单Vue创建实例

总结:

(1)定义变量:let 定义变量 ； const 定义常量；
(2)const app = new Vue ({
el:加上绑定的元素；
data:{ }
})
其中创建实例关键字为new，Vue指调用vue.js中的Vue函数直接调用函数进行创建实例，类似于var
app= function Vue();

    <div id="app">
        <p>{{message}}</p>
        <p>{{name}}</p>
    </div>

//适合数据，代码分离
    <script src="../js/vue.js"></script> <!-- 引入vue.js -->
    <script>
        // let 变量  const 常量
        //对象类型
        const app = new Vue ({ 
            el:'#app',  //用于挂载管理的元素           
            data: { 
             	           
                message: 'hello world',//定义数据  
                name:'anna'
 
            }
        }) 
    </script>

在这里插入图片描述

05、（掌握）Vue列表的展示

指令：v-for 可循环遍历数组
语法 v-for=“item in array”

<body>
    <div id="app">
    //vue实例管理者app的数据，通过v-for="item in array"来遍历数组进行展示
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
//引入vue
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['海贼王','奶爸','超越','大话西游'],
        }
    })
</script>
    
</body>

在这里插入图片描述

06、（掌握）计数器实现

目的：编写一个计数器，实现加减并输出操作
先编写大概的结构

<div id="app">
    <h2>当前计数:{{counter}}</h2>
    <button>+</button>
    <button>-</button>
</div>

在这里插入图片描述
为了监听按钮，绑定事件，使用指令v-on,因为是click事件配置counter的加减，所以为v-on:click=counter++

    <div id="app">
    <h2>当前计数:{{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    </div>


    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                counter:0
            }
        })

    </script>

另外，使用语法糖可简写v-on:click=“couter++” 为@click=“counter++”,效果一样，把v_on 变成了**@** 表示

<button @click="counter--">-</button>

此时已经能够实习加减操作了，但是不能满足复杂的操作，需要运用函数才能处理，这里用函数加上了输出的功能
使用methods(方法)去定义，这里的this，因为在同一对象app里，所以this.counter就是app.counter,如果直接使用counter++是会影响全局的counter

<body>
    <div id="app">
    <h2>当前计数:{{counter}}</h2>
    <button v-on:click="add">+</button>
    <button @click="sub">-</button>
    </div>


    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                counter:0
            },
            methods:{
                add: function(){
                    console.log('add'),
                    this.counter++
                },
                sub: function(){
                    console.log('sub'),
                    this.counter--

                }
            }
        })

    </script>
</body>

在这里插入图片描述

07（理解）vue的MVVM

维基百科MVVM
当有数据绑定时，Viewmodel会自动把数据绑定到view上
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
所以也可以这样单独把model提取出来，由于有内部代理，所以obj的值都赋予到了实例里的data了
在这里插入图片描述

在这里插入图片描述

08、（理解）vue的options对象

vue 对象
在这里插入图片描述

如何区别函数和对象
函数：function
方法：method
在类里面的叫方法，与实例相挂钩（面向对象）

09、（理解）vue的生命周期

vue生命函数详解
生命周期：事物从开始到消亡的过程
created 钩子可以用来在一个实例被创建之后执行代码：

        const app = new Vue({
            el: '#app',
            data:obj,
            methods:{
                add: function(){
                    console.log('add'),
                    this.counter++
                },
                sub: function(){
                    console.log('sub'),
                    this.counter--

                }
            },
            created: function(){
                    console.log ('created');                     
            
            }
        })

在这里插入图片描述
vue源码下载
查看new Vue的源码，先进到这个index.js
在这里插入图片描述
在这里插入图片描述
再进到.\instance\index.js
在这里插入图片描述
在这里回调了created函数，代表生命周期已经到了这里
在这里插入图片描述

10、（理解）生命周期函数有哪些

mounted、updated 和 destroyed等
在这里插入图片描述

12、插值操作-mustache语法

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{message}},xxx</h2>
        <!-- mustache不仅可以直接写变量，也可以写见简单阿达表达式-->
        <h2>{{firstname + lastaname}}</h2>
        <h2>{{firstname + '  ' + lastname}}</h2>
        <h2>{{firstname}}  {{lastname}}</h2>
        <h2>{{counter * 2}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                firstname: 'kobe',
                lastname: 'bryant',
                counter: 100
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

13、插值操作-其他指令使用

（1）v-once

在这里插入图片描述

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
        
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好'
            }
        })

        
    </script>
</body>

效果：当改变message的值时，加了v-once指令的不会被修改
在这里插入图片描述

（2）v-html

希望请求服务器的链接，如果服务器返回的是带a标签的链接百度一下 '
想要把链接直接展示到页面上

<body>
    <div id="app">
        <h2>{{url}}</h2>
        <h2 v-html="url"></h2>      
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                url:'<a href="http://www.baidu.com">百度一下 </a>'
            }
        })

        
    </script>
</body>

将链接格式化显示
在这里插入图片描述

（3）v-text

功能类似与mustache语法一样，用于显示；
这里注意，v-text会覆盖掉这之后的东西，所以一般很少使用

<body>
    <div id="app">
        <h2>{{message}},xxx</h2>
        <h2 v-text="message">,xxx</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
            }
        })       
    </script>
</body>

在这里插入图片描述

（4）v-pre

v-pre会不解析，直接显示内容

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
            }
        })       
    </script>
</body>

（5）v-cloak,可用于解决插值闪烁问题

先手动模拟延迟，因为代码是由上到下解析的

<body>
    <div id="app">
        <h2>{{message}}</h2>

    </div>
    <script src="../JS/vue.js"></script>
    <script>
        setTimeout(function(){
            const app = new Vue({
                el: '#app',
                data:{
                    message:'你好',
                }
            })  
        },2000)
    </script>
</body>

先出现如图，先渲染{{message}},两秒后解析的js代码执行，渲染完成才出来内容，导致加载会出现闪烁
在这里插入图片描述

<!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>v-cloak</title>
    <style>
        /* 根据有没有属性进行样式的显示,
        当有这个属性时不显示，则不显示，
        没有这个属性时就会直接显示内容，
        就不会出现插值闪烁的问题*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 v-cloak>{{message}}</h2>

    </div>
    <script src="../JS/vue.js"></script>
    <script>
        // vue解析前有一个属性 v-cloak
        // vue解析后就没有了属性 v-cloak
        setTimeout(function(){
            const app = new Vue({
                el: '#app',
                data:{
                    message:'你好',
                }
            })  
        },2000)
    </script>
</body>
</html>

在这里插入图片描述

14、掌握 绑定属性

（1）v-bind的基本使用

在这里插入图片描述
网站上的图片一般都是从服务器请求，不会写死

<body>
    <div id="app">
        <img src="{{imgurl}}">
        <img v-bind:src="imgurl" >
        <a v-bind:href="hrefurl">百度一下</a>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                imgurl:'https://i0.hdslb.com/bfs/sycp/creative_img/202102/846d523bc004837160b1bd06c64dc8f4.jpg@880w_388h_1c_95q',
                hrefurl:'http://www.baidu.com'
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
v-bind可以使用语法糖写法，如下：

    <div id="app">
        <img :src="imgurl" >
        <a :href="hrefurl">百度一下</a>
    </div>

（2）v-bind动态绑定class（1）

<body>
    <div id="app">
        <h2 :class='active'>{{message}}</h2>
        <h2 v-bind:class='active'>{{message}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                active:'active'
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

15、掌握 v-bind动态绑定class（对象语法）

通过按钮来控制字体颜色变化

 <!-- 大括号跟上对象，可写键值对 -->
 <h2 v-bind:class={key1:value1,key2:value2}>{{message}}</h2>

key一般为类名，值一般为布尔值

<!-- 当布尔值为true时，添加class为类名1.类名2同理，后续通过控制布尔值来控制类名-->
 <h2 v-bind:class={类名1:boolean,类名2:boolean}>{{message}}</h2>

<h2 v-bind:class="{active:true,line:true}">{{message}}</h2>

可以看到为true就可以添加进class
在这里插入图片描述
将布尔值放到data里进行控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind(3)</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <h2 :class='active'>{{message}}</h2>
        <h2 v-bind:class='active'>{{message}}</h2> -->

        <!-- 大括号跟上对象，可写键值对 -->
        <!-- <h2 v-bind:class={key1:value1,key2:value2}>{{message}}</h2> -->


        <!-- 当布尔值为true时，添加class为类名1.类名2同理，后续通过控制布尔值来控制类名-->
        <!-- <h2 v-bind:class={类名1:boolean,类名2:boolean}>{{message}}</h2> -->
        <h2 v-bind:class="{active:isactive,line:isline}">{{message}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                isactive:'true',
                isline:'false'
            },
        })
    </script>
</body>
</html>

在这里插入图片描述
增加按钮控制布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind(3)</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <h2 :class='active'>{{message}}</h2>
        <h2 v-bind:class='active'>{{message}}</h2> -->

        <!-- 大括号跟上对象，可写键值对 -->
        <!-- <h2 v-bind:class={key1:value1,key2:value2}>{{message}}</h2> -->


        <!-- 当布尔值为true时，添加class为类名1.类名2同理，后续通过控制布尔值来控制类名-->
        <!-- <h2 v-bind:class={类名1:boolean,类名2:boolean}>{{message}}</h2> -->
        <h2 v-bind:class="{active:isactive,line:isline}">{{message}}</h2>
        <button v-on:click='btnclick'>点击按钮控制布尔值更换颜色</button>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                isactive:'true',
                isline:'false'
            },
            methods:{
                btnclick:function(){
                    this.isactive = !this.isactive
                }
            }
        })
    </script>
</body>
</html>

效果
在这里插入图片描述

 <h2 class='title',v-bind:class="{active:isactive,line:isline}">{{message}}</h2>

并且这里的class可以合并，所以当有固定的样式时可以直接写，如果是会改变的class则用data进行控制

扩展:

 <h2 class='title',v-bind:class="{active:isactive,line:isline}">{{message}}</h2>

可缩写为如下，此时getclass()是一个计算属性

 <h2 class='title' v-bind:class="{active:isactive,line:isline}">{{message}}</h2>
 <!-- 缩写 -->
<h2 class='title' v-bind:class="getclass()">{{message}}</h2>
<button v-on:click='btnclick'>点击按钮控制布尔值更换颜色</button>

并且在方法中添加对应的函数，这里的this是因为使用了app中data的数据

methods:{
   btnclick:function(){
   	    this.isactive = !this.isactive
   },
   getclass:function(){
        return {active:this.isactive,line:this.isline}
	}
}

16、掌握 v-bind动态绑定class（数组语法）

待补充

17、总结+作业

在这里插入图片描述

18、 掌握 v-bind动态绑定style（对象语法）

可利用v-bind:style来绑定一些内联样式

<!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 :style="{key:vlaue}">{{message}}</h2> -->
        <!-- <h2 :style="{属性名:属性值}">{{message}}</h2> -->
        <!-- 50px必须加上单引号，否则会当作变量解析 -->
        <!-- <h2 :style="{fonSize: '50px'}">{{message}}</h2> -->
        <h2 :style="{fontSize:finalsize + 'px',color:finalcolor}">{{message}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                finalsize: 100,
                finalcolor: 'red',
            }
        })       
    </script>  
</body>
</html>

效果：
在这里插入图片描述
也可以单独把对象提取到函数中：

<body>
    <div id="app">
        <!-- <h2 :style="{key:vlaue}">{{message}}</h2> -->
        <!-- <h2 :style="{属性名:属性值}">{{message}}</h2> -->
        <!-- 50px必须加上单引号，否则会当作变量解析 -->
        <!-- <h2 :style="{fonSize: '50px'}">{{message}}</h2> -->
        <h2 :style="{fontSize:finalsize + 'px',color:finalcolor}">{{message}}</h2>
        <h2 :style=getstyle()>{{message}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                finalsize: 100,
                finalcolor: 'red',
            },
            methods:{
                getstyle:function(){
                    return {
                        fontSize:this.finalsize + 'px',color:this.finalcolor
                    }
                }
            }
        })       
    </script>  
</body>

19 掌握 v-bind动态绑定style（数组语法）

将对象提取出来作为数组中的一个

<body>
    <div id="app">
        <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好',
                baseStyle:{color:'red'},
                baseStyle1:{fontSize:'100px'},
            }
        })       
    </script>
</body>

20、掌握-计算属性的基本使用

<body>
    <div id="app">
        要显示lv ruohan 的效果
        <!-- 第一种 -->
        <h2>{{firstname+' '+lastname}}</h2>
        <!-- 第二种-->
        <h2>{{firstname}} {{lastname}}</h2>
        <!-- 第3种 方法的形式-->
        <h2>{{getfullname()}}</h2>
        <!-- 第4种 计算属性，实际是个属性值-->
        <h2>{{fullname}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                firstname:'lv',
                lastname:'ruohan'
            },
            computed:{
                fullname:function(){
                    return this.firstname + ' ' + this.lastname
                }
            },
            methods:{
                getfullname:function(){
                    return this.firstname + ' ' + this.lastname
                }
            }
        })       
    </script>
</body>

在这里插入图片描述

21、掌握-计算属性的复杂操作

自动计算书本总和
// methods比较适合循环输出，调几次就几次，没有缓存
// 计算属性在多次调用时只调用一次 ，有缓存，节省性能

<!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>v-text</title>
  </head>
  <body>
    <div id="app">
      <h2>总价格：{{totalPrices}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          books: [
            { id: 110, name: "unix编程", price: 119 },
            { id: 111, name: "代码大全", price: 105 },
            { id: 112, name: "js教程", price: 98 },
            { id: 113, name: "vue教程", price: 87 },
          ],
        },
        computed: {
          totalPrices: function () {
            let result = 0;
            for (let i = 0; i < this.books.length; i++) {
              result += this.books[i].price;
            }
            return result;
          },
        },
        // methods比较适合循环输出，调几次就几次，没有缓存
        // 计算属性在多次调用时只调用一次 ，有缓存，节省性能
      });
    </script>
  </body>
</html>

在这里插入图片描述

语法糖

v-bind -> :
v-on-> @

卷毛崽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE
weixin_39363320的博客
10-09 98
VUE 一、基本介绍 1.基础 1.设计模式 MVC 业务逻辑，数据，界面显示分离，改变交互不需要改变业务逻辑。 优点：耦合性低，生命周期成本低，重用性高 缺点：模型视图严格分离 MVP 数据层，视图层，发布层，在视图中不直接使用model,之间的通信通过Presenter进行，交互都在其中，而MVC中直接从model中读取数据。 MVVM 利用一些指令绑定，就能在model和viewModel保持不变的情况下，将ui与逻辑分离，model代表我们所需要的数据模型，不会影响浏览器如何展示数据。 2.双向
Vue---Vue组件
前端与计算机相关知识的分享，博主的qq523235674
02-27 692
一.现实中的组件化思想体现 * 标准 * 分治 * 重用 * 组合 二.编程中的组件化思想体现 三.组件化开发思想 1.组件化规范：Web Components * 我们希望尽可能多的重用代码 * 自定义组件的方式不太容易 （html、css、js） * 多次使用组件可能会导致样式等冲突 Web Components通过创建封装好功能的定制元素解决上述问题 官网： Web Components | MDN Vue部分实现了上述规范 四.组件注册 1.全...
vue 购物车demo 用到了计算属性computed v-for @click
冲锋
04-30 4119
template模板 &lt;template&gt; &lt;div class="two"&gt; &lt;table border="1px solid #666" style="width:500px;"&gt; &lt;thead&gt; &lt;tr&gt;
运用vue的方法，计算属性，监听实现计算器
m0_67587581的博客
03-30 79
methods属性用来定义方法通过在input上添加@click属性来绑定事件，当数据改变的时候触发方法来改变数据。Vue提供了computed来观察和响应数据变化，当数据需要随着其他数据变化时会重新进行计算返回新的结果。watch状态监听功能可以在数据变化的同时调用当前数据绑定的事件处理方法。
vue3 事件处理 @click
一步一个脚印，踏实努力，向着目标前进
08-17 9834
在Vue 3中，事件处理可以通过@click指令来实现。@click指令用于监听元素的点击事件，并在触发时执行相应的处理函数。下面是一个简单的示例，展示了如何在Vue 3中处理点击事件：
vue-day01思维导图
10-15
vue入门思维导图，自己学习的一个大概方向。上传的是xmind文件，可以看备注详情
vue-基础-day01.md
01-10
vue-基础-day01.md
vue-mobile-calendar:a vue component of calendar for mobile移动端vue日期选择组件
05-17
vue-mobile-calendar a vue component of calendar for mobile 移动端日期选择器（>=vue2.0） ，或手机扫描下方二维码 ...[ feat ] 新增日期中显示自定义内容v-slot:day，使用方法查看demo-9 [ ] during 模式下，增加
day01-VUE进阶
10-29
Vue.js 进阶教程概览 本课程旨在教授高级软件人才，快速掌握 Vue.js 进阶技术，涵盖了 Vue.js 基础知识的回顾、路由、状态管理、TypeScript 等高级主题。 一、基于脚手架创建前端工程 1. 使用 Vue CLI 创建前端...
Vue入门day01笔记
10-27
我是新手，今天的笔记，看视屏自己做的笔记，记录一下第一次用这个
Vue自定义组件父组件实现@click点击事件绑定的方法（实现计数器）
weixin_46816740的博客
09-11 3311
自定义组件的实现中，是实现一个计数器编程，原本是绑定在子元素上的@click事件，尝试绑定在自定义组件的父元素上进行实现。 原来的子元素绑定实现计数器代码如下： <body> <div id="app"> <briup-info>{{count}}</briup-info> </div> </body> Vue.component("briup-info",{ template:`
vue @click 多个事件_VUE学习记录3
weixin_39599372的博客
11-25 880
v-on的基本使用​ 在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下：<!DOCTYPE html> ​ 使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的语法糖，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的<button @click="increment"&gt...
vue @click 绑定的函数,传入事件对象和自定义参数
weixin_49295900的博客
10-13 2071
1.仅传入自定义参数 html: <div id="app"> <button @click="tm(123)">ddddd</button> </div> js: new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); //会输出 123 } } }) 2.仅传入事件对象 html: <div id="app
vue.js @click 与属性 $watch 的结合使用
ym563099457的博客
09-11 2649
 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器： &lt;body&gt; &lt;div id = "app"&gt;  &lt;p style = "font-size:25px;"&gt;计数器: {{ counter }}&lt;/p&gt; &lt;button @click = "counter
1、ClickCounter计数器Demo
u013072477的博客
04-09 439
创建一个项目，默认包含如下文件： 1、src：源码 2、public： 3、README.md 4、package.json 5、node_modules src/index.js文件是入口 实现一个点击按钮计数组件： index.js文件如下： import React from "react"; import ReactDOM from "react-dom"; impor...
点击一下counter增加1的做法代码
weixin_40945354的博客
12-06 351
<template> <div class="hello"> 我是哈蜜瓜 <h1>{{ msg }}</h1> <div @click="counter"> counter: {{ counter }} </div> </div> </template> <script> export default { name: 'HelloWorld
事件监听v-on的基本使用
weixin_46429290的博客
08-15 247
事件监听 v-on的基本使用 用监听按钮点击事件简单的实验v-on的使用，来完成点击按钮后实现数字加或减采用两种方式，一个是counter++，另一个是调用方法 {{counter}} //方法1： + - //方法2： + - v-on的语法糖：@ + - -> <button @click=“counter++”>+ <button @click=“counter–”>-当通过methods中定义方法，以供h@click进行调用时，要注意参数的传输情况1、如果不需要传入
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 405
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
使用Vue实现点击页面触发特效
最新发布
qq_45569925的博客
07-19 719
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue-cron默认值
02-29
vue-cron 是一个基于 Vue.js 的 cron 表达式生成器组件。它可以帮助用户生成 cron 表达式，并提供了一些默认值来简化使用。 vue-cron 的默认值如下： 1. 秒（Seconds）：默认为 "0"，表示每分钟的第 0 秒执行。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值