-
<div id="cod">
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
<!-- 父组件通过监听对应事件名称（@delete）触发函数handleDelete。 -->
</todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('todo-item',{
//父组件通过prop向子组件传值 子组件获得父组件传来的内容和索引。
props:['content', 'index'],
template:'<li @click="handlClick">{{content}}</li>',
methods:{
handlClick:function(){
//子组件通过$emit向父组件抛出触发事件名称（delete）和触发事件的list索引值。
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#cod",
data:{
title:"this is hello world!",
show:true,
list:[],
inputValue:''
},
methods: {
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=""
},
//函数通过子组件抛出的索引值对应删除list
handleDelete:function(index){
this.list.splice(index, 1)
}
}
})
</script>
查看全部 -
每一个组件都是一个vue的实例，
反之，每一个vue的实例，也都是一个组件
查看全部 -
<div id="cod">
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script type="text/javascript">
//定义一个全局组件
Vue.component('todo-item',{
//这个组件接收从外部传进来的名叫content的属性
props:['content'],
template:'<li>{{content}}</li>'
})
//定义一个局部组件
// var TodoItem = {
// template:'<li>item</li>'
// }
new Vue({
el:"#cod",
//在cod实例里注册这个组件
// components:{
// 'todo-item': TodoItem
// },
data:{
list:[],
inputValue:''
},
methods: {
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=""
}
}
})
</script>
查看全部 -
<div id="cod">
//v-model双向绑定
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
//v-for
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#cod",
data:{
list:[],
inputValue:''
},
methods: {
//点击提交按钮时，在li里添加input输入框的值后input值设置为空
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=""
}
}
})
</script>
查看全部 -
v-if 会删除dom节点 再创建dom,适合少数的操作
v-show 给元素添加display属性 适合频繁的操作
v-for 能把list数组循环展示在li 有多少数据就生成多少li
适用v-for做循环展示时，需要添加:key=""，为了提高渲染效率，要求：每渲染一条的key值都是不同的
为避免数组内容重复，可转换为如下写法，
v-for="(item,index) of list" :key="index"
当然，这也并不是一个特别好的选择，如果需要频繁渲染时，index会出现问题
查看全部 -
v-if是通过改变dom 的结构显示控制，而v-show是通过diaplay来控制显示隐藏，如果会重复操作，v-show 的性能会好一些
v-for用于循环，添加key值让渲染数据提高效率
查看全部 -
computed里面定义计算属性
watch 用于侦听计算属性发生改变时定义的某项也会随之变化
查看全部 -
单向绑定用v-bind：简写：
双向绑定用v-model
查看全部 -
v-html 不会进行转义，v-text会进行转义
v-on指令可以绑定事件比如（click），可简写为@click，方法写在vue实例中的methods方法里面
查看全部 -
vue只会对它所对应的挂载点内的内容产生作用
挂载点里的内容称为模版
模版可以通过template写在vue中，和写在挂载点下面的作用是一样的
vue实例绑定到挂载点后会自动对模版和数据内容进行处理，生成要最终展示的内容
查看全部 -
如何在页面中引入JS文件（在head中引入不会出现闪屏）
Dom节点如何绑定在vue实例中（通过el就是element）
查看全部 -
使用模板指令如v-bind，等号后面的内容就是一个js的表达式，不再是字符串
查看全部 -
index
查看全部 -
4.2 使用vue-cli开发TodoList
<template>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list "
:key="index",
:content="content",
:index="index",
@delete="handleDelete"
>
</todoitem>
</ul>
</div>
</template>
<script>
import TodoItem from "./components/TodoItem"
export default {
data(){ //这是data:function()的缩写
return {
inputValue:'',
list:[]
},
components:[todo-item:"TodoItem"]
methods:{
handleSubmit(){
this.list.push(this.inputValue);
this.inputValue=''
},
handleDelete(){
this.list.splice(index,1);
}
}
}
----------------------------------------------------------------------------
在components目录下，新建todotodo-iteim组件的写法
<template>
<li @click="handleDelete">{{content}}</li>
<script>
export default{
props:['content,'index']
template:"<li>{{content}}</li>",
methods:{
handleDelete:function(){
Vue.$emit("delete",this.index)
}
}
</script>
查看全部 -
<div id="root">
<div>
<input v-model='inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-iteim v-for="(item,index) of list
:key="index" :content="item" :index="index"
@delete="handleDelete" //监听子组件的delete事件,调用父组件的handleDelete方法
>
</todo-iteim>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],//属性
template:'<li>{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
//跟父组件通信,传播delete事件，传参index
}
}
})
new Vue({
el:"#root",
data:{
inputValue : '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
})
查看全部
举报