vue第一个入门程序 简单的hello word
首先认识一下vue单文件,写在html中的vue,我们通过一个例子体验一下vue的数据绑定方式
head中引入vue.js
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src='./vue.js'></script>
</head>
body中 写div这种结构 已经script中的vue相关代码
<body>
<div id="app">{
{content}}</div>
<script>
var vm = new Vue({
el: '#app',
data: {
content: 'hello world'
}
})
setTimeout(() => {
vm.$data.content = 'bye world';
}, 2000)
</script>
</body>
解释一下,el:'#app'代表的是 id app这个div里面包裹的所有内容 都由vue去接管 所以div中的content 通过双花括号的方式进行插值表达式,取出vue data中的centent内容 进行显示
两秒后,通过vm.$data取到data中的内容 并改变
运行效果如下