vue入门 hello word

vue第一个入门程序 简单的hello word

首先认识一下vue单文件,写在html中的vue,我们通过一个例子体验一下vue的数据绑定方式

head中引入vue.js

<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src='./vue.js'></script>
</head>

body中 写div这种结构  已经script中的vue相关代码


<body>
	<div id="app">{
   
   {content}}</div>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				content: 'hello world'
			}
		})

		setTimeout(() => {
			vm.$data.content = 'bye world';
		}, 2000)
	</script>
</body>

解释一下,el:'#app'代表的是 id app这个div里面包裹的所有内容 都由vue去接管 所以div中的content 通过双花括号的方式进行插值表达式,取出vue data中的centent内容 进行显示

两秒后,通过vm.$data取到data中的内容 并改变

运行效果如下

猜你喜欢

转载自blog.csdn.net/lee727n/article/details/107401150