Vue起步

2021-07-04 16:34:43 作者：互联网

渐进式框架
创建Vue的实例对象，并传入配置对象
< div id=“root”>是一个容器，容器中写的不是原始html代码，而是Vue的模板代码
{{XXX}},xxx会自动读取data中的xxx属性

语法格式
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始Vue</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="vue_det">
			<h1>site:{{site}}</h1>
			<h1>url:{{url}}</h1>
			<h1>site:{{details()}}</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#vue_det',
				data:{
					site:'zibo',
					url:'wwww',
					alexa:'11111'
				},
				methods:{
					details:function(){
						return this.site+"-学习梦想"
					}
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始Vue</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="vue_det">
			<h1>site:{{site}}</h1>
			<h1>url:{{url}}</h1>
			<h1>Alexa:{{alexa}}</h1>
		</div>
		//当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
		<script type="text/javascript">
			var data = {
				site: '菜鸟',
				url: 'www',
				alexa: '255000'
			}
			var vm = new Vue({
				el: '#vue_det',
				data: data
			})
			//它们引用同样的对象
			document.write(vm.site == data.site)
			document.write('<br />')
			//设置属性也会影响到原始数据
			vm.site = "whh"
			document.write(data.site + '<br />')
			data.alexa = 1234
			document.write(vm.alexa)
			//除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
			document.write(vm.$data === data)
			document.write("<br />")
			document.write(vm.$el === document.getElementById('vue_det'))
		</script>
	</body>
</html>

标签：起步,Vue,vm,site,write,document,data
来源： https://blog.csdn.net/baiqiaoxiang/article/details/118424223