第一个Vue程序

最新推荐文章于 2024-08-07 21:26:38 发布

楠大人929

最新推荐文章于 2024-08-07 21:26:38 发布

阅读量53

点赞数

分类专栏： Vue 文章标签：学习 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/qq_72116747/article/details/129328075

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在IDEA中创建第一个Vue程序，包括导入Vue.js库，绑定数据到DOM元素，实现数据和视图的双向绑定。示例代码展示了一个简单的Vue实例，显示了如何在页面上显示数据并解释了Vue的核心机制。

摘要由CSDN通过智能技术生成

第一个Vue程序

IDEA：Vue插件

导入Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

绑定标签

<div id="app">
</div>

var vm = new Vue({									
	el:"#app"
})

放入数据

var vm = new Vue({
	el:"#app",
	data:{
		message:"hello,Vue!"
	}
})

把数据放入视图层

<div id="app">
	{{message}}
<div>

View：视图层
Model：数据模型
ViewModel双向绑定层
数据和DOM关联
核心就是实现了DOM监听和数据绑定

demo实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1.绑定标签
    2.放入数据
    3.把数据放入视图层
    4.把数据从视图层取出来

    View：视图层
    Model：数据模型
    ViewModel双向绑定层
	数据和DOM关联
    核心就是实现了DOM监听和数据绑定
-->

<!--绑定元素
    Vue控制视图层
    View层 模板 跟${}取值没有区别
-->
<div id="app">
<!--    虚拟DOM-->
    {{message}}
</div>

<!-- 1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //创建一个Vue的对象。核心是vm对象,监视，立马刷新前端页面
    var vm = new Vue({
        //元素绑定
        el:"#app",
        //data是一个对象，前后端分离，data交给了前端来控制了
        //model：数据模型
        data:{
            message:"hello,Vue"
        }
    });
</script>
</body>
</html>