Vue初尝试—编写一个Hello World

Posted 时光-ing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue初尝试—编写一个Hello World相关的知识,希望对你有一定的参考价值。

效果展示:

引入Vue.js

<Script src="./vue.js"></Script>

(一)JS实现hello world的显示

<div id="app"></div>
    <!-- 在div中显示一个Hello World的字符串 -->
    <script>
        var dom = document.getElementById('app');
        dom.innerhtml = 'hello world';

		// 页面展示两秒之后更换内容
        setTimeout(function(){
            dom.innerHTML = 'bye world';
        },2000)
    </script>

(二)使用Vue.js编写一个Hello World
Vue文档:https://cn.vuejs.org/v2/guide/installation.html
第一步,安装vue.js
第二步,在html中编辑代码

    <!-- {{开始}}结束 -->
    <div id="app">{{content}}</div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                content:'hello world'
            }
        })
        // 页面展示两秒之后更换内容
        setTimeout(function(){
            app.$data.content = 'bye world'
        },2000)
    </script>

以上是关于Vue初尝试—编写一个Hello World的主要内容,如果未能解决你的问题,请参考以下文章

1 [初识]Vue3教程简介与Hello World编写

初入编程_hello world!

初入编程_hello world!

初入编程_hello world!

用maven建一个Hello World项目,maven初使用,maven如何使用

Docker初体验:通过docker运行Hello world!