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