Vue指令学习

v-model

使用范围 input,textarea,select
三个属性
v-model.trim=" " 去除输入内容的空格

lazy 输入内容不会及时跟新变量的值，在其绑定的标签失去焦点后跟新

number 将输入数字转为其数字类型

input 实例

//main.js:
var app=new Vue({
    el:'#app',
    data:{
        name:'1111'，
        sex:'female',   //默认选中值为female的
        sex1:['female','male'], //默认两个选中
        article:'sdsfffasssadsfsddsafssddffgfa',
        city:'1',
        city1:['1','2']
    }
    methods:{
        onEnter:function(){
            console.log('enter')
        }
        onLeave:function(){console.log('leave')}
        onclick:function(){
            .....
        }
        onKeyup:function(){
            ...
        }
    }
})

<!--html:-->
<div id="app">
    <input type="text" v-model="name">
    <span>{{name}}</span>
    <button v-on="{mouseenter:onEnter,mouseleave:onLeave}" @click="onClick">
    </button>
    <form @submit="onSubmit"  @keyup.enter="onKeyup">
        <!--这里v-on：可以用@代替-->
        <input type="text">
        <input type="button" value="提交">
    </form>
    <form @submit.prevent="onSubmit" >
        <!--提交表单时防止本页面刷新-->
    </form>
    
    <!--v-model在其他元素中的应用-->
    
    <!--绑定radio-->
    <label>
        男
        <input v-model="sex" value="male" type="radio">
    </label>
    <label>
        女
        <input v-model="sex" value="female" type="radio">
    </label>
    
        <!--绑定checkbox-->
    <label>
        男
        <input v-model="sex1" value="male" type="checkbox">
    </label>
    <label>
        女
        <input v-model="sex1" value="female" type="checkbox">
    </label>

    <textarea v-model="article"></textarea>
    
    
    <!--绑定select-->
    <select v-model="city">
        <option value="1">南京</option>
        <option value="2">盐城</option>
    </select>
    
    <select v-model="city1" multiple>
        <option value="1">南京</option>
        <option value="2">盐城</option>
        <option value="3">盐城</option>
        <option value="4">盐城</option>
    </select>
</div>

component

//mian.js
Vue.component('like',{
    template:'<button :class="{a:this.liked}" @click="like_click"> {{like_count}}</button>',
//写html语句多行语句可以使用``包裹起来或写#id，在html页面中加入template标签id=id并写入此地需要的html语句
    data:function () {
        //data用function初始化可以使每个用此组件的变量重新初始化
        return {
            like_count:10,
            liked:false,
        }
    },
    methods:{
        like_click:function () {
            if(!this.liked){
                this.like_count++;
            }else {
                this.like_count--;
            }
            this.liked=!this.liked;
        }
    }
});
//定义完component需定义域   即new Vue({el:'',})
//component须在域前定义
//定义完可以在html页面中加入<like></like>标签

定义在域外时是全局的component

定义在域内就是局部component，其他域无法使用

new Vue({
    el:'#app1',
    components:{
        //组建名如果是类似like-component的名字需要用''包裹否则会报错，这里是一个单词可以不加
        'like':{
            template:'',
            .....
        },
    }
})

component父子之间通信

Vue.component('user',{
    template:'<a :href="\'/user/\'+username">{{username}}/a>',
    props:['username'],
})
new Vue({
    el='#a1'
})

<div id="a1">
    <usr username="admin"></usr>
</div>

component子父通信

//子
Vue.component('show',{
    template:
        `<div >
                <showbtn @show_balance="show"></showbtn>
                <div v-if="balance">
                余额为 ￥22222
                </div>
        </div>`,
    //@show_balance这里就能监听父级定义的事件并触发子级的show  function
    data:function () {
        return{
           balance:false,
        }
    },
    methods:{
        show:function (data) {
            //在监听事件中同时能把监听对象的参数带过来
            this.balance=true;
            console.log(data);
        }
    }
});
//父
Vue.component('showbtn',{
    template: '<button @click="onclick"> 显示余额 </button>',
    methods:{
        onclick:function () {
            this.$emit('show_balance',{a:1,b:2});//emit相当于一个快捷方式用来触发事件
        }
    }
});

//html 页面中只需加入<show></show>即可拥有父子所定义功能