欢迎光临散文网 会员登陆 & 注册

vue-上手Hello程序!

2020-10-30 06:19 作者:夏末小仙  | 我要投稿


                        ps:最近想增加一些前端技能,就打算开始学习Vue.js!

Hello!I am Vue!

1、首先vs code新建main.html文件引入开发版本 vue.js文件

<!DOCTYPE html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>vue-hello</title>  


    <!-- 开发环境版本,包含了有帮助的命令行警告 -->

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

</head>

<body>

</body>

</html>


引入vue开发环境


2、编写hello测试语句:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>vue-hello</title>  


    <!-- 开发环境版本,包含了有帮助的命令行警告 -->

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

</head>

<body>

    <div id="Hello">

        {{ message }}

      </div>

      <script>

          var app = new Vue({

                el: '#Hello',

                data: {

                    message: 'Hello Vue!,I am xiamo!'

                }

                })

      </script>

</body>

</html>



Hello测试!
测试效果!

3、编写环境:

    a.windows7 x64

    b. vs code+live server(插件)

第一个程序写完!


vue-上手Hello程序!的评论 (共 条)

分享到微博请遵守国家法律