“Vue2.0”跟俺一起全面入坑 03
2017-04-19 本文已影响4844人
诺奕
一、 自定义指令
除了Vue内置的指令，可以自己设置指令。
1. 注册全局指令—所有人都可以用
<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>
2. 注册局部指令—当前组件下可用
选项对象的directives属性（注意此处有个s）
<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>
二、 计算数据（计算属性）—— 在选项对象中定义
为什么要使用计算属性
模版是未来描述视图的结构，在模版中放入太多逻辑，导致模版过重难以维护。
在计算一个计算属性时，Vue.js更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。
<body>
<div class="app">
<input type="button" value="改变" @click="change" />
{{ myData }}
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '.app',
data:{
num: 1
},
computed: {
myData:{
get:function(){
alert('get');
return this.num + 2;
},
set:function(val){
alert('set');
return this.num=val;
}
}
},
methods: {
change() {
//vm.myData=10;
this.myData=10;//此处虽然设置了myData的值，但是结果是12，因为myData是依赖num的
}
}
});
</script>
</body>
解析：计算属性和数据使用的方式一样。页面加载的时候后触发get函数，当点击事件后会触发set函数。
三、组件化开发
1. 什么是组件
WEB中的组件其实就是页面组成的一部分，好比是电脑中的每一个原件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或页面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。
2. 使用组件的好处
提高效率 | 方便重复使用 | 简化调试步骤
提升整个项目的课维护性 | 便于协同开发
3. 组件的特性：
1、高内聚性，组件功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中，就把下拉菜单所需要的所有功能全部实现；
2、低耦合性，通俗点说，代码独立不会和项目中的其他代码发生冲突！在实际工程中，我们经常会涉及到团队协作，传统按照业务线去编写代码的方式，就很容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在。
3、每一个组件都有自己清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用；
4. Vue中的组件
vue中的组件
vue中的组件是一个自定义标签（元素），Vue.js的编译器为它添加特殊功能；vue也可以拓展原生的html元素，封装可重用的代码
组件的基本组成
样式结构 | 行为逻辑 | 数据
**a). **全局注册
<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>
**b). **局部注册
<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>
**c). **组件模版编写方式
当我们的组件模版内容较多的时候，不要用字符串的方式了，比较繁琐。可使用在外部定义一个模版然后在组件注册的时候引用一下.
<body>
<div class="app">
<my-component></my-component>
<common></common>
</div>
<!-- type="x-template" 是为了不让这个script进行解析 -->
<!-- 用script标签名的方式 -->
<script id="component1" type="x-template">
<h3>第一个局部组件——定义方式1</h3>
</script>
<!-- 用 template标签名的方式 推荐-->
<template id="component2">
<p>第二个局部组件——定义方式2</p>
</template>
<script src="vue.js"></script>
<script>
var Child = {
template:`#component1`
};
var common = {
template: `#component2`
}
var vm = new Vue({
el: '.app',
components: {
// <my-component> 将只在父模板可用
myComponent: Child,
common //如果组件定义的名字和在html显示的标签名一致就可以省略
}
});
</script>
</body>
**d). **在组件中定义组件（父子组件）
注意：组件中的数据是以函数的形式的，并且有返回值
<body>
<div class="app">
<my-component></my-component>
</div>
<!-- 用 template标签名的方式 推荐-->
<template id="myMsg">
<div>
<p>父组件 => {{ msg }}</p>
<child></child>
<child2></child2>
</div>
</template>
<script src="vue.js"></script>
<script>
var myComponent = {
template: `#myMsg`,
data(){ //注意组件中的数据是一个函数的形式并且是有返回值的
return {
msg: '我是父组件中的数据'
}
},
components: {
child: {
template: `<p>我是第一个子组件</p>`
},
child2: {
template: `<p>我是第二个子组件</p>`
}
}
}
var vm = new Vue({
el: '.app',
components: {
myComponent
}
});
</script>
路由
<body>
<div class="app">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<template id="news">
<div>
<h2>我是新闻页面</h2>
<ul>
<li>
<router-link to="/news/detail/001?a=1">详细新闻</router-link>
<router-link to="/news/detail/002">详细新闻2</router-link>
<router-link to="/news/detail/003">详细新闻3</router-link>
</li>
<div>
<router-view></router-view>
</div>
</ul>
</div>
</template>
<script>
//组件
var Home = {
template: `<h2>我是主页</h2>`
};
var News = {
template: `#news`
};
var Detail = {
template: `<p>{{ $route.params }} => {{ $route.query }} => {{ $route.path }}</p>`
}
//配置路由
const routes = [
{
path:'/home',
component: Home
},
{
path:'/news',
component:News,
children: [
{
path:'detail/:id',
component: Detail
}
]
},
{
path:'*',
redirect:'/home'
}
]
//生成路由实例
const router = new VueRouter({
routes
});
//挂在到vue实例上
const vm = new Vue({
el: '.app',
router
});
</script>
</body>
