vue2.0-start02

列表渲染 v-for

事件处理器(指令,绑定事件) v-on

事件修饰符

.stop(冒泡)
.prevent(默认事件)
.capture(捕获)
.self
.once(执行一次)

条件渲染 v-show

动态绑定 v-bind:class**


除了内置的指令外 还可以自己设置指令

注册全局指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<div class="app">
<div v-color="colorStatus">我是一个普通的div元素</div>
</div>
<script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
Vue.directive('color',function (el,binding) {//指令名称注意不要加**v-**
console.log(el);//当前绑定自定义指令的元素,可以用来直接操作DOM
console.log(binding);//一些参数,常用的 => binding.value(指令的值)
el.style.backgroundColor = 'lawngreen';
})
var vm = new Vue({
el: '.app',
data: {
colorStatus: true
}
});
},false);
</script>
</body>

当前组件下可用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<div class="app">
<div v-color="colorStatus">我是一个普通的div元素</div>
</div>
<script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '.app',
data: {
colorStatus: true
},
directives:{
'color':function (el,binding) {
el.style.backgroundColor = 'lawngreen';
}
}
});
},false);
</script>
</body>

计算数据(属性)

为什么需要计算属性

模版式未来描述视图的结构,在模版中放入太多逻辑,导致模版过重难以维护

在计算一个计算属性的时候,更新依赖列表并且缓存结果,只有当其中一个依赖发生了变化,缓存的结果才无效

组件化开发

组件其实是页面组成的一部分

使用组件的好处: 提升效率 方便重复使用 简化调试步骤 提升整个项目的可维护性 便于协同开发

组件的特性:

高内聚性、低耦合性

全局注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<div class="app">
<my-component></my-component>
</div>
<script src="vue.js"></script>
<script>
//全局注册
Vue.component('myComponent',{//html中是横杠的,在js中就是驼峰
template: `<h2>我是全局组件</h2>`
})
var vm = new Vue({
el: '.app'
});
</script>
</body>

局部注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<body>
<div class="app">
<my-component></my-component>
<common></common>
</div>
<script src="vue.js"></script>
<script>
var Child = {
template:`<h3>我是局部组件</h3>`
};
var common = {
template: `<p>第二个局部组件</p>`
}
var vm = new Vue({
el: '.app',
components: {
// <my-component> 将只在父模板可用
myComponent: Child,
common //如果组件定义的名字和在html显示的标签名一致就可以省略
}
});
</script>
</body>