1.Hello小案例

最新推荐文章于 2024-07-25 15:19:10 发布

iqzn.

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量50

点赞数

分类专栏： Vue 学习笔记文章标签： vue.js 前端 javascript css 前端框架

本文链接：https://blog.csdn.net/weixin_49398894/article/details/123535668

版权

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Vue

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div> 

    <script type="text/javascript">
        Vue.config.productionTip=false
        //创建vue实例
        new Vue({
            el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            data:{//data中用于存储数据，数据供el所指定的容器去使用
                name:'Vue你好'
            }
        })
    </script>  
</body>
</html>

在这里插入图片描述
页面效果：

总结：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】

iqzn.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.Hello小案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&
复制链接

扫一扫

专栏目录