Vue复习1

@keyup.alt.enter="logName"  //alt+enter同时按下时触发logName函数  

v-model

//属性名age,v-model直接将input的值写入属性age
<input v-model="age">
//当输入框失去焦点后触发

watch

new Vue({
    el: "#vue-app",
    data() {
        return {}
    },
    methods: {
    },
    watch: {
       age(val, oldVal) {
            console.log(val, oldVal);
        }
    }
});

watch:当age属性的值 发生改变时触发.

ref

getName() {
   // console.log(this.$refs.name.value);
   this.name = this.$refs.name.value;
},

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

computed

computed: {
        addToA() {
            return this.a + this.age;
        }
}

计算属性的 getter,如果变量值未改变,就不会进行多次求值,但也会产生缓存,如果不想产生缓存,可以用方法代替

实现class的添加或取消
computed: {
        compClasses() {
            return {
                changeColor: true,  
                changeLength: false
            }
        }
    }

css中
.changeColor span{
    background: green;
}
.changeLength span:after{
    content: '米斯特邓';
    margin-left: 10px;
}

创建全局组件

js中写入
//创建全局组件
Vue.component("Greeting", {
    //html模板
    template: `
        
    `,
    //属性
    data() {
        return {
            name: '米斯特邓',
            wechat: '邓腾浩在奔跑'
        }
    },
    // 方法等
    methods: {
        changeName() {
            this.name = '邓腾浩在奔跑'
        }
    }
})

在html中使用调用

Axios网络请求

html中引入axios



js中
new Vue({
    el: "#vue-app",
    data() {
        return {
            todos: [],
            todo: {
                title: "",
                completed: false
            }
        }
    },
    mounted() {
        axios.get("http://jsonplaceholder.typicode.com/todos").then(res => {
            this.todos = res.data;
        });
    },
    //created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    //mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

    methods: {
        onSubmit() {
            axios.post("http://jsonplaceholder.typicode.com/todos", this.todo).then(res =>{
                this.todos.unshift(res.data);
            })
        }
    }
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值