实例学习Vue源码第一篇-实例

最新推荐文章于 2024-08-31 10:00:01 发布

美兮，乐兮

最新推荐文章于 2024-08-31 10:00:01 发布

阅读量234

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/u014481405/article/details/108542692

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实例学习VUE源码（一）

实例代码
实例解析
实例渲染过程

实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
    <meta http-equiv="expires" content="0">
    <title>Portal</title>
	<script type="text/javascript" src="C:/Users/qingminglong/Desktop/Javascript/vue.js"></script>
<body>
<div id="app">

<input v-model="message" placeholder="请输入值">
<p>{{ reversedMessage }}</p>
<p>{{ message }}</p>
	
<runoob></runoob>
</div>
<script>
var ChildComponent = {
  template: '<h1>自定义组件! <br> {{childMessage}} <br> {{reversedChildMessage}}</h1>',
  data() {
	return {
		childMessage: "hello reversedChildMessage"
	}
  },
  computed: {
		// 计算属性的 getter
		reversedChildMessage: function () {
		  // `this` 指向 vm 实例
		  return this.childMessage.split('').reverse().join('');
		}
	}
}

var vueObj = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue'
	},
	methods: {
		getMessage: function (val) {
		  console.log(val)
		},
		addCount: function() {
			this.counter += 1
		}
	},
	computed: {
		// 计算属性的 getter
		reversedMessage: function () {
		  // `this` 指向 vm 实例
		  return this.message.split('').reverse().join('')
		}
	},
	components: {
		// <runoob> 将只在父模板可用
		'runoob': ChildComponent
	}
});
</script>
</body>

</html>

实例解析

定义了ChildComponent组件，此组件有模板（template）属性、数据(data)属性和计算(computed)属性；计算属性值是数据属性的倒转值（反转值）；
定义了VUE实例，此实例有元素（el）属性、方法（methods）属性、数据(data)属性、计算(computed)属性和组件（components）属性；
input控件显示data属性中message的值；
下一遍将探究下，Vue实例的初始化过程，包括data属性和computed属性初始化；
实例运行结果：