官网: https://cn.vuejs.org/v2/guide/
| 概念 | 写法 | 属性 |
|---|---|---|
| 挂载点 | el:"ID" | el |
| 模板 | 挂载点内部的内容 | template |
| 事件绑定 | v-on:click="handleClick" | @click="handleClick" | methods |
| 属性绑定 | v-bind:title="title" | :title="title" | |
| 内容绑定 | v-html="conten" | v-text="conten" | data |
| 双向绑定 | v-model="content" | |
| 计算属性 | computed | |
| 监听器 | 监听属性变化 | watch |
| v-if | DOM树上删除元素 | |
| v-show | 隐藏元素 <div style="display: none;">hello world</div> |
|
| v-for | 页面循环展示 | |
| todoList | 向list中添加内容 | |
| 全局组件 | Vue.component('',{}) | |
| 局部组件 | component 父组件向子组件传值通过属性传递 | component |
| 子组件操作父组件 | 子组件向父组件传值 通过发布订阅模式 |
数据绑定
<div id="root">
<h2 v-on:click="handleClick" v-bind:title="title">{{msg}}</h2>
<h2 @click="handleClick" :title="title">{{msg}}</h2>
<h3>{{number}}</h3>
<h3 v-text="number"></h3>
<span v-html="content"></span>
<span v-text="content"></span>
<input v-model="content" />
</div>
<script>
new Vue({
el: "#root",
template: "",
data: {
title: "Gool",
msg: "白日依山尽,黄河入海流",
number: "123456",
content: "<h1>Hello </h1>"
},
methods: {
handleClick: function() {
// alert(123);
this.msg = "欲穷千里目，更上一层楼";
}
}
});
</script>
计算属性
<div id="root">
姓<input v-model="firstName" /> <br> 名
<input v-model="lastName"> <br>
<h3>{{fullName}}</h3>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: function() {
return this.firstName + '' + this.lastName;
}
}
});
</script>
监听器
<div id="root">
姓<input v-model="firstName" /> <br> 名
<input v-model="lastName"> <br>
<h3>{{fullName}}</h3>
<h2>{{count}}</h2>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function() {
return this.firstName + '' + this.lastName;
}
},
watch: {
firstName: function() {
this.count++
},
lastName: function() {
this.count++
}
}
});
</script>
v-if
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
v-show
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
v-for
<div id="root">
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
list: [1, 1, 2, 3, 4]
}
});
</script>
List 添加
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit"> 提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
</script>
全局组件
<div id="root">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
template: '<li>itemt</li>'
});
new Vue({
el: '#root'
});
</script>
局部组件
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit"> 提交</button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
</div>
<script>
var TodoItem = {
props: ['content'],
template: '<li>{{content}}</li>'
}
new Vue({
el: "#root",
components: {
'todo-item': TodoItem
},
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
</script>
子组件向父组件传值 删除todoList
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit"> 提交</button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :index="index" :content="item" @delete2="deletelist"></todo-item>
</ul>
</div>
</div>
<script>
var TodoItem = {
props: ['content', 'index'],
template: '<li @click="headerClick">{{content}}</li>',
methods: {
headerClick: function() {
this.$emit('delete2', this.index);
}
}
}
new Vue({
el: "#root",
components: {
'todo-item': TodoItem
},
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue);
this.inputValue = '';
},
deletelist: function(index) {
this.list.splice(index, 1);
}
}
});
</script>
网友评论