• VUE [入门篇(三)]

    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、示例代码

    1. html>
    2. 	<html lang="en">
    3. 		<head>
    4. 		<meta charset="UTF-8">
    5. 			<title>Vue入门之自定义指令title>
    6. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    7. head>
    8. <body>
    9. 	<div id="app">
    10. 		<div v-test="color">
    11. 			{{num}}
    12. 				div>
    13. div>
    14. <button onclick="unbindApp()">解绑button>
    15.  
    16. <script type="text/javascript">
    17. 	// 解绑
    18. 	function unbindApp() {
    19. 	app.$destroy();
    20. }
    21.  
    22. // 自定义指令
    23. Vue.directive("test",{
    24. 	//1-被绑定
    25. 	bind:function (el, binding, vnode) {
    26. 		console.log("1-bind 被绑定");
    27. 		console.log("el:",el);
    28. 		console.log("binding:",binding);
    29. 		console.log("vnode:",vnode);
    30. 		el.style.color = binding.value;
    31. 	},
    32. 	//2-被插入
    33. 	inserted:function (el, binding, vnode) {
    34. 		console.log("2-inserted 被插入");
    35. 	},
    36. 	//3-更新
    37. 	update:function (el, binding, vnode) {
    38. 		console.log("3-update 更新");
    39. 	},
    40. 	//4-更新完成
    41. 	componentUpdated:function (el, binding, vnode) {
    42. 		console.log("4-componentUpdated 更新完成");
    43. 	},
    44. 	//5-解绑
    45. 	unbind:function (el, binding, vnode) {
    46. 		console.log("5-unbind 解绑");
    47. 	}
    48. });
    49.  
    50. var app = new Vue({
    51. 	el:'#app',
    52. 	data:{
    53. 		num: 123,
    54. 		color:'red'
    55. 	}
    56. })
    57. script>
    58. body>
    59. html>

    2、调试步骤

    （1）chrome打开控制器查看
    （2）控制台输入“app.num=’通过控制台设置的新name’”
    （3）点击解绑按钮

    3、参数说明

    • el：指令所绑定的元素，可以用来直接操作DOM
    • binding： 一个对象，包含指令的很多信息
    • vnode:：Vue编译生成的虚拟节点

    4、生命周期

    自定义指令有五个生命周期（也叫钩子函数），分别是bind、inserted、update、componentUpdated、unbind，说明如下：

    1. bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作
    2. inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
    3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
    4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用
    5. unbind：只调用一次，指令与元素解绑时调用

    1.7.组件基础

     1、组件注册

    （1）全局注册

    1. // script
    2. Vue.component('button-counter', {
    3. 	data: function () {
    4. 		return {
    5. 			count: 0
    6. 		}
    7. 	},
    8. 	template: ''
    9. });
    10.  
    11. new Vue({
    12. 	el: '#app'
    13. });
    14.  
    15. // html使用
    16. <button-counter>button-counter>

    （2）局部注册

    1. // script
    2. new Vue({
    3. 	el: '#app',
    4. 	components:{
    5. 		"button-inner":{
    6. 			data: function() {
    7. 				return {
    8. 					inner: 0
    9. 				}
    10. 			},
    11. 			template: ''
    12. 		}
    13. 	}
    14. });
    15.  
    16. // html使用
    17. <button-inner>button-inner>

    2、props属性传值

    （1）属性取值

    1. // script
    2. new Vue({
    3. 	el: '#app',
    4. 	components:{
    5. 		"button-props":{
    6. 			template:`
      参数1： {{ here }}:---参数2： {{fromHere}}
      `      ,
    7. 			props:['here', 'fromHere']
    8. 		}
    9. 	}
    10. });
    11.  
    12. // html使用
    13. <button-props here="hello" from-here="world">button-props>

    PS：如果属性带“-”，props中需要驼峰取值

    （2）在构造器向组件传值（v-bind）

    1. // script
    2. new Vue({
    3. 	el: '#app',
    4. 	data: {
    5. 		message: 'hello'
    6. 	},
    7. 	components:{
    8. 		"button-props":{
    9. 			template:`
      参数1： {{ here }}:---参数2： {{fromHere}}
      `      ,
    10. 			props:['here', 'fromHere']
    11. 		}
    12. 	}
    13. });
    14.  
    15. // html使用
    16. <button-props v-bind:here="message" :from-here="message">button-props>

    3、父子组件

    1. // script
    2. // 子组件
    3. var city = {
    4. 	template:`
      Sichuan of China
      `
    5. }
    6. // 父组件
    7. var parent = {
    8. 	template:
    9. 	`
    10. 	
       Panda from China!
    11. 	
    12. 	
      `,
  • components:{
  • "city": city
  • }
  • }
  • // 实例化
  • new Vue({
  • el: '#app',
  • // 定义局部组件
  • components:{
  • // 组件注册
  • "parent": parent
  • }
  • });
  • // html使用
  • <parent>parent>

    • 4、完整示例代码

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>Vue入门之组件title>
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			
    11. 			<div>
    12. 				<button-counter>button-counter>
    13. 			div>
    14. 			
    15. 			<div>
    16. 				<button-inner>button-inner>
    17. 			div>
    18. 			
    19. 			<div>
    20. 				<button-props here="hello" from-here="world">button-props>
    21. 			div>
    22. 			
    23. 			<div>
    24. 				<button-props v-bind:here="message" :from-here="message">button-props>
    25. 			div>
    26. 			
    27. 			<div>
    28. 				<parent>parent>
    29. 			div>
    30.  
    31. 		div>
    32.  
    33. 		<script type="text/javascript">
    34. 			// 定义全局组件
    35. 			Vue.component('button-counter', {
    36. 				data: function() {
    37. 					return {
    38. 						count: 0
    39. 					}
    40. 				},
    41. 				template: ''
    42. 			});
    43.  
    44. 			// 子组件
    45. 			var city = {
    46. 				template: `
      Sichuan of China
      `
    47. 			}
    48. 			// 父组件
    49. 			var parent = {
    50. 				template: `
    51.                 
       Panda from China!
    52.                 
    53.             
      `,
  • components: {
  • "city": city
  • }
  • }
  • // 实例化
  • new Vue({
  • el: '#app',
  • data: {
  • message: 'hello'
  • },
  • // 定义局部组件
  • components: {
  • "button-inner": {
  • data: function() {
  • return {
  • inner: 0
  • }
  • },
  • template: ''
  • },
  • // 取值
  • "button-props": {
  • template: `
    参数1： {{ here }}:---参数2： {{fromHere}}
    `    ,
  • props: ['here', 'fromHere']
  • },
  • // 组件注册
  • "parent": parent
  • }
  • });
  • script>
  • body>
  • html>

    • 1.8.制作模板

    vue中的模板使用template来实现

    1、选项模板

    1. "app">
  • <script type="text/javascript">
  • // 实例化
  • new Vue({
  • el: '#app',
  • data: {
  • message: 'hello'
  • },
  • template:`

    我是选项模板

    `
  • });
  • script>

    • 2、