Vue 1 review

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

in the 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: Triggered when the value of the age property changes.

ref

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

ref are used to reference elements or subassemblies registration information. Reference information will be registered on the $ refs object's parent component. If used in a generic DOM element reference point is the DOM elements; if used in the subassembly, to a reference to a component instance:

computed

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

Calculate the property getter, if the variable value is not changed, it will not be evaluated several times, but also have the cache, the cache if you do not produce, you can use the method instead of
#### to realize the added class or cancel

computed: {
        compClasses() {
            return {
                changeColor: true,  
                changeLength: false
            }
        }
    }

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

Creating global components

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

In html used to call

Axios network requests

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