Vue：Vue基础知识系列+利用模板的输出方式输出Hello World到页面

最新推荐文章于 2024-03-20 00:46:22 发布

听雪闻歌

最新推荐文章于 2024-03-20 00:46:22 发布

阅读量2.5k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_42229253/article/details/81268273

版权

VUE 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

模板的输出方式，把message变量渲染到模板里

一、利用模板的输出方式输出Hello World到页面

1、index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js实例</title>
</head>
<body>
    <h1>Vue2.0实例</h1>
    <hr>
    <ol>
        <li><a href='./example/helloword.html'>Hello World实例</a></li>
    </ol>
    
</body>
</html>

2、helloworld.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HelloWorld</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
    <h1>HelloWorld</h1>
    <hr>
    <div id="app" >
        <!-- 模板的输出方式，把message变量渲染到模板里 -->
        {{message}}  
    </div>
    
    <script type='text/javascript'>
       //声明变量且实例化(生成器)
        var app =new Vue({
            el:'#app',
            data:{
                message:'欢迎进入机器学习的世界！'
            }

        })
    
    </script>
</body>
</html>

二、基础知识系列

1、输出到控制台
console.log(el);

听雪闻歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue：Vue基础知识系列+利用模板的输出方式输出Hello World到页面

模板的输出方式，把message变量渲染到模板里一、利用模板的输出方式输出Hello World到页面1、index.html文件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&quot
复制链接

扫一扫