一个简单的vue引用

1.引入vue.js文件

2.设置id

3.实例化Vue

var dom = document.getElementById('app');
dom.innerHTML='hello world'
setTimeout(function  () {
dom.innerHTML='bye world'

},2000)

js延时函数

在Vue里延时替换innerHTML

要指明变量app 要添加上data的content，这样就不需要关心dom只要关心content就可以。

实现把input框里的内容提交后传送到下面

1.

1.用v-for来循环li标签的内容

data后跟大括号，数组里的东西用单引号括起来

var app = new Vue({
el:'#app',
data:{
list:['第一课的内容','第二课的内容','第三课的内容']
}

})

2.给button绑定click事件 用v-on指令

<button v-on:click="handleBtnClick">提交</button>

3.点击button后，获取input里的内容

3.1在input里绑定数据，<input type="text" v-model="inputValue"><!--inputValue实际上是data数据，而不是方法--

3.2在data里声明数据，data:{
list:[],
inputValue:''
},

再alert 出来  methods:{
handleBtnClick:function  () {
alert(this.inputValue) //alert如果弹出的是变量,就不能加引号
}
}

 用v-model数据双向绑定，当vue实例的数据变化，页面的内容页会跟着变化

在控制台里输入app.$data.inputValue 点击提交按钮后可以输出文本框理里的内容

4.把input里的内容push到li标签里

把alert方法换成this.list.push(this.inputValue)即可

5.点击提交之后input框里的内容置空

this.inputValue=''，把data里的inputValue置空

在vue里都是操作数据而不是dom,操作data里的内容，称为mvvm实际模式

mvp模式

m 指model v 指视图 p 控制器，都是在控制dom,

mvvm模式

当对m层数据改变的时候，v层也会随之改变

组件就是页面上的一个区域

通过组件拆分来完善项目

component是全局组件的方法，

点击提交按钮会在下面渲染出template模板里的东西

但是提交之后push的内容都一样

如何改变呢

1.申明全局组件TodoItem