欢迎您来到Ganace 的个人博客。
在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。
诚挚地向您问候一声:您好，朋友！
这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。
想要在自己的平淡无奇的人生长河中留下些什么，
或者只是为了拯救老人家岌岌可危的记忆力，
仅此而已。
来到此地，分享与你。
也期待与您的再次相遇！
有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com
欢迎您的来信！
前段时间因为工作需要学习了前端Vue框架，目前有正在开发的项目也是用的Vue框架，有了一定程度的开发经验，现在有一点空闲时间，正好总结梳理一下Vue的一些学习笔记。第二篇，内容包括Vue的一些基础学习：Vue基础使用，v-for列表，v-on:click计数器]。
Vue挂载，el: Vue数据，data:
<div id="app">
<p>{{ message }}-{{ name }}</p>
</div>
<script src="../common/js/vue.js"></script>
<script type="text/javascript">
//ES6新增let变量、const常量
const app = new Vue({
el: '#app', //挂载
data: {
message: 'Hello Vue!初体验',
name: 'Ganace',
}
});
</script>
v-for的使用
<div id="app">
<p>列表展示</p>
<ul>
<li v-for="music in musics">
{{ music }}
</li>
</ul>
</div>
<script src="../common/js/vue.js"></script>
<script type="text/javascript">
//ES6新增let变量、const常量
const app = new Vue({
el: '#app', //挂载
data: {
message: 'v-for列表展示',
musics: ['qianqian', 'kuwo', 'kugou', 'koukou', 'douban', 'wangyiyun']
}
});
</script>
v-on的使用与语法糖、methods:{}
<div id="app">
<h1>{{ title }}</h1>
<h2>当前计数：{{ counter }}</h2>
<button v-on:click='counter++'>+</button>
<button @click='counter--'>-</button>
<p></p>
<button v-on:click='add'>add</button>
<button @click='sub'>sub</button>
</div>
<script src="../common/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
title: '计数器',
counter: 0
},
methods: {
add: function () {
console.log('add run');
this.counter++;
},
sub: function () {
console.log('sub run');
this.counter--;
}
},
})
</script>