<!-- 宿主文件 -->
<div id="app">
{{title}}
</div>
<script src="vue.js"></script>
<script>
// 1.创建实例
const app = new Vue({
el:'#app',
data() {
//数据的指定,vdata
return {
title: 'hello, vue'
//数据
}
},
})
setTimeout(()=>{
//用定时器来动态的改变标签
app.title = 'mu ~ vue'
},1000)
总结:
//数据驱动的理念
//数据驱动应用
//mvvm的践行者
//mvvm框架的三要素:响应式、模板引擎及其渲染
//响应式:vue如何监听数据变化
//模板:vue的模板如何编写和解析
//渲染:vue如何讲模板转化成为html
//通过虚拟交互,从而开发者减少与document 接触,而大幅度的增加开发的效率
步骤:
1,div里 用{{}} 的形式放进定义的数据名如:title
2,创建new Vue实例
3.创建数据函数 vdata
4.在vdata里返回数据名里的内容: return {title: 'hello, vue'//数据}
5.这里给他做个动态定时器用来改变div里的内容
7.定义一个变量名app 来存储实例 const app = new Vue
8. 输入定时器时间,和改变后的值 app.title = 'mu ~ vue'