vue2.0基础

最新推荐文章于 2023-09-26 16:31:10 发布
最新推荐文章于 2023-09-26 16:31:10 发布
阅读量63 收藏
点赞数
文章标签： servlet mybatis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L030205/article/details/126651253
版权

样式绑定

style绑定

:style="{color:activeColor,fontSize:fontSize+'px'}"
:style="{style1,style2}"

<!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>
    <script src="./vue.js"></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="add">
        <!-- <div class="box" style="background: yellow;">张三</div> -->
        <!-- <div class="box" :style="{background: 'yellow'}"></div> -->
        <!-- <div class="box" :style="obj">
            张三
        </div> -->
        <div class="box" :style="[obj,obj1]">
            张三
        </div>
    </div>
</body>

</html>

其中activeColor/fontSize是data属性

class绑定

1: :class = "xxx"

2：表达式是字符串:"classA"

3: 表达式的对象:{{classA:isA,classB:isB}}

4: 表达式是数组:['classA','classB']

<!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>
    <script src="./vue.js"></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid #000;
        }

        .box1 {
            background-color: yellow;
        }

        .box2 {
            font-weight: bold;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div id="add">
        <!-- 
            class样式绑定
            1.变量
            2.绑定对象
            3.绑定数组
         -->
        <!-- <div class="box" :class="{box1:true,box2:true}">
            张三
        </div> -->

        <!-- <div class="box" :class="obj">
            张三
        </div> -->

        <div class="box" :class="['box1','box2']">
          张三
        </div>
    </div>
</body>

</html>

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>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="add">
        <div v-box></div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#add',
        data() {
            return {

            }
        },
        directives: {
            box(e) {
                e.style.border = '1px solid #000'
                e.style.height = '150px'
                e.style.width = '300px'


                var input = document.createElement('input')
                input.style.background = '#ccc'
                input.autofocus = true;
                input.placeholder='请输入...'
                input.style.height = '20px'


                e.appendChild(input)
            }
        }
    })
</script>

</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>
<style>
    .box {
        width: 300px;
        height: 200px;
        border: 2px solid #000;
    }
</style>

<body>
    <div class="box">
        <!-- <input type="text"> -->
    </div>
</body>
<script>
    // 直接获取dom
    var box = document.querySelector('.box')
    var input = document.createElement('input')
    input.placeholder = "请输入..."
    input.autofocus = true
    input.style.background = 'yellow'

    box.appendChild(input)
</script>

</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>
        .item {
            width: 500px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>

</html>

<script>
    window.addEventListener('scroll', () => {
        // console.log('123');

        // 可见区域高度
        let clientHeight = document.documentElement.clientHeight;

        // 整个文档高度
        let scrollHeight = document.documentElement.scrollHeight;
        // console.log(scrollHeight);

        // 滚动的高度
        let scrollTop = document.documentElement.scrollTop;

        if (clientHeight + scrollTop > scrollHeight) {
           console.log('触底了');
        }
    })
</script>

过滤器

<!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>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="add">
        <!-- 管道符:竖线 | -->
        <div>{{message | myCut | myAdd}}</div>
    </div>
</body>

</html>

<script>
    let vm = new Vue({
        el: '#add',
        data: {
            message: '河北唐山欢迎你'
        },
        filters: {
            myCut(val) {
                console.log(val);
                return val.slice(4, 6)
            },
            myAdd(val) {
                return val + '你来河北唐山吃烧烤'
            }
        }
    })
</script>

L030205
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue基础2
enginebrkalsy的博客
04-21 787
上节复习 随着flag旗子true/false变颜色： <!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-sca
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 7025
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 3211
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
热门推荐
每天进步一点点
05-09 6万+
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 321
页面： 吸顶方法：
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 6748
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
vue2.0基础教程
02-01
Vue.js 是一款非常流行的前端JavaScript框架，特别是在2.0版本发布后，它的使用率和影响力进一步提升。Vue2.0引入了许多改进和...在VUE2.0基础笔记中，你将找到更多详细的教程和示例，帮助你深化理解并熟练运用Vue2.0。
学习 vue2.0基础 双向绑定
04-02
学习 vue2.0基础 双向绑定
vue2.0 基础组件 component
04-12
学习视频
Vue2.0基础入门.md
10-21
Vue2.0基础入门.md
vue2.0项目案例
08-24
Vue2.0在Vue1的基础上进行了优化和改进，引入了虚拟DOM、组件性能优化、异步组件加载等特性。其中，虚拟DOM提高了UI更新的效率，降低了内存消耗。Vue2.0还引入了单文件组件（Single File Components，SFC），将HTML...
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
YY的博客
10-21 1144
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
css里dom宽度,2019-08-23 DOM中各种高度、宽度
weixin_42520025的博客
08-04 1143
1.引言对常见CSS x,y属性有大概了解，实际运用过程中发现很多概念模糊不清，对其进行学习。2.常见x,y属性概念1. e.clientX 是目标点距离浏览器可视范围的X轴坐标2. e.pageX 是目标点距离document最左上角的X轴坐标，即触发事件点相对于当前浏览器可视窗口左上角的横向距离，加上滚动条的滚动距离[没有滚动条时pageX=clientX,有滚动条时pageX=clientX...
js的clientX、pageX、screenX等方法来获取鼠标坐标详解
weixin_41652495的博客
09-26 1455
记录js的clientX、pageX、screenX
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1539
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2651
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
pageX、clientX等的区别
我的blog屋
05-26 1万+
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ cons...
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
最新发布
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
Vue2.0 基础笔记：MVVM设计模式和组件化思想
<div id="app"></div>", data:{ message:"Hello Vue!" } }); 2.2 模板语法模板语法是一种特殊的 HTML 语法，用来将模板中的数据渲染到页面上，在模板中使用双大括号{{}}包含数据，被包含的数据会被渲染到页面上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值