Vue的指令以及组件化开发

一、 自定义指令

如何:

1. 创建指令

Vue.directive("指令名",{

inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令

//elem会自动获得指令所在的当前元素

对elem执行DOM操作！

}

})

2. 使用指令: <ANY v-指令名>

2、Axios
 什么是: 专门发送http请求的函数库

为什么: ajax

1. 自己封装函数:

2. jQuery: $.ajax() 小题大做

3. Vue有一个组件resource，已不推荐使用

4. Axios 官方推荐

何时: 只要在vue中发送ajax请求都用axios

如何:

1. 引入: axios.min.js

2. 发送2种请求:

get请求:

axios.get("url",{

params:{

参数:值

}

}).then(res=>{

获得服务端返回的结果: res.data

})

post请求:

axios.post("url","变量=值&变量=值&...").then(res=>{...})

三、组件化开发

什么是组件: 拥有专属的HTML，CSS，JS和数据的页面独立区域

什么是组件化: 今后所有页面都是由多个组件组成的

每定义一个网页，都要先划分组件结构，再分别编写每个组件

为什么:

1. 重用

2. 便于大项目的分工协作

3. 松散耦合

如何:

1. 创建组件:

每个组件包含三部分:

HTML: 独立的HTML片段:

<template id="tplxxx"></template>

<template>是HTML5中新增的专门保存一段隐藏的HTML片段的元素——专门为框架保存HTML模板

JS: <script>

Vue.component("组件名",{

//和new Vue()极其相似

template:"#tplxxx", //代替了el，每创建一个组件的副本，就自动复制一次模板中的html片段

data:function(){//每创建一个组件的副本，就调用一次data()，为当前组件创建专属的模型数据data
          return {

count:1

}

},

//其余和new Vue()完全一样

})

CSS: <style> 暂时不关心

2. 使用组件:

组件名其实就是一个标签名

只要在主内容中，添加一个<组件名></组件名>，运行时Vue就会用组件的template代替<组件名>标签所在位置

组件分类:

1. new Vue({ ——根组件

el:"#app",

data:{}

})

2. Vue.component("组件名",{——全局组件: 可在任何位置随意使用的组件

template:"#tplxxx",

data:function(){ return {} }

})

3. 子组件: 仅限于在某个父组件内才能使用的组件

如何: 3步:

1. 只要将Vue.component降级为普通对象

强调: 变量名最好是将来组件标签名的驼峰方式

2. 在父组件中添加components属性: {

子组件变量名, 子组件变量名, //ES6简写

}

Vue会将驼峰命名的组件名，转为小写，并用-分隔

比如: todoAdd -> todo-add

todoList -> todo-list

组件间传递数据:

父子间:

1. 父->子:

为什么: Vue中父组件的数据模型是专属的，子组件默认不能使用父组件的数据

解决: 2步:

1. 子组件:

var 子组件={

template:"xxx",

props:["变量", ... ] //声明一个内外两用的变量

//对外: 父元素可为其绑定数据

//对内: 相当于data:{ 变量 }

}

<template id="tpl子组件">

{{变量}}  <ANY :属性="变量"

</template>

2. 父组件:

<template id="tpl父组件">

<子组件 :变量="模型变量"></子组件>

父组件将自己的模型变量的值传递给子组件的变量属性，子组件就获得了父组件的数据

2. 子->父:

1. 父组件: 在子组件身上提前定义自定义事件和处理函数:

<template id="tpl父组件">

<子组件 @自定义事件="父的处理函数"//不要加()

//当有人触发自定义事件时，自动执行父组件中的处理函数，修改父组件自己的数据

父组件{

...

methods:{

处理函数(形参) {//形参会收到子传来的参数
           //操作父组件中的数据

}

}

}

2. 子组件:

任何时候都可以:

this.$emit("父给子定义的事件名", 实参)

意为触发父给子提前定义的事件，并自动引发执行父的处理函数。