效果展示:
引入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>