1、先看一个经典的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-on:click="fn1" >{{message}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
message: 'Hello Vue.js!'
},
methods:{
fn1: function(){
this.message = 'hello world'
}
}
})
</script>
</body>
</html>
运行上面的代码 页面上就会输出 "Hello Vue.js! " 几个字，点击文字会变成"hello world"
1-1我们来理解一下vue的执行机制
<div id="app" v-on:click="fn1" >{{message}}</div>
<script>
var app = new Vue({
el:"#app", //可以用id(#)、类(.)、标签(div)
data:{
message: 'Hello Vue.js!'
},
methods:{
fn1: function(){
this.message = 'hello world'
}
}
})
</script>
上面的代中，用new关键字实例化了一个Vue对象并传递了一个参数（对象）这个对象主要包括3个重要的方法(el,data,methods)
el选择要渲染的元素，el:"#app" el:".app" el:"div" 这些都是支持的
data 是一个对象，里面存放数据（或者说变量）,他可以直接显示在页面上，可以在methods中被调用、修改。
methods 这里面是一些方法的集合，把所有的方法都定义在mehtods中.，再通过v-on:click="fn1"的方式调用mehtods中的fn1方法。
总结一下
1/首先得有一个标签（展示数据） 如： <div id="app">{{message}}</div>
2/其次得实例化一个vue对象 new Vue()
3/在传入的对象中
3-1选择元素
el:"#app"
3-2定义数据
data:{
message: 'Hello Vue.js!'
}
3-3定义方法
methods:{
fn1: function(){
this.message = 'hello world'
}
}
