<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <p>{{count}}</p> -->
<!-- <p>{{fn1()}}</p> -->
<!-- <button onclick="方法名()"></button> -->
<!-- <button v-on:click="fn1()">按钮1</button> -->
<!-- <button v-on:click="fn1">按钮1</button> -->
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
count: 1
},
// 方法声明的
// 1. methods:{方法名:函数体}
// 2. methods中的方法fn1 可以通过vm.fn1()
// 3. methods中的方法 内部有一个关键字 this->当前vm实例 this.count访问数据
// 4. methods中的方法可以在视图中通过事件触发方法
// 5. methods中的方法可以在视图中的{{fn1()}}
methods: {
fn1: function () {
console.log("fn1--被调用了");
},
fn2: function () {
// 修改data中的count->访问data的数据->js中访问data数据
vm.count++;
},
fn3: function () {
// console.log(this); // this->当前vm
this.count++;
},
// 下面这个写法和Vue没关
// ES6 的新写法
fn4: function () {
},
fn4() {
console.log("fn4----");
}
}
});
// console.log(vm);
// vm.fn1();
</script>
</body>
</html>
