Vue学习笔记

Vue基础模板

<script>

var app = new Vue({
    el:"#app",
    data:{
        
    },
    methods:{

​		}

}

</script>

不知原因的tips:引入Vue官网的vue.js要加在head里，自己写的.js要加在app.div下边

V指令

v-on

给元素绑定事件

<input type="button" value="事件绑定" v-on:click="doit">
<input type="button" value="事件绑定" @click="doit">
<script>
    var app = new Vue({
        el:"#app",
        data:...
        methods:{
        doit:function(){
        //逻辑
    }
    }
    })；
</script>

简写 用@click=“函数名”

传递参数

<input type="button" value="事件绑定" v-on:click="doit(a1,a2)">

<script>
    var app = new Vue({
        el:"#app",
        data:...
        methods:{
        doit:function(a1,a2){
        //逻辑
    }
    }
    })；
</script>

v-show

根据表达值的真假，切换元素的显示和隐藏

<p v-show="isshow">XIANSHI</p>
<p v-show="age>18">XIANSHI</p>
<script>
    var app = new Vue({
        data:{
            isshow:true,
            age:17,
        }
        ...
        methods:{
            change:function(){
                this.ishow=!this.isshow
            }
        }
    })
</script>

v-if

根据表达式真假，切换元素的显示和隐藏(直接操纵dom元素)

与v-show类似,但v-show之操作display属性，v-if直接会注释掉该元素

<p v-if="isshow">XIANSHI</p>
<p v-if="age>18">XIANSHI</p>
<script>
    var app = new Vue({
        data:{
            isshow:true,
            age:17,
        }
        ...
        methods:{
            change:function(){
                this.ishow=!this.isshow
            }
        }
    })
</script>

v-bind

设置元素的属性(src, title, class )

简写格式可以直接省略v-bind

<img v-bind:src="imgSrc" v-bind:title="imgTitle">
<img :src="imgSrc" :title="imgTitle">
<script>
	var app = new Vue({
        el
        data:{
        imgSrc:"新地址"，
        imgTitle:"ZLX"
    }
    })
</script>

还可以更改style

<style>
    .active{
        border: 1px red solid;
        width:100px;
        height:100px;
    }
</style>
<div v-bind:class="{active:isActive,error:isError}"></div>
//如果isActive是true，该div类名才为active
//可以设置多个isname控制
<button @click="handle">改变样式</button>
<script>
var app = new Vue({
el::"#app",
    data:{
    isActive:true,
},
    methods:{
                  handle:function(){
    this.isActive = ! this.isActive;
}
                  }
})
</script>

v-for

根据数据生成列表结构

<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
        <li v-for="(item,index) in arr">{{item}}</li>//index是索引
    </ul>
</div>
<script>
var app = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5],//对象 字典都可以
    }
})
</script>

v-model

获取和设置表单元素的值(双向数据绑定)

<input type="text" v-model="message" @keyup.enter="GetM">//摁回车出发
<script>
var app = new Vue({
    el:"#app",
    data:{
        message:"ZLX"
    },
    methods:{
        GetM:function(){
            
        }
    }
})
</script>

v-cloak

提供CSS样式

[v-cloak]{
    display: none;
}

在插值表达式所在的标签添加v-cloak指令

<div v-cloak>
    sss
</div>

原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示出最终的结果

改变DOM

data:{
	food:"ZLX",
}
methods:{
change:funcrion(){
this.food+="520";
}
}

axios 网络请求库

axios基本用法

<script src="https://unpkg.com/axios/dist/axios.min.js">
    </script>
axios.get(地址?key=value&key2=values).then(function(response){},function(err){});
axios.post(地址,{key:value,key2:values}).then(function(response){},function(err){})
//key是文档规定的

axios结合vue

<input type="button" value="获取笑话">
<p>
    {{joke}}
</p>
<script>
var app = new Vue({
    el:"#app",
    data:{
        joke:"笑话",
    },
    methods:{
        getjoke:function(){
            var that = this;
            axios.get("笑话地址").then(function(response){
                that.joke=response.data;
            },function(err){
                console.log(err)
            })
        }
    }
})
</script>

组件

组件声明、挂载、使用已经全局组件

<script>
    //全局组件
    //第一个参数是组件名字，第二个参数配置选项options
Vue.component('Vbtn',{
   	template:"
    <button>按钮组件</button>
    "
});
    
    //声明组件
    var ass = new Vue({
        template:"
        <input>ii</input>
        ",
        data:{
        
    },
        
    })
    
    new Vue({
        el:"#app",
        data:{
            pass
        },
        //挂载
        components:{
            
        }
        //使用
        template:{
            
        }
    })
</script>

组件间传值

父传子

<script>
    //声明全局组件，不用挂载
    //父组件
Vue.component("parent",{
    data{
        msg:"我是父组件数据"
    }
    template:"
    <div><p>parent</p></div>
              //在父组件中绑定自定义属性(childdata)
    <child :childdata = 'msg'/>
    "
});
    //子组件
    Vue.component("child",{
    template:"
    <div><p>child</p></div>
    ",
        props:['childdata']
        //在子组件中使用props接收父组件传递的数据
                  //可以在子组件中任意使用
});
    
    new Vue({
        el:"#app",
        template:"
        <div>
        <parent/>
        </div>
        "
    })
</script>

子传父

<script>
    //声明全局组件，不用挂载
    //父组件
Vue.component("parent",{
    data{
        msg:"我是父组件数据"
    }
    template:"
    <div><p>parent</p></div>
              //在父组件中绑定自定义属性(childdata)
    <child :childdata = 'msg'@childhandler='childhandler'/>
    ",
              methods:{
              childhandler(val){
    
}
              }
});
    //子组件
    Vue.component("child",{
    template:‘
    <div>
    <p>child</p>
    <input type="text" v-model = 'childdata'@input = 'changevalue(childdata)'/>
    </div>
    ’,
        props:['childdata'],
        //在子组件中触发原生的事件 
        //在函数中使用$emit触发自定义的childhandler函数
        methods:{
            changevalue(val){
                //$emit(自定义的事件名，消息)
                this.$emit('childhandler',val)
            }
        }
});
    
    new Vue({
        el:"#app",
        template:"
        <div>
        <parent/>
        </div>
        "
    })
</script>

表单操作

<script>
var app = new Vue({
    el:"#app",
    data:{
        
    },
    methods:{
        
	},
}
</script>