vue入门 hello word

最新推荐文章于 2023-11-02 11:53:07 发布

MIKE-zi

最新推荐文章于 2023-11-02 11:53:07 发布

阅读量502

点赞数

分类专栏： VUE入门文章标签： vue入门 vue基础第一个vue

本文链接：https://blog.csdn.net/lee727n/article/details/107401150

版权

VUE入门专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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中的内容并改变

运行效果如下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MIKE-zi

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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这种结构已经scr.
复制链接

扫一扫