Vue2.5入门——创建一个vue实例

最新推荐文章于 2024-05-06 13:53:27 发布

前台端茶工程师

最新推荐文章于 2024-05-06 13:53:27 发布

阅读量947

点赞数 1

分类专栏： Vue2.5入门文章标签： vue

本文链接：https://blog.csdn.net/qq_33930360/article/details/82078765

版权

Vue2.5入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

创建一个vue实例

1，打开官方网站https://cn.vuejs.org/

2，教程

鼠标点击学习模块的教程部分

3，安装Vue

在页面左侧点击安装选项

这里有两种引入方式：

1，使用<script>本地引入：

<script src="./node_modules/vue/dist/vue.js"></script>

2，使用cdn网络引入：

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

注意：在开发环境中选择开发版本，不然失去所有常见错误相关的警告!生成版本适合上线使用。

4，Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue的框架-->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--使用双花括号包着msg-->
<div id="root">{{msg}}</div>
<script>
    // 创建一个Vue的实例
     new Vue({
         // 让Vue的实例去接管id为root的内容(el和某个节点做绑定)
         el:"#root",
         // Vue实例的数据(放在data里面)
         data:{
             // 定义msg的数据
             msg:"holle world"
         }
     })
</script>
</body>
</html>

前台端茶工程师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.5入门——创建一个vue实例

创建一个vue实例1，打开官方网站https://cn.vuejs.org/2，教程鼠标点击学习模块的教程部分3，安装Vue在页面左侧点击安装选项这里有两种引入方式：1，使用&lt;script&gt;本地引入：&lt;script src="./node_modules/vue/dist...
复制链接

扫一扫