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