Getting started with Vue
Table of contents
2. Props attribute value passing
1.6. Custom commands
The custom instructions in vue are implemented through Vue.directive, which mainly accomplishes some things that the built-in instructions cannot do.
1. Sample code
<!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. Debugging steps
(1) Open the controller in chrome to view
(2) Enter "app.num='new name set through the console'" in the
console (3) Click the unbind button
3. Parameter description
- el: The element bound to the instruction, which can be used to directly manipulate the DOM
- binding: an object that contains a lot of information about the instruction
- vnode:: virtual node generated by Vue compilation
4. Life cycle
Custom instructions have five life cycles (also called hook functions), namely bind, inserted, update, componentUpdated, unbind, as follows:
- bind: Called only once, when the instruction is bound to the element for the first time, this hook function can be used to define an initialization action that is executed once when binding
- inserted: Called when the bound element is inserted into the parent node (it can be called if the parent node exists, and does not have to exist in the document)
- update: Called when the template bound to the element is updated, regardless of whether the bound value changes. Unnecessary template updates can be ignored by comparing bound values before and after updates
- componentUpdated: Called when the template where the bound element is located completes an update cycle
- unbind: called only once, when the instruction is unbound from the element
1.7. Component Basics
1. Component registration
(1) Global registration
// 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) Partial registration
// 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 attribute value passing
(1) Attribute value
// 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: If the attribute has "-", the camel case value is required in props
(2) Pass value to the component in the constructor (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. Parent-child components
// 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. Complete sample code
<!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. Making templates
Templates in vue are implemented using templates
1. Option template
<div id="app">
</div>
<script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template:`<h1 style="color:red">我是选项模板</h1>`
});
</script>2. <template> tag 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> tag template
<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. Complete sample code
<!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
A slot, that is, a slot, is an HTML template (placeholder) for a component. The two core issues of a slot are whether to display it and how to display it.
1. Single slot
Single slot, alias default slot, anonymous slot, no need to set name attribute
<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. Named slot
Adding the name attribute to a slot becomes a named slot. A named slot can appear N times in a component, appearing in different positions
<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. Scope slot
In the vue2.5 version, slot-scope replaces scope to implement scoped slots, which are mainly used in component calls. Specifically, slot-scope is used on the template tag to obtain the attribute value on the slot, and the obtained value is one Object, slot-scope="it can take any string", is often seen in element-ui components.
<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. Complete sample code
<!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>