vue中的样式绑定
给要进行的操作的标签进行绑定,:class=“activate:isActivated”
class的样式是activate 取决于isActivated
现在data的对象中加入 isActivated这个属性为false
注册鼠标点击事件,当点击的时候变成true 这样class就变成了activate
改变了样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.activated{
background-color: red;
}
</style>
</head>
<body>
<div id="app" @click="handleDiv" :class="{activated:isActivated}">
hello world
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
isActivated:false
},
methods:{
handleDiv:function () {
this.isActivated=true;
}
}
})
</script>
</body>
</html>
v-if 与v-show的区别
当v-if的值为false的时候,该标签是不存在的
如果v-show的值为false的时候,标签里的display的属性为none
还有v-else的使用方法,记得要跟v-if进行联用,不能在其中多加一些标签
还有v-else-if 与 最后的v-else
当改变想要展现的数组的时候,不能通过下标直接改变数据
pop push shift unshift splice sort reverse
需要通过以上的方法进行改变才可以
第二个方法改变数据的引用也可以
item是值 key是属性名 index指的是在对象的第几个位置
最后还可以利用 Vue.set方法对数据进行更改
建立了一个模板,如果模板在table标签中tbody中的tr就无法再table标签显示出 template
所以用一个树形is =“template name”
在标签里可以有引用 ref=“‘” 方便与,vue实例对该标签里的内容进行操作。获取内容
小型计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
<counter ref="one" @change="handlevmClick"></counter>
<counter ref="two" @change="handlevmClick"></counter>
<div>{{total}}</div>
</div>
<script src="vue.js"></script>
<script>
Vue.component("counter",{
template:'<div @click="handleClick">{{number}}</div>',
data:function () {
return {
number:0
};
},
methods:{
handleClick: function () {
this.number++;
this.$emit('change')
}
}
});
var vm =new Vue({
el:"#root",
data:{
total:0
},
methods:{
handlevmClick:function () {
this.total=this.$refs.one.number+this.$refs.two.number
}
}
})
</script>
</body>
</html>
子组件与父组件传递
props:
子组件可以使用父组件传递过来的参数
但是子组件不能改变父组件传递过来的参数
子组件的data一定是个函数
number :this.count
相当于声明一个新的变量等于父组件传递过来的值
然后对这个声明的新变量就行改变
单项数据流