-
<!--属性绑定和双向数据绑定-->
<div id="root">
<!--v-bind:简写成：-->
<div v-bind:title="title">heillo world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world"
}
})
</script>
查看全部 -
v-html 不会进行转义，v-text会进行转义
v-on指令可以绑定事件比如（click），可简写为@click，方法写在vue实例中的methods方法里面
<!--给元素绑定事件 v-on：简写@-->
<div @click="handleClick">{{content}}</div>
new Vue({
el:"#root",
data:{
content:"hello"
},
//时间触发后方法写在vue实例里边的methods方法里边
methods:{
handleClick:function(){
//通过content去改变实例里边的数据
this.content = "world"
}
}
})
查看全部 -
handleClick：function（）{
}
结构要记好，handleClick
查看全部 -
vue里每一个组建都是实例，反过来，每一个实例也都是一个组建
查看全部 -
v-on 简写 @ 事件绑定
v-bind 简写 : 单向绑定
v-model 双向绑定
查看全部 -
刚刚
查看全部 -
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
查看全部 -
父组件向子组件传值通过属性的形式进行值的传递
子组件向父组件传值：$emit触发事件，当子组件定义了一个事件被父组件监听到，那么父组件就会执行他的方法事件。
查看全部 -
父组件向子组件传数据：通过属性的方式
<todo-item :content="item" :index="index"></todo-item>
Vue.component('todo-item',{
props:['content', 'index'],
})
子组件向父组件传数据：如同发布订阅的方式
<todo-item @delete="handleDelete"提前订阅了dalete事件 执行handleDelete方法>
</todo-item>
Vue.component('todo-item',{
methods:{
handlClick:function(){
//向外发布了名为'delete'的事件和list的索引值
this.$emit('delete',this.index)
}
}
})
查看全部 -
<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值让渲染数据提高效率
查看全部
举报