vue框架

1. 缩略图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js">
            
        </script>
        
        <!--=========样式==========-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            #box1{
                /*background-color: lightgoldenrodyellow;*/
                height: 310px;
            }
            
            #box1>img{
                /*background-color: yellowgreen;*/
                height: 100%;
                width: 450px;
            }
            
            
        </style>
        
    </head>
    <body>
        <!--=============HTML代码============-->
        <div id="box1">
            <img src=""/>
        </div>
        
        <div id="box2">
            
        </div>
        
        <!--===============js代码============-->
        <script type="text/javascript">
            //1.准备数据
            var allData = [
                {smallImg:'thumb-1.jpg', bigImg:'picture-1.jpg'},
                {smallImg:'thumb-2.jpg', bigImg:'picture-2.jpg'},
                {smallImg:'thumb-3.jpg', bigImg:'picture-3.jpg'}
            ]
            
            //2.创建数据对应的节点
            allData.forEach(function(item,index,arr){
                //设置大图
                if(index == 0){
                    $('#box1 img').attr('src', 'img/'+item.bigImg)
                }
                
                //创建小图
                imgNode = $('<img />')
                imgNode.attr('src', 'img/'+item.smallImg)
                //给js对象绑定属性
                imgNode[0].bigImg = item.bigImg
                $('#box2').append(imgNode)
            })
            
            //3.绑定事件
            $('#box2').on('mouseover','img',function(){
                console.log('=====:',this.bigImg)
                $('#box1 img').attr('src', 'img/'+this.bigImg)
            })
            
            
        </script>
    </body>
</html>

2. 改变颜色实现闪烁效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/tool.js"></script>
        
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            
            #box1{
                width: 700px;
                height: 350px;
                margin-left: auto;
                margin-right: auto;
                
                border: 1px solid rgb(50,50,50);
                
                /*隐藏子标签超出的部分*/
                /*overflow: hidden;*/
            }
            

            
            
            #box2{
                margin-top: 10px;
                text-align: center;
            }
            
            #box2 button{
                width: 60px;
                height: 35px;
                
                background-color: orangered;
                color: white;
                font-size: 20px;
                
                border: 0;
            }
            
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2">
            <button>添加</button>
            <button>闪烁</button>
        </div>
        
        <!--=====添加=====-->
        <script type="text/javascript">
            $('#box2>button:first').on('click', function(){
                //创建标签
                smallBoxNode = $('<div style="width: 70px; height: 70px; float: left;"></div>')
                smallBoxNode.css('background-color', randomColor(0.6))
                
                //添加标签
                $('#box1').prepend(smallBoxNode)
                
                //删除溢出的盒子
                if($('#box1 div').length > 50){
                    $('#box1 div:last').remove()
                }
            })
        </script>
        
        <!--=======闪烁=======-->
        <script type="text/javascript">
            $('#box2 button:last').on('click', function(){
                if(this.innerText == '闪烁'){
                    this.innerText = '暂停'
                    t1 = setInterval(function(){
                        divNodes = $('#box1 div')
                        for(x=0;x<divNodes.length;x++){
                            divNode = divNodes[x]
                            $(divNode).css('background-color', randomColor(0.6))
                        }
                    }, 100)
                    
                }else{
                    this.innerText = '闪烁'
                    clearInterval(t1)
                }
                
            })
        </script>
        
        
        
    </body>
</html>

3. 轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        
        <style type="text/css">
            *{
                margin: 0;
                padding-right: 0;
            }
            
            #box{
                width: 800px;
                height: 400px;
                background-color: lightblue;
                
                margin: auto;
                
                position: relative;
            }
            #box img{
                width: 100%;
                height: 100%;
                
                z-index: 0;
            }
            
        
            #pointBox{
                z-index: 10;
                /*background-color: red;*/
                
                position: absolute;
                bottom: 20px;
                width: 100%;
            }
            #pointBox ul{
                /*background-color: yellow;*/
                overflow: hidden;
                
                text-align: center;
                width: 150px;
                margin: auto;
                    
                
            }
            /*点的布局*/
            #pointBox li{
                /*background-color: pink;*/
                float: left;
                
                list-style-type: none;
                
                margin-right: 10px;
                
                cursor: pointer;
            }
            
        </style>
    </head>
    <body>
        <div id="box">
            <img src=""/>
            <div id="pointBox">
                <ul></ul>
            </div>
        </div>
        
        <script type="text/javascript">
            //准备数据
            var images = ['img/slide-1.jpg','img/slide-2.jpg','img/slide-3.jpg','img/slide-4.jpg']
            
            //获取图片标签
            const imgNode = $('#box img')

            //绑定播放位置
            imgNode.index = 0
            imgNode.attr('src', images[0])
            
            //保存当前选中的点
            var currentPointNode = null
            
            //创建点对应的标签
            images.forEach(function(item, x, arr){
                liNode = $('<li style="color: green;">●</li>')
                liNode[0].index = x
                liNode.attr('id', 'li'+x)
                $('#pointBox ul').append(liNode)
                
                //设置第一个圆点的初始状态
                if(x == 0){
                    currentPointNode = liNode
                    liNode.css('color', 'red')
                }
                
            })
            
            //鼠标进入圆点的时候
            $('#pointBox').on('mouseover', 'li', function(){
                //关闭定时器
                clearInterval(timer)
                imgNode.index = this.index
                console.log('=====:',imgNode, images[this.index])
                //修改样式
                imgNode.attr('src', images[this.index])
                $(this).css('color', 'red')
                
                currentPointNode.css('color', 'green')
                currentPointNode = $(this)
                
                
            })
            
            //鼠标离开圆点事件
            $('#pointBox').on('mouseleave', 'li', function(){
                timer = startMove()
            })
            
            
            //自己动
            function startMove(){
                var t1 = setInterval(function(){
                    //切换图片
                    imgNode.index += 1
                    if(imgNode.index >= images.length){
                        imgNode.index = 0
                    }
                    
                    imgNode.attr('src', images[imgNode.index])
                    
                    //切换点的状态
                    let tLiNode = $('#li'+imgNode.index)
                    tLiNode[0].index = imgNode.index
                    tLiNode.css('color', 'red')
                    currentPointNode.css('color', 'green')
                    currentPointNode = tLiNode
                    
                    
                }, 1000)
                
                return t1
            }
            timer = startMove()
            
        </script>
        
    </body>
</html>

4. 可拖拽元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                
                var isMove = false
                var old_offsetX, old_offsetY
                
                //点击方块切换上下层位置
                var maxZIndex = 3
                $('body').on('mousedown','div',function(evt){
                    $(this).css('z-index', maxZIndex)
                    maxZIndex++
                    
                    //鼠标在div上才可以动
                    isMove = true
                    //保存鼠标开始的位置
                    old_offsetX = evt.offsetX
                    old_offsetY = evt.offsetY
                })
                
                //鼠标弹起不能动
                $('body').on('mouseup',function(){
                    isMove = false
                })
                
                //鼠标离开也不能动
                $('body').on('mouseleave','div',function(){
                    isMove = false
                })
                
                //移动div
                $('body').on('mousemove','div', function(evt){
                    if(isMove){
                        $(this).css('left', evt.clientX - old_offsetX)
                        $(this).css('top', evt.clientY - old_offsetY)
                    }
                })
                
                
                
                
                
        
            })
        </script>
        
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            div{
                width: 250px;
                height: 250px;
                
                position: absolute;
            }
            
            #box1{
                background-color: red;
                
                left: 200px;
                top: 200px;
                
            }
            #box2{
                
                background-color: green;
                
                left: 250px;
                top: 220px;
            }
            #box3{
                
                background-color: cornflowerblue;
                
                left: 400px;
                top: 300px;
            }
            
            
        </style>
        
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </body>
</html>

5. 房屋信息界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>房屋信息</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/tool.js"></script>
        <script type="text/javascript">
            
            function creatUI(data){
                //1.创建盒子
                let boxNode = $('<div class="box1"></div>')
                $('#box').append(boxNode)
                //2.图片
                let imgNode = $('<img class="icon"/>')
                imgNode.attr('src', data.image)
                boxNode.append(imgNode)

                //3.小盒子
                let smallBoxNode = $('<div class="box2"></div>')
                boxNode.append(smallBoxNode)
                
                //4.标题
                let titleNode = $('<p class="title"></p>')
                titleNode.text(data.title)
                smallBoxNode.append(titleNode)
                
                //5.其他信息
                let otherInfoBoxNode = $('<div class="other"></div>')
                smallBoxNode.append(otherInfoBoxNode)
                
                //名字
                if(data.name){
                    let nameNode = $('<font class="name"></font>')
                    nameNode.text(data.name)
                    otherInfoBoxNode.append(nameNode)
                    otherInfoBoxNode.append($('<font> | </font>'))
                }
                
                //户型
                if(data.type){
                    let typeNode = $('<font class="type"></font>')
                    typeNode.text(data.type)
                    otherInfoBoxNode.append(typeNode)
                    otherInfoBoxNode.append($('<font> | </font>'))
                }
                
                //面积
                if(data.area){
                    let areaNode = $('<font class="area"></font>')
                    areaNode.text(data.area)
                    otherInfoBoxNode.append(areaNode)
                }
                
                //6.价格
                let priceNode = $('<p class="price"></p>')
                priceNode.text(data.price)
                smallBoxNode.append(priceNode)
            }
            
            $.ajax({
                type:"get",
                url:"http://rap2api.taobao.org/app/mock/177073/houseList",
                async:true,
                dataType:'json',
                success: function(result){
                    console.log(result)
                    //获取房屋信息列表
                    datalist = result.datalist
                    datalist.forEach(function(item, x, arr){
                        creatUI(item)
                    })
                }
            });
        </script>
        
        
        <!--==============样式=================-->
        <style type="text/css">
            /*大盒子*/
            .box1{
                /*background-color: lavender;*/
                width: 100%;
                height: 180px;
                
                border-bottom: 1px solid rgba(190,190,190,0.6);
                /*border-top: 1px solid rgb(190,190,190);*/
            }
            
            /*图片*/
            .icon{
                height: 150px;
                width: 200px;
                
                float: left;
                margin-top: 15px;
            }
            
            
            /*图片后面的小盒子*/
            .box2{
                float: left;
                
                margin-left: 10px;
                margin-top: 15px;
            }
            
            
            /*标题*/
            .title{
                font-size: 22px;
                color: rgb(50,50,50);
            }
            
            .other{
                color: rgb(190,190,190);
                font-size: 13px;
            }
            
            .price{
                color: red;
                font-size: 20px;
            }
            
            
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>

6. vue基础

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue基础</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!--
            Vue主要包含两个部分：Vue对象和指令
            1.Vue对象
            var 对象名 = new Vue({
                el:关键对象的选择器,
                data: 数据对象(属性和值自己决定),
                methods:方法对象(属性对应的值是方法)
            })
            
            
        -->
        
    </head>
    <body>
        <!--1.设置标签内容-->
        <!--<p id="app-1">
            {{name}}
        </p>
        <script type="text/javascript">
            var app1 = new Vue({
                el:'#app-1',
                data:{
                    message:'我是p标签',
                    name: '认识Vue.js'
                }
            })
        </script>-->
        
        <!--<div id="app-2">
            <p>{{pText}}</p>
            <a href="">{{aTitle}}</a>
            <h1>{{title}}</h1>
        </div>
        
        <script type="text/javascript">
            var app2 = new Vue({
                el:'#app-2',
                data:{
                    pText: '我是段落',
                    aTitle: '百度一下',
                    title: '我是标题1'
                }
            })
        </script>-->
        
        <!--2.设置标签属性值
            v-bind:属性='Vue属性名'
        -->
        <!--<div id="app-3">
            <img v-bind:src="imageUrl" v-bind:title="name"/>
        </div>
        
        <script type="text/javascript">
            var app3 = new Vue({
                el:'#app-3',
                data:{
                    imageUrl:'img/a1.jpg',
                    name: '路飞'
                }
            })
            
        </script>-->
        
        <!--3.if语句：
            v-if='条件语句'  -- 如果条件语句的结果是true,标签就显示，否则不显示
        -->
        <div id="app-4">
            <!--如果message的值是空就隐藏，否则显示-->
            <p v-if="message">内容是:{{message}}</p>
            
            <!--如果message的值是123就显示，否则隐藏-->
            <p v-if="message=='123'">内容是:{{message}}</p>
        </div>
        <script type="text/javascript">
            var app4 = new Vue({
                el:'#app-4',
                data:{
                    message: 'Vue.js'
                }
            })
        </script>
        
        
        <!--4.循环结构:
            v-for="变量 in 数组属性"
        -->
        <!--<div id="app-5">
            <ul>
                <li v-for="mesage in names"><img v-bind:src="mesage['img']"/>{{mesage.name}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var app5 = new Vue({
                el:'#app-5',
                data:{
                    names:[
                        {img:'img/a1.jpg', name:'python'},
                        {img:'img/a2.jpg', name:'前端H5'},
                        {img:'img/a3.jpg', name:'java大数据'},
                        {img:'img/luffy.jpg', name:'物联网'}
                    ]
                }
            })
        </script>-->
        
        <!--5.事件绑定:
            v-on:事件名='函数名' 
        -->
        <!--<div id="app-6">
            <p>{{num}}</p>
            <button v-on:click="addAction">加1</button>
        </div>
        <script type="text/javascript">
            var app6 = new Vue({
                el:'#app-6',
                data:{
                    num: 0
                },
                methods:{
                    addAction: function(){
                        this.num ++
                    }
                }
                
            })
        </script>-->
        
        
        <!--6.input标签内容和属性双向绑定:
            v-model="Vue对象属性名"
        -->
        <div id="app-7">
            <p>{{message}}</p>
            <input v-model="message" />
        </div>
        <script type="text/javascript">
            var app7 = new Vue({
                el: '#app-7',
                data:{
                    message: '你好'
                }
            })
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。