-
父子组件传值的问题（难点，重点）：
父组件怎么向子组件传递数据呢？通过属性的形式向子组件传递数据
子组件怎么向父组件传递数据呢？通过发布订阅模式$emit(事件，参数)，子组件发布一个事件，父组件之前恰好之间就已经订阅了这个事件，那么子组件就可以通过发布订阅的形式，向父组件发布数据了。
查看全部 -
属性绑定：v-bind
查看全部 -
<div id="todo"> <input type="text" v-model="inputValue"> <button @click="sub()">提交</button> <ul> <todo-item v-for="(item, index) of list" :key="index" :content="item" ></todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content'], template:'<li>{{content}}</li>' }) new Vue({ el:'#todo', data:{ inputValue:'', list:[] }, methods:{ sub: function(){ this.list.push(this.inputValue) this.inputValue='' } } }) </script>查看全部 -
向列表中添加数据用 push( )
this.list.pust(this.inputValue)
查看全部 -
v-if 控制dom存在与否
v-show 控制dom显示与否
v-for 控制一组数据，循环显示
<li v-for="(item , index) of list" :key="index">{{item}}<li> 加 key 值提升渲染效率，渲染性能 key 值要求唯一性查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- <li v-for="(item, index) of list" :key="index">
{{item}}
</li> -->
<todo-item v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function(){
this.$emit('delete', this.index)
}
}
})
// var TodoItem = {
// template: '<li>item</li>'
// }
new Vue({
el: "#root ",
// components: {
// 'todo-item': TodoItem
// },
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
查看全部 -
computed/计算属性
watch/监听属性
查看全部 -
@:v-onclick
:是v-bind
查看全部 -
v-bind: 参数绑定；
查看全部 -
组件中接收 props:['content']
查看全部 -
定义局部变量后 需要在实例里面做出 对应组件的声明
比如
小组件是 todo-item
定义的局部组件是 TodoItem
则要在实例里面声明:component:{ 'todo-item':Todoitem }
查看全部 -
<ul>
<li v-for="item of lists">{{item}}</li>
</ul>
lists:['one','two','three']
为了提升效率 可以在v-for后面加上key值 如下:
key的值 不能相同(不包含字符串)解决如下:
<v-for="(item,index) of list":key="index">
<li v-for="item of lists" :key="item">{{item}}</li>
查看全部 -
实现A+B = C
computed:{
C:function(){
retrurn this.A+''+this.B
}
}
查看全部 -
输入框内的值 当输入时 也会改变渲染之前的 调用的数据的值
只需要 v-model
<input v-model="content" >
假设 content="123"
input 显示123
这时 在后面输入东西 content 也会变(只是在页面上变化 实际值不变)
查看全部 -
鼠标移动到这个div 所显示的内容
v-bind:title title是必须的 不变的 相当于属性
v-bind:title 等价于 :title
v-bind:title="title"
data{
title:'内容'
}
查看全部
举报