Vue入门
目录
Vue入门
1.6.自定义指令
1、示例代码
2、调试步骤
3、参数说明
4、生命周期
1.7.组件基础
?1、组件注册
2、props属性传值
3、父子组件
4、完整示例代码
1.8.制作模板
1、选项模板
2、标签模板
1.6.自定义指令
vue中的自定义指令通过Vue.directive来实现，主要完成内置指令不能完成的一些事情
1、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-test="color">
{{num}}
</div>
</div>
<button onclick="unbindApp()">解绑</button>
<script type="text/javascript">
// 解绑
function unbindApp() {
app.$destroy();
}
// 自定义指令
Vue.directive("test",{
//1-被绑定
bind:function (el, binding, vnode) {
console.log("1-bind 被绑定");
console.log("el:",el);
console.log("binding:",binding);
console.log("vnode:",vnode);
el.style.color = binding.value;
},
//2-被插入
inserted:function (el, binding, vnode) {
console.log("2-inserted 被插入");
},
//3-更新
update:function (el, binding, vnode) {
console.log("3-update 更新");
},
//4-更新完成
componentUpdated:function (el, binding, vnode) {
console.log("4-componentUpdated 更新完成");
},
//5-解绑
unbind:function (el, binding, vnode) {
console.log("5-unbind 解绑");
}
});
var app = new Vue({
el:'#app',
data:{
num: 123,
color:'red'
}
})
</script>
</body>
</html>
2、调试步骤
（1）chrome打开控制器查看
（2）控制台输入“app.num=’通过控制台设置的新name’”
（3）点击解绑按钮
3、参数说明
- el：指令所绑定的元素，可以用来直接操作DOM
- binding： 一个对象，包含指令的很多信息
- vnode:：Vue编译生成的虚拟节点
4、生命周期
自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind，说明如下：
- bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作
- inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
- update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
- componentUpdated：被绑定元素所在模板完成一次更新周期时调用
- unbind：只调用一次，指令与元素解绑时调用
1.7.组件基础
?1、组件注册
（1）全局注册
// script
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'
});
new Vue({
el: '#app'
});
// html使用
<button-counter></button-counter>
（2）局部注册
// script
new Vue({
el: '#app',
components:{
"button-inner":{
data: function() {
return {
inner: 0
}
},
template: '<button v-on:click="inner++">局部组件显示： {{ inner }}</button>'
}
}
});
// html使用
<button-inner></button-inner>
2、props属性传值
（1）属性取值
// script
new Vue({
el: '#app',
components:{
"button-props":{
template:`<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
props:['here', 'fromHere']
}
}
});
// html使用
<button-props here="hello" from-here="world"></button-props>
PS：如果属性带“-”，props中需要驼峰取值
（2）在构造器向组件传值（v-bind）
// script
new Vue({
el: '#app',
data: {
message: 'hello'
},
components:{
"button-props":{
template:`<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
props:['here', 'fromHere']
}
}
});
// html使用
<button-props v-bind:here="message" :from-here="message"></button-props>
3、父子组件
// script
// 子组件
var city = {
template:`<div>Sichuan of China</div>`
}
// 父组件
var parent = {
template:
`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components:{
"city": city
}
}
// 实例化
new Vue({
el: '#app',
// 定义局部组件
components:{
// 组件注册
"parent": parent
}
});
// html使用
<parent></parent>
4、完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 全局组件 -->
<div>
<button-counter></button-counter>
</div>
<!-- 局部组件 -->
<div>
<button-inner></button-inner>
</div>
<!-- 常规属性传值 -->
<div>
<button-props here="hello" from-here="world"></button-props>
</div>
<!-- v-bind传值 -->
<div>
<button-props v-bind:here="message" :from-here="message"></button-props>
</div>
<!-- 父子组件调用 -->
<div>
<parent></parent>
</div>
</div>
<script type="text/javascript">
// 定义全局组件
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count++">全局组件显示： {{ count }}</button>'
});
// 子组件
var city = {
template: `<div>Sichuan of China</div>`
}
// 父组件
var parent = {
template: `<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components: {
"city": city
}
}
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
// 定义局部组件
components: {
"button-inner": {
data: function() {
return {
inner: 0
}
},
template: '<button v-on:click="inner++">局部组件显示： {{ inner }}</button>'
},
// 取值
"button-props": {
template: `<div style="color:red;">参数1： {{ here }}:---参数2： {{fromHere}}</div>`,
props: ['here', 'fromHere']
},
// 组件注册
"parent": parent
}
});
</script>
</body>
</html>
1.8.制作模板
vue中的模板使用template来实现
1、选项模板
<div id="app">
</div>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:`<h1 style="color:red">我是选项模板</h1>`
});
</script>
2、<template>标签模板
<div id="app">
<template id="demo2">
<h2 style="color:red">我是template标签模板</h2>
</template>
</div>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:'#demo2'
});
</script>
3、<script>标签模板
<div id="app">
</div>
<script type="x-template" id="demo3">
<h2 style="color:red">我是script标签模板</h2>
</script>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:'#demo3'
});
</script>
4、完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- template标签模板 -->
<template id="demo2">
<h2 style="color:red">我是template标签模板</h2>
</template>
</div>
<!-- script标签模板 -->
<script type="x-template" id="demo3">
<h2 style="color:red">我是script标签模板</h2>
</script>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
// 选项模板
//template:`<h1 style="color:red">我是选项模板</h1>`
//template:'#demo2'
template: '#demo3'
});
</script>
</body>
</html>
1.9.插槽slot
插槽，也就是slot，是组件的一块HTML模板(占位符)，一个slot最核心的两个问题是显不显示和怎样显示
1、单个slot
单个插槽，别名默认插槽、匿名插槽，不用设置name属性
<div id="app">
<children1>
<span>12345</span>
</children1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
components: {
children1: {
template: "<button><slot></slot>单个插槽</button>"
}
}
});
</script>
2、具名slot
插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置
<div id="app">
<children2>
<span slot="first" @click="tobeknow">12345</span>
<span slot="second">56789</span>
</children2>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods: {
tobeknow: function () {
console.log("It is the parent's method");
}
},
components: {
children2: {//这个无返回值，不会继续派发
template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
}
}
});
</script>
3、作用域slot
vue2.5版本中slot-scope取代了scope，来实现作用域插槽，主要用在组件调用中，具体在template标签上面使用slot-scope来获取插槽slot上面的属性值，获取值的为一个对象，slot-scope=”它可以取任意字符串”，在element-ui的组件中经常看到。
<div id="app">
<!-- 将数据传递给组件 -->
<tb-list :data="data">
<!-- 获取slot上面的值 -->
<template slot-scope="scope">
<p>索引：{{JSON.stringify(scope)}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
</template>
</tb-list>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
data: [{
name: 'kongzhi1',
age: '29',
sex: 'man'
}]
},
components: {
// 作用域slot
'tb-list': {
template:
`<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>`,
// 获取值
props: ['data']
}
}
});
</script>
4、完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之slot</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<children1>
<span>12345</span>
</children1>
<children2>
<span slot="first" @click="tobeknow">12345</span>
<span slot="second">56789</span>
</children2>
<!-- 将数据传递给组件 -->
<tb-list :data="data">
<!-- 获取slot上面的值 -->
<template slot-scope="scope">
<p>索引：{{JSON.stringify(scope)}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
</template>
</tb-list>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
data: [{
name: 'kongzhi1',
age: '29',
sex: 'man'
}]
},
methods: {
tobeknow: function() {
console.log("It is the parent's method");
}
},
components: {
// 单个slot
children1: {
template: "<button><slot></slot>单个插槽</button>"
},
// 具名slot
children2: {
template: "<button><slot name='first'></slot>具名插槽，<slot name='second'></slot></button>"
},
// 作用域slot
'tb-list': {
template: `<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>`,
// 获取值
props: ['data']
}
}
});
</script>
</body>
</html>
|