我看官方文档就是直接引用javascript方式的,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
</div>
</body>
<script>
Vue.component('button-counter',{
data(){
return{
count:0
}
},
template:'<button @click="method1">You clicked me {{count}} times.</button>',
methods:{
method1(){
this.count++
}
}
});
new Vue({el:'#components-demo'});
</script>
</html>
在ECMAScript 2015之前的版本其实可以写成这样,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
</div>
</body>
<script>
Vue.component('button-counter',{
data:function(){
return{
count:0
}
},
template:'<button @click="method1">You clicked me {{count}} times.</button>',
methods:{
method1:function(){
this.count++
}
}
});
new Vue({el:'#components-demo'});
</script>
</html>
用对于data:function(){}可以用data(){}是这种简写的方式,原来对methods:{method1(){}}的这种方式不太理解。现在我理解这其实就是methods:object(对象),object(对象) literal(字面常量翻译不一样) method1:function(){}的简写方式。和上面都是一样的道理。mdn是最好的,不懂就去找找。而且现在都是中文的了,确实很方便。链接如下:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Method_definitions