今天完成的事情：
Vue.js 循环语句
循环使用 v-for 指令
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名
监听属性 watch
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
计算属性和侦听器
计算属性
计算属性关键词: computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，如：
<div>
{{message.split('').reverse().join('')}}
</div>
样式绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式
class 属性绑定：
.active {
width: 100px;
height: 100px;
background: green;
}
<div id="app">
<div v-bind:class="{ 'active': isActive }"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
数组语法:
<div v-bind:class="[activeClass, errorClass]"></div>
内联样式:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">属性</div>
条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>no</h1>
在 <template> 元素上使用 v-if 条件渲染分组
如果想切换多个元素，可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
用 key 管理可复用的元素
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
明天的计划：
学习事件处理
绑定绑定输入
组件基础
返回列表
评论