-
3.2 组件拆分
<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">
</todo-iteim>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
inputValue : '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
查看全部 -
新建一个实例 将这个实例于dom上对应的id绑定起来 new vue（｛ el：“#id” ｝）查看全部
-
v-html不会转义，而v-text会进行一次转义
查看全部 -
computed 计算属性
watch 侦听属性
查看全部 -
v-on 简写 @ 事件绑定
v-bind 简写 : 单向绑定
v-model 双向绑定
查看全部 -
2.5 TODOLIST功能
<div id="root">
<div>
<input v-model='inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for = "(iteim,index) of list" :key="index"
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue : '',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
查看全部 -
脚手架工具里 data是使用函数 不是之前的使用对象
查看全部 -
<div id="root">
<div v-show="show"> hello world</div>
<button @click = "handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list" : key="index"{{iteim}}"</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3]
},
methods:{
handleclick:function(){
this.show = ! this.show;
}
查看全部 -
v-text无法渲染数据中html元素，而v-html能够将数据中的html元素渲染出来。
查看全部 -
.
查看全部 -
在vue中 每一个组件都是一个vue实例
查看全部 -
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName;'',
count:0
},
computed: {
fullName:function(){
return this.firstName + ' ' + this.lastName
},
watch : {
fullName : function(){
this.count ++
}
}
})
查看全部 -
computed代表一个属性从其他属性计算而来
查看全部 -
属性绑定和数据双向绑定
<div id="root">
<div v-bind:title="title>hello world</div>
<!-- v-bind:title 可以缩写成 : -->
<input v-model="content" />
<div>{{content}}</div>
<div>
<script>
new Vue({
el:"#root",
data:{
title: "this is hello world",
content:"this is a content"
}
})
查看全部 -
侦听器 watch
查看全部
举报