Vue学习--第一个Vue程序

最新推荐文章于 2024-06-14 23:28:14 发布

theLuckyLong

最新推荐文章于 2024-06-14 23:28:14 发布

阅读量114

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/theLuckyLong/article/details/115332618

版权

Vue.js 前端开发导入创建实例数据绑定

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

前言

前端开发Vue，需要用到NodeJs的环境，关于NodeJs如何安装，请看这篇博客：NodeJs安装教程
本章主要记录Vue的基本语法以及使用方式，并不代表最终的开发环境

导包

既然要使用Vue，肯定要先获取Vue的安装环境，与JQuery类似，可以从Vue官网下载Vue.js的包，也可以使用cdn的方式导入，本文采取后者，方便使用

<!--导入vue的js文件-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

创建Vue对象

首先创建一个html文件，然后在JS编码区创建Vue对象，并且声明Vue对象的作用域（即作用在哪个DOM元素内）

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="vueScope">
            <!--
            	Vue对象作用在该Div中
           -->
           <p>{{message}}</p>      
    </div>


<script>

    //实例化Vue对象
    let vueApp = new Vue({
        el: "#vueScope", //定义vue作用的前端标签处
        data: {//里面存放前端所需要的数据
            message: "hello, vue"
        }
    });

</script>
</body>
</html>

当然，Vue可以创建多个实例化对象，然后对不同的DOM进行绑定。
至此，第一个Vue程序算是写完了。

theLuckyLong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习--第一个Vue程序

前言前端开发Vue，需要用到NodeJs的环境，关于NodeJs如何安装，请看这篇博客：NodeJs安装教程本章主要记录Vue的基本语法以及使用方式，并不代表最终的开发环境导包既然要使用Vue，肯定要先获取Vue的安装环境，与JQuery类似，可以从Vue官网下载Vue.js的包，也可以使用cdn的方式导入，本文采取后者，方便使用<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"
复制链接

扫一扫

专栏目录