Vue.js学习笔记(二)
对于上一篇的学习笔记,也许Vue.js并没有那么神奇,仅仅几个输出,看不出来它的可贵之处,如果用它,还不如直接用javascript,或者jQuery等,如果这样的认为的话,这一篇会让你,对它刮目相看,学习笔记,仅仅是一个学习的记录,我是希望大家可以去官方,或者专业的学习Vue.js地方,那样,你将会收获更多。
这一篇,我会从遍历数组,对象,绑定属性,绑定点击事件,动态切换样式,Vue.js组件这几个部分来记录我的学习情况。
遍历数组,对象
对于遍历数组,对象,其实就是复习第一篇的for循环,那么如何来遍历呢,在data下声明一个arrs的数组,遍历如下:
<body>
<div class="app">
<div v-for="a in arrs">
{{ a }}
</div>
</div>
<script>
new Vue({
el: ".app",
data:{
arrs:[2,4,6,12,13,16,87,34,54,12]
}
});
</script>
</body>
<body>
<div class="app">
<div v-for="key in object">
{{ key }}
</div>
</div>
<script>
new Vue({
el: ".app",
data:{
object:{
name:"AbnerMing",
age:25,
sex:"男",
email:"[email protected]"
}
}
});
</script>
</body>
绑定属性
以下的实现就是向href绑定url,实现跳转百度的
<body>
<div class="app">
<a v-bind:href="url">跳转到百度</a>
</div>
<script>
new Vue({
el: ".app",
data:{
url:"http://www.baidu.com"
}
});
</script>
</body>
绑定点击事件
绑定点击事件,要用到的指令是v-on:
<body>
<div class="app">
<button v-on:click="clicks">点击</button>
</div>
<script>
new Vue({
el: ".app",
methods:{
clicks:function () {
alert("点击了button");
}
}
});
</script>
</body>
动态切换样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue_03</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.div_back{
background-color: red;
}
</style>
</head>
<body>
<div class="app">
点击切换背景<input type="checkbox" v-model="class1"/>
<div v-bind:class="{'div_back':class1}">
我若是红色,证明你打了对勾,若不是,证明你取消了对勾
</div>
</div>
<script>
new Vue({
el: ".app",
data:{
class1:false
}
});
</script>
</body>
</html>
没有点击
点击之后
Vue.js组件
组件(Component)是 Vue.js 最强大的功能之一,可以扩展 HTML 元素,封装可重用的代码,按我所理解的意思,就是自定义标签,可以让我们的标签变得活灵活现。
来,自定义一个Abner标签,向浏览器输出,Hello,Abenr
<body>
<div class="app">
<Abner></Abner>
</div>
<script>
Vue.component("Abner",{
template:"<h1>Hello,Abenr</h1>"
});
new Vue({
el: ".app"
});
</script>
</body>
以下这种方式和上面是一样的,都是向浏览器输出Hello, Abenr。
<body>
<div class="app">
<Abner></Abner>
</div>
<script>
var node={
template:"<h1>Hello,Abenr</h1>"
};
new Vue({
el: ".app",
components:{
Abner:node
}
});
</script>
</body>
如何向标签里传递动态的传递数据呢,这里就要说到prop,prop 是父组件用来传递数据的一个自定义属性,具体用法如下:
<body>
<div class="app">
<Abner message="Hello,Abenr"></Abner>
</div>
<script>
Vue.component("Abner",{
props:["message"],
template:"<h1>{{ message }}</h1>"
});
new Vue({
el: ".app"
});
</script>
</body>
总得来说,对Vue.js学习,仅仅是一个开始,好多不明白的还在后面,也许,它还有未知的一面,待一层一层的去拨开,后续若还有Vue.js这方面的知识,我会继续整理关于它的笔记。