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);
            })
        }
    }
});