vue 复习

作者: 另一个童话 | 来源:发表于2018-10-09 19:35 被阅读0次

1.vue简介
简化Dom操作
2.vue指令
(1)v-for="" 循环操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="idsd">
       {{msg}}
       {{gsd}}
       {{mgh}}
       {{obj}}
      </div>
        <script src="js/vue.js"></script>
        <script>
        new Vue({
            el:"#idsd",
            data:{
                msg:'hello world',
                gsd:456,
                mgh:[12,12,12,1231,2],
                obj:{
                    name:'名字'
                      }
                  }
            })
          </script>
        </body>
    </html>

(2)v-model="" 双向数据绑定用于表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="qwe">
  <input type="text" v-model="msg">
   <p>{{msg}}</p>
   </div>
  <script src="js/vue.js"></script>
<script>
    new Vue({
        el:".qwe",
        data:{
            msg:"hello world"
        }
    })
</body>
</html>

(3)v-on:事件="函数名" 绑定事件简写 @事件=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
<body>
<div class="zxc">
   <button v-on:click="alt">点击</button>
   </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:".zxc",
        data:{
            msg:"hello world"
        },
        methods:{//methods  存放函数（方法）
            alt:function(){
                console.log(this.msg);
            }
        }
    })
</body>
</html>

(4)v-show="" 控制元素的显示或隐藏 display:none
显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="itany">
   <p v-show="!see">{{meg}}</p>
   </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            meg:"hellow",
            see:true
        }
    })
</script>
</body>
</html>

v-show 隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
        p{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="itany">
       <button v-on:click="alt">点击隐藏</button>
       <p v-show="see"></p>
   </div>
    <script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            see:true
        },
        methods:{
            alt:function(){
                if(this.see==true){
                   this.see=false;
              }else{
                   this.see=true;
              }
            }
        }
    })
</script>
</body>
</html>

(5)v-if="" 控制元素的显示或隐藏 visibility:hidden;
v-else
v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
   <p v-if="num==0">0000000000000000</p>
   <p v-else-if="num==1">111111111111</p>
   <p v-else-if="num==2">2222222222222</p>
   <p v-else-if="num==3">333333333333</p>
   <p v-else-if="num==4">444444444444</p>
   <p v-else='num==5'>55555555555555555</p>
   </div>
<script src='js/vue.js'></script>
<script>
   new Vue({
       el:'#itany',
       data:{
//               num:Math.floor(Math.random()*(max-min+1)+min)
           num:Math.floor(Math.random()*(5-0+1)+0)
       }
   })
</body>
</html>

(6)v-bind:属性='值' 绑定属性简写 :属性='值'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DocumentDocument</title>
</head>
<body>
  <div id='itany'>
        <!--      <a href=""></a>-->
  <img v-bind:src="url" alt="">
  </div>
   <script src='js/vue.js'></script> 
   <script>
   new Vue({
       el:'#itany',
       data:{
           url:'img/1.jpg'
       }
   })
</script>
</body>
</html>

(7)v-text 不可以解析标签
v-html 可以解析标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>
       <input type="text" v-model='msg'>
       <p v-html='msg'>{{msg}}</p>
       <h3 v-text='msg'>{{msg}}</h3>
   
       <a href="#" v-once>{{msg}}</a> <br>
       <a href="#" v-pre>{{msg}}</a>
   
   </div>
    <script src='js/vue.js'></script>
<script>
   new Vue({
       el:'#app',
       data:{
           msg:'今天周六，照常上课'
       }
   })

</script>
</body>
</html>

(8)v-once 只绑定一次
v-pre 原样输出
(10)v-cloak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
   <div id='app'>
       <h1 v-cloak>{{msg}}</h1>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hellovue'
           },
           beforeMount:function(){
              alert(1111) 
       }
   })

</script>
</body>
</html>

3.vue过滤器
全局:

   Vue.filter('过滤器的名字',function(data){
        return
})

局部:

filters:{
        过滤器的名字:function(data){
             return    
        }
    }

4.vue计算属性
处理复杂逻辑操作

computed:{
        名字：function(){
            return // 逻辑操作
        }
    }

5.vue中的组件
作用：
1.扩张html元素
2.封装可重用的代码

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
        <div id='app'>
  
  <my-component></my-component>
  </div>
   <script src='js/vue.js'></script> 
   <script>
Vue.component('my-component',{
    template:`
           <div>
               <p>{{mess}}</p>
               <button @click='alt'>按钮</button>
           </div>
     `,
    data:function(){
        return{
            mess:'我是组件中的值'
        }
    },
    methods:{
        alt:function(){
            alert('bdsjjf')
        }
    }
})   
   
   
new Vue({
    el:"#app",
    data:{
        msg:'jsdkvg'
    },
    methods:{
        
    }
})
</script>
</body>
</html>

6.组件之间的传值(难，重)
1.父传子用属性 props:['属性']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
<body>
  <div id='app'>
      <my-father></my-father>
  </div>
     <script src='js/vue.js'></script> 
   <script>
   Vue.component('my-father',{
       template:`
            <div>
                 <my-tit v-bind:tit='title'></my-tit>
                 <my-fruit v-bind:fruList='list'></my-fruit>
            </div>
       `,
       data:function(){
           return{
               list:['apple','pear','banana'],
               title:'水果列表'
           }
       }
   })
   
   Vue.component('my-tit',{
       props:['tit'],
       template:`
             <h2>{{tit}}</h2>
           `
   })
   
   
   Vue.component('my-fruit',{
       props:['fruList'],
       template:`
            <ul>
                <li v-for="value in fruList">{{value}}</li>
            </ul>
         `
   })
   
   
   new Vue({
       el:'#app'
   })

</script>
</body>
</html>

2.子传父用事件传 $emit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id="app">
       <my-father></my-father>
   </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component("my-father",{
            template:`
                <div>
                    <my-child @send="reg"></my-child>
                    <a href="#">{{mess}}</a>
                </div>
            `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            reg:function(txt){
                this.mess=txt
            }
        }
    })
    Vue.component("my-child",{
        template:`
            <button @click="alt">按钮</button>
        `,
        data:function(){
            return{
                msg:"我是自组建中的元素，要传到福组建中"
            }
        },
        methods:{
            alt:function(){
//                    this.$emit('事件',参数)
                this.$emit('send',this.msg)
            }
        }
    })
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

3.非父子借助中间量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id="app">
       <child></child>
       <brother></brother>
      </div>
    <script src="js/vue.js"></script>
      <script>
    var bus=new Vue();
    Vue.component('child',{
        template:`
            <div>
                <h2>我是child组件中的数据</h2>
                <button @click="fasong">发送数据</button>
            </div>
        `,
        data:function(){
            return{
                mes:'我是child组件中的数据，传到brother'
            }
        },
        methods:{
            fasong:function(){
                bus.$emit('send',this.mes)
            }
        }
    })
    Vue.component('brother',{
        template:`
            <div>
                <h2>我是brother组件中的数据</h2>
                <a href="#">{{res}}</a>
            </div>
        `,
        data:function(){
            return{
                res:''
            }
        },
        mounted:function(){
            bus.$on('send',mes=>{
                this.res=mes
            })
        }
    })
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

vue 复习

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读