学习Vue的第一天（使用VS code写Vue）

最新推荐文章于 2024-05-30 16:12:31 发布

BELLฅ

最新推荐文章于 2024-05-30 16:12:31 发布

阅读量710

点赞数 1

分类专栏： Vue学习笔记文章标签：前端 vue.js vscode

本文链接：https://blog.csdn.net/weixin_45917085/article/details/121448704

版权

Vue学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习Vue的第一天（使用VS code写Vue）

使用Vue.js实现Hello World

1.原生js实现Hello World

<body>
	<div id="app"></div>
	<script>
		var dom = document.getElementById('app');
		dom.innerHTML = 'Hello World'
	</script>
</body>

2.Vue.js实现Hello World

<head>
	<script src="./vue.js"></script>	//使用vue实例需要在顶部引入vue的库
</head>
<body>
	<div id="app">{{content}}<div>	//插值表达式
	
	//创建vue的实例，需要接受配置项，Vue实例负责管理({})的区域
	var app = new Vue({
            el: '#app', 
            data: {  //定义一组数据
                content: 'Hello World'
            }
        })
</body>

3.运行结果均相同

在这里插入图片描述

4.拓展：不给div标签命名来使用{{}}传值

<div id="app">{{content}}</div>
<div>{{content}}</div>

运行结果如下

在这里插入图片描述

实现隔两秒更改content的内容

1.原生js

<script>
	var dom = document.getElementById('app');
	dom.innerHTML = 'Hello World'
	setTimeout(function() {
    	dom.innerHTML = 'bye world'
     }, 2000)	//指两秒
</script>

2.Vue.js

<script>
	var app = new Vue({
            el: '#app',  //接管id="app"标签下的内容
            data: {  //定义一组数据
                content: 'Hello World'
            }
        })
        setTimeout(function() {
            app.$data.content = 'bye world'	//注意是使用$
        }, 2000)	//指两秒
</script>

3.运行结果

在这里插入图片描述

tip：学习内容来自慕课网

BELLฅ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
学习Vue的第一天（使用VS code写Vue）

学习Vue的第一天（使用VS code写Vue）使用Vue.js实现Hello World1.原生js实现Hello World<body> <div id="app"></div> <script> var dom = document.getElementById('app'); dom.innerHTML = 'Hello World' </script></body>2.Vue.js实现Hello Wo
复制链接

扫一扫