web复习总结

最新推荐文章于 2024-01-17 15:34:44 发布

阿澜澜儿

最新推荐文章于 2024-01-17 15:34:44 发布

阅读量239

点赞数

文章标签： html5 vue.js css3

本文链接：https://blog.youkuaiyun.com/zx616122/article/details/108247379

版权

这篇博客主要介绍了使用Vue.js进行程序练习，包括实现微信滴滴打车WebApp首页Tab的创建，页面切换动画，全局组件注册，页面刷新策略，鼠标位置显示，动态prop，组件复用，自定义事件，数据绑定及内部组件间的数据传递等实战技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

程序练习

1. 用Vue.js来输出一个微信内滴滴打车的WebApp首页Tab(首页含有巴士、快车、专车、顺风车、出租车、代驾)

html

<div id=”didi-navigator”>  
<ul><li v-for=”tab in tabs”>{{ tab.text}} </li> 
    </ul>  
     </div>

     New Vue({     
      el:’# didi-navigator’, 
           data:{     
              tabs:[      
                   { text : ‘巴士’ },
                   { text : ‘快车’ },
                   { text : ‘专车’ },
                   { text : ‘顺风车’ },
                   { text : ‘出租车’ },
                   { text : ‘代驾’ }]
                   }})

用vue.js编写一端代码，实现页面切换时为左侧划出

  <template> 
   <div id="app">  
       <!-- 使用transiton来规定页面切换时候的样式-->
             <transition name="slide-left">   
                  <router-view></router-view>    
                    </transition>  
                     </div>
                     </template>
                     <script>
                     export default { 
                      name: 'app', 
                       mounted(){    }, 
                        data () {  
                           return {  
                               index:0  
                                 }  },  
                                 methods :{  
                                     }}
                                     </script>
                                     <style lang="less"> 
                                      /*左滑动效*/   
                                      .slide-left-enter-active {  
                                         animation: slideLeft 0.3s;   } 
                                          /****自定义动画**/
                                            @keyframes slideLeft {  
                                              from {   
                                                 transform: translate3d(100%, 0, 0);
                                        /*横坐标,纵坐标,z坐标*/ 
                                        visibility: visible;  
                                                        }   
                                           to {   
                                           transform: translate3d(0, 0, 0);    }  }</style>

使用vue.js的全局注册，在页面中渲染显示出“这是一个组件”字样

html

<div id="example">	
 <my-component></my-component>
 </div>

 Vue.component('my-component',
 {		
 template:'<div>这里是组件的内容</div>'
 });
 new Vue({
 	el:'#example'
 	})

常用的两种刷新页面的方法编写代码:在vue-cli工程中如何实现无痕刷新

在app.vue里面设置，
<template><div id="app"><router-view v-if="isRouterAlive"></router-view> </div></template><script>export  default {provide(){return{  reload:this.reload},data(){ return {  isRouterAlive:true  }},methods:{reload(){ this.isRouterAlive = false;  this.$nextTick(function(){    this.isRouterAlive = true; })   }  }}</script>

在test.vue组件中使用，先用inject注册，然后即可通过this调用。
<script>export  default{ inject:['reload'], mounted(){   this.reload();    }}</script>

请写出，当鼠标移动时，时刻显示鼠标的地理位置

html

<div id="vue-app" @mousemove="mouseMove">x:{{mouseX}},y:{{mouseY}}    
<p><em class="em" @mousemove.stop="">
在我的区域内停止更新，都是阻止事件（冒泡）修饰符的功劳</em></p>
 </div>

new Vue({  
  el:'#vue-app', 
     data:{   
          mouseX:0,    
          mouseY:0,    },   
     methods:{      
       mouseMove:function (event) {    
            this.mouseX=event.offsetX; 
            this.mouseY=event.offsetY;        }}})

用动态prop实现以下内容:在输入框中输入内容时，下面的文字随之变化?输入框中的起始内容为“父组件内容”

html

 <div id="app"> 
    <div>    
        <input v-model="parentMsg">  
              <br>    
        <child :message="parentMsg"></child>    </div></div>

Vue.component('child',{ 
   props:['message'],   
    template:'<span>{{message}}</span>'});
    new Vue({  
      el:'#app',   
       data:{    
           parentMsg: '父组件内容'  
             }})

实现效果如下:将组件进行三次复用，点击每个按钮都会单独改变自身的被点击的次数

html

<div id="components-demo">
    <button-counter><button-counter>
    <button-counter><button-counter>
    <button-counter><button-counter>
</div>

Vue.component('button-counter',{
    data:function () {
        return{
            count:0
        }
    },
    template:'<button v-on:click="count++">You clicked me{{count}}times.<button>'


});
new Vue({
    el:'#components-demo'
})

使用vue.js的自定义事件实现以下效果:点击加按钮时总数后的数字会一次进行加法，点击减号时会一次进行减法。

<div id="app">
    <p>总数:{{total}}</p>
    <my-component @increase="handleGetTotal"
                  @reduce="handleGetTotal"></my-component>
</div>

Vue.component('my-component',{
    template:'<div>' +
        '<button @click="handleIncrease">+1<button>' +
        '<button @click="handleReduce">-1<button>'+
        '</div>',
    data:function () {
        return{
            counter:0
        }

    },
    methods:{
        handleIncrease:function () {
            this.counter++;
            this.$emit('increase',this.counter);

        },
        handleReduce:function () {
            this.counter--;
            this.$emit('reduce',this.counter);

        }

    }
});
var app=new Vue({
    el:'#app',
    data:{
        total:0
    },
    methods: {
        handleGetTotal:function (counter) {
            this.total=counter;

        }
    }
})

使用vue.js实现效果如下:可以在输入框中输入内容，也可以点击按钮为数字加一，当输入框内容改变时，其上面显示输入框内容(数据绑定)

html

<div id="app">
    <p>总数:{{total}}</p>
    <my-compontent v-model="total"></my-compontent>

    <button @click="handleIncrease">+1<button>
</div>

Vue.component('my-compontent',{
    props:['value'],
    template:'<input :value="value" @input="updateValue">',
    methods:{
      updateValue:function (event) {
          this.$emit('input',event.target.value);

      }
    }
});
new Vue({
    el:'#app',
    data:{
        total:0
    },
    methods: {

        handleIncrease:function () {
            this.total++;

        }
    }
});

使用vue.js实现如下效果：来自内部组件的数据传递事件当点击按钮“传递事件”后,页面转变为“来自内部组件的数据"按钮“传递事件”;

html

<div id="app"> 
{{message}}  
  <component-a></component-a>
  </div>

var bus=new Vue();
Vue.component('component-a',{ 
   template:'<button @click="handleEvent">传递事件</button>',   
    methods:{       
     handleEvent:function () {      
           bus.$emit('on-message','来自内部组件的数据');     
               }     }});
     var app=new Vue({   
      el:'#app', 
      data:{        message:''    },  
      mounted:function () { 
             var _this=this; 
                    bus.$on('on-message',function (msg) {    
                           _this.message=msg;    
                                }); 
                                    }})

用vue,js完成效果，在“根据书名查询编号”的下拉框中选择书名，然后会在“书名”后显示对应的图书，在”ISBN编号”后显示编号Vue.js权威指南、vue.js项目开发实战、深入浅出vue.js的ISBN编号分别为1、2、3。

html

<div id="app"> 
    <p>根据书名查询编号:  
     <select v-model="site">
     <option value=" 《Vue. js权威指南》1">Vue.js 权威指南</option>     
     <option value="《Vue. js项目开发实战》2">Vue . js项目开发实战</option> 
     <option value=" 《深入浅出Vue.js》3"> 深入浅出Vue. js</option>    
     </select> 
         </p>   
           <p>书名:{{name}}</p>  
              <p>ISBN编号: {{url}}</p> </div>

var vm = new Vue({ 
   el: '#app' ,  
   data () {       
     return{     
         name:'《Vue.js权威指南》',   
         url: '1'}},     
         computed: {  
            site:{     
                get:function () {  
                           return this.name +''+this.url   
                                  },     
                 set:function (newValue) {    
                          let names=newValue.split(' ');  
                          this.name=names[0];   
                          this.url=names[names.length - 1];       
                             }   
                               }   
                                   } 
                                    })