17 vue-组件 v-model

作者: 滔滔逐浪 | 来源:发表于2021-08-06 22:44 被阅读0次

17 vue-组件 v-model
vue自定义组件上的v-model如何与子组件数据绑定
2020-09-11 当v-model绑定在组件上
vue父子组件传值-06-03
Vue父传子、子传夫通信--小案例
Vue-基础-04-重点
组件上使用v-model
4 动画及组件
vue render中为什么不能用v-model
.sync和v-model的区别

渲染普通的HTML元素在Vue中是非常快速的，但有的时候你可能有一个组件，这个个组件包含了大量静态的内容，在这种情况下，你可以在跟元素上添加v-once attribute 以确保这些内容只计算一次然后缓存起来，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../lib/vue.js"></script>
        <script src="../../lib/axios.js"></script>
    </head>
    <body>
        <div id="app">
            <kerwin-input type="text" title="姓名" v-model="username"></kerwin-input>
            <kerwin-input type="password" title="密码" v-model="password" ></kerwin-input>
            <button>submit</button>
                <button>seset</button>
        </div>
 <script>
    Vue.component("kerwinInput",{
        data(){
            return{
                mytext:""
            }
        },
        props:["type","title","value"],
        template:`<div>
    <label> {{title}}</label>
{{value}}
          <input :type="type" style="background:red" v-model="mytext"
           @input="handleInput">
        
        
        </div>`,
        methods:{
            handleInput(event){
                console.log(event.target.value);
                this.$emit("input",event.target.value)
            }
        }
        
    });
    var vm=new Vue({
        el:"#app",
        data:{
            username:"",
            password:"",
             isShow:false
            
        },
        methods:{
            event1(data){
                console.log(data)
                this.username=data;
            },
            event2(data){
                this.password=data
                console.log(data)
            }
        }
        
    });
</script>
    </body>
</html>

动态组件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../lib/vue.js"></script>
        <script src="../../lib/axios.js"></script>
    </head>
    <style type="text/css">
      
        *{
          margin: 0px;
          padding: 0px;
        }
    
        html,body{
          width: 100%;
          height: 100%;
        }
       footer ul {
        display: flex;
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 40px;
       }
    
       footer ul li {
        flex: 1;
        text-align: center;
        list-style: none;
        height: 40px;
        line-height: 40px;
        background: gray;
       }
    </style>
    <body>
        <div id="app">
            <keep-alive>
            <comment :is="isWhich"></comment>
            </keep-alive>
            <!-- <home v-show="isWhich===1"></home>
            <list  v-show="isWhich===2"></list>
            <shopcar  v-show="isWhich===3"></shopcar> -->
            <footer>
               <ul>
                   <li @click="isWhich='home'">首页</li>
                     <li  @click="isWhich='list'">列表</li>  
                     <li  @click="isWhich='shopcar'"> 购物车</li>
                   
               </ul></footer>
        </div>

<script>
    
    Vue.component("home",{
        template:`
        <div>home
        <input type="text">
        </div>
        `
    })
    Vue.component("list",{
        template:`
        <div>list</div> 
        `
    })
    
    Vue.component("shopcar",{
        template:`
        <div>shopcar</div>
        `
    })
    new Vue({
        el:"#app",
        data:{
            isWhich:"home"
            
        }
        
    });
</script>
    </body>
</html>