-
全局组件：
Vue.component('todo-item',{
template:'<li>{{content}}</li>'
})局部组件
var TodoItem={template:'<li>item</li>'}
...
components:{
'todo-item':TodoItem}，<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<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',{
props:['content'],
template:'<li>{{content}}</li>'
})
// 局部组件
// 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=''
}
}
})
</script>//完成输入字符和输出字符一致
查看全部 -
在vue中,父组件向子组件传值是通过属性的形式进行值的传递的
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<div>
<ul>
<todo-item v-for="(item,index) of list" :key="index"
:content="item"
:index="index"
@delete="handleDelete"></todo-item>
</ul>
</div>
</div>
<script>
//全局组件
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}{{index}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.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)
}
}
})
</script>
查看全部 -
vue的每个组件都是一个vue的实例,每一个实例都包含自己的props,template,methods,如果你不定义模板,它会把挂载点下面所有的dom节点做一个template,vue的实例也都是vue的组件
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<div>
<!--<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>-->
<ul>
<todo-item v-for="(item,index) of list" :key="index"
:content="item"></todo-item>
</ul>
</div>
</div>
<script>
//全局组件
Vue.component('todo-item',{
props:['content'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
alert('clicked')
}
}
})
//局部组件
// var TodoItem={
// props:['content'],//组件接收content值
// template:'<li>{{content}}</li>'
// }
//
new Vue({
el:"#root",
// components:{
// 'todo-item':TodoItem
// },
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
查看全部 -
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<div>
<!--<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>-->
<ul>
<todo-item v-for="(item,index) of list" :key="index"
:content="item"></todo-item>
</ul>
</div>
</div>
<script>
//全局组件
// Vue.component('todo-item',{
// template:'<li>item</li>'
// })
//局部组件
var TodoItem={
props:['content'],//组件接收content值
template:'<li>{{content}}</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
查看全部 -
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
查看全部 -
v-if 控制dom的存在与否
v-show 控制dom的显示与否
v-for 控制一组数据来循环显示的dom结构
<div id="demo">
<p v-if="show">hello xiaomin</p><!--会从dom树上清除掉,这种效果使用频率不高更适合v-if-->
<p v-show="show">hello xiaomin</p><!--隐藏,性能更高-->
<button @click="handleClick">toggle</button>
<!--每个key值不能相同-->
<ul><li v-for="item of list" :key="item">{{item}}</li></ul>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li><!--循环内容的展示-->
</ul>
</div>
<script>
new Vue({
el:"#demo",
data:{
show:true,
list:[1,2,3]
},
methods:{
handleClick:function(){
this.show=!this.show
}
}
})
</script>
查看全部 -
computed计算属性:
当你依赖的属性没有发生任何改变,他会利用以前计算结果的缓存来在页面上做显示.(根据其他的数据项计算出来的一个新的结果)
watch侦听器:
它会监测某一个数据或者计算属性发生了变化,一旦发生变化,我们就可以在侦听器里面去写一些业务逻辑.
<div id="demo">
姓 <input v-model="firstName"/>
名 <input v-model ="lastName" />
<p>{{firstName}}{{lastName}}</p>
<p>{{fullName}}</p>
<p>{{count}}</p>
</div>
<script>
new Vue({
el:"#demo",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{//computed 是vue的属性(计算属性)
fullName:function(){
return this.firstName+''+ this.lastName
}
},
watch:{
// firstName:function(){
// this.count++;
// },
// lastName:function(){
// this.count++;
// }
fullName:function(){
this.count++
}
}
})
</script>
查看全部 -
content展示什么是由数据决定的
数据决定页面的显示,但是页面无法决定你数据里面的内容 v-model
<div id="demo">
<h1 v-bind:title="'hello '+title">hello,小闵</h1>
<h1 :title="'hello '+title2">hello,小徐</h1>
<input :value="content"/>
<input v-model="content"/>
<p>{{content}}</p>
</div>
<script>
new Vue({
el:"#demo",
data:{
title:"this is a joke",
title2:"hello xu",
content:"we will marray"
}
})
</script>
查看全部 -
<div id="demo">
<h1 v-on:click="handleClick">hello{{ message1 }}</h1>
<h2 @click="handleClick">喜欢{{ message2 }}</h1>
</div>
<script>
//双向绑定的实现 vue接管dom的操作
//挂载点,模板,实例之间的关系,实例只需要指定一个挂载点
var demo = new Vue({
el:'#demo',//挂载点
template:'',//模板
data:{
message1:'小闵',
message2:'小徐',
},
methods:{
handleClick:function(){
this.message1 ='小徐',
this.message2 ='小闵';
}
}
})
</script>
查看全部 -
点击之后.两边数据同时变化
查看全部 -
给组件样式添加scoped 来限定局部样式
查看全部 -
vue 改变操作dom的思路,当你的数据发生改变的话,你的dom自动会去更新
查看全部 -
v-text 会被转译
v-html 不会转译
查看全部 -
Todolist
<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>
</ul>
</div><script type="text/javascript">
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue) //push
this.inputValue='' //填值后为空
}
}
})
</script>查看全部 -
v-if |show |for指令
v-if隐藏与显示 元素从dom清除切换得重新加载；v-show隐藏与显示display:none,适合频繁操作
v-for:循环显示 :key:index，
<div id="root">
<div v-show="show">hello world</div>
<button @click="handClick">toggle</button>
<ul>
<li v-for="item of list" :key="item">{{item}}</li>
<!-- <li v-for="(item ,index) of list" :key="index">{{item}}</li> -->
</ul>
</div><script type="text/javascript">
new Vue({
el:"#root",
data:{
show:false,
list:[1,2,3]
},
methods:{
handClick:function(){
this.show=!this.show;
}
}
})查看全部
举报