自定义指令
示例，文本框自动获取焦点
自定义全局指令
使用
Vue.directive()定义全局指令。
// 注册一个全局自定义指令 `v-focus`，参数一是指令的名称，参数二是一些指令相关的函数，这些函数可以在特定阶段执行相关操作
Vue.directive("focus", {
// 样式只要通过指令绑定给了元素，不管这个元素有没有插入到页面中去，这个元素就有了一个内联样式，在元素显示到页面的时候将样式应用给这个元素
bind: function(el){
el.style.color = 'red'
}
// 在函数中，第一个参数是 el，表示被绑定了指令的那个元素，el 是一个原生的 js 对象
// 当被绑定的元素插入到 DOM 中时……一个元素只有插入 DOM 之后才能获取焦点
inserted: function(el) {
// 聚焦元素
el.focus();
}
});
和样式有关的一般都可以在 bind 中操作，和 js 行为有关的最好在 inserted 中去执行。
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus />
自定义局部指令
directives: {
focus: {
// 指令的定义
inserted: function (el, binding) {
// 获取 v-focus = "'blue'" 传入的 blue 值，具体参数列表可查看上述钩子函数链接
el.style.color = binging.value
}
}
}
vue 实例的生命周期
vue 实例的生命周期
如果要调用
data 和 methods 中的数据，created() 函数中就可以开始操作，在 beforeCreate() 函数中还未对 data 和 methods 进行初始化。
vue-resource 发起 get 和 post 请求
引入
vue-resource.js。vue-resource依赖于vue.js，因此vue.js的引用要在vue-resource.js之前。
get 请求
{
// GET /someUrl
this.$http.get("/someUrl").then(
response => {
// success callback
},
response => {
// error callback
}
);
}
post 请求
body为提交的数据，手动提交post请求时，需要在config中 设置emulateJSON为true使其作为一个表单样式进行提交。
this.$http
.post("/someUrl", [body], [config])
.then(successCallback, errorCallback);
vue-resource 全局配置
配置 api 根路径
Vue.http.options.root = "url";
或者：
new Vue({
http: {
root: "/root"
}
});
配置 emulateJSON
Vue.http.options.emulateJSON = true;
组件
组件是可复用的
Vue实例。组件时用来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用相应的组件即可。
模块化和组件化的区别
- 模块化：从代码逻辑的角度进行划分，方便代码的分层开发，保证每个功能单一。
- 组件化：从
UI界面的角度划分，方便UI组件的复用。
创建组件的方式
全局组件
使用 Vue.extend 创建
<script>
var comp = Vue.extend({
template: "<h1>这是 Vue.extend 创建的组件！</h1>"
})
Vue.component('my-component', comp);
new Vue({
el: "#app"
})
</script>
使用：
<div id="app">
<my-component></my-component>
</div>
简化第一种方式
Vue.component('component2', {
// template 属性指向的模板内容只能有一个根元素，
// "<h1>第二种创建方式</h1><span>123</span>" 中 h1 和 span 没有上级元素，根元素有两个
// 因此会在 console 控制台报错，且不会显示 span 的内容
template: "<div><h1>第二种创建方式</h1><span>123</span></div>"
})
```
使用 template 元素创建
Vue.component("com3", {
template: "#temp"
});
<div id="app">
<com3></com3>
</div>
<!--在被控制的 #app 外，使用 template 定义组件-->
<template id="temp">
<div>
<h1>这是第三种创建方式</h1>
<span>123456</span>
</div>
</template>
局部组件
new Vue({
el: "#app2",
components: {
login: {
template: "<h1>私有组件</h1>"
}
}
});
组件中的 data
Vue.component("button-counter", {
data: function() {
return {
count: 0
};
},
template:
'<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
一个组件的 data 选项必须是一个函数，返回一个对象。因此每个实例可以维护一份被返回对象的独立的拷贝。
父组件向子组件传值
通过
v-bind绑定。
<script>
new Vue({
el: "#app",
data: {
msg: "这是一个 div"
},
components: {
'child': {
template: "<h1>{{message}}</h1>",
props: ['message']
}
}
})
</script>
<div id="app">
<child v-bind:message="msg"></child>
</div>
子组件调用父组件方法并向父组件传值
<div id="app">
<child @func="show"></child>
</div>
<template id="btn">
<input type="button" @click="useParent" value="点击调用父类方法">
</template>
</body>
<script>
new Vue({
el: "#app",
methods: {
show(data) {
console.log(data)
}
},
components: {
'child': {
data: function () {
return {
cdata: {
id: 1,
name: "edwin"}
}
},
template: "#btn",
methods: {
useParent() {
console.log("ok")
this.$emit("func", this.cdata)
}
}
}
}
})
</script>
使用 ref 获取 DOM 元素和组件引用
获取 DOM 元素
<div id="app">
<input type="button" value="获取 DOM" @click="getDOM">
<h1 ref="myRef">这是一个 h1</h1>
</div>
</body>
<script>
new Vue({
el: "#app",
methods: {
getDOM() {
console.log(this.$refs.myRef.innerText)
}
},
})
</script>
获取组件引用
获取组件引用可以调用子组件的数据和方法。
<div id="app">
<input type="button" value="点击" @click="show">
<child ref="comp"></child>
</div>
<template id="btn">
<h1>这是一个组件</h1>
</template>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "这是一个 div"
},
methods: {
show() {
console.log(this.$refs.comp.msg)
this.$refs.comp.show()
}
},
components: {
'child': {
template: "#btn",
methods: {
show(){
console.log("调用了子组件的方法")
}
},
data: function () {
return {
msg: "你好"
}
}
}
}
})
</script>
网友评论