Vue入门详解之Vue实现hello world!

前几天搞了从入门到放弃系列的Vue文章,发现每篇文章有点乱,可能思路不太清晰,用了几天发现Vue,恩,真香!继续来搞Vue,接下来详细介绍Vue入门,本篇来看一下Vue入门级程序Hello World!

首先看一下Hello world程序Vue的实现方式!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Vue</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
 {{content}}
</div>
<script>
 var app=new Vue({
 el:"#app",
 data:{
 content:"hello Vue!"
 }
    })
 setTimeout(()=>{
 app.$data.content="Bye Bye Vue";
    },2000)
</script>
</body>
</html>

首先在js文件中我们要新建一个Vue实例,所以我们要进行new一个Vue,在这个实例对象中,存在一个el表示需要使用Vue渲染的区域,data是数据层,在html调用{{content}},双花括号,里面调取数据层的数据,既可渲染完毕!app表示这个Vue实例,$data是这个Vue的数据层,Vue采用的是MVVM模式,即数据和视图层是双向绑定,数据层改变同时视图层也同时被渲染了.定时器2s后修改app.$data.content的内容发现,2s后页面内容自动刷新

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

27、有赞Vant组件库的引入及轮播图片预览的实现②

这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:

2572
来自专栏GIS讲堂

Openlayers3中SVG图加载

鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openla...

2284
来自专栏coding

vue.js组件切换

1072
来自专栏Android Note

Android O:使用自定义字体资源

1763
来自专栏Golang语言社区

Golang语言--- channel

// xuhh_go_channel project main.go /* channel 1. channel 在读取数据的时候,如果此时通道...

3699
来自专栏coding

transition-group实现动画效果

如果要实现动画效果的元素是通过v-for循环渲染出来的,就不能使用transition,应该用transition-group将元素包裹

901
来自专栏从零开始学自动化测试

Selenium2+python自动化74-jquery定位

前言 元素定位可以说是学自动化的小伙伴遇到的一道门槛,学会了定位也就打通了任督二脉,前面分享过selenium的18般武艺,再加上五种js的定位大法。 这些还不...

2876
来自专栏黒之染开发日记

我在移动web开发中遇到的各种问题

目前(2015年8月3日15:02:24)在大部分安卓手机都发现这个问题,触发bug的条件知道了,但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚...

1282
来自专栏专业duilib使用+业余界面开发

duilib中获取的控件的位置或者大小不对的可能的原因

2584
来自专栏我爱编程

PyCharm

1924

扫码关注云+社区

领取腾讯云代金券