欢迎您来到Ganace 的个人博客。
在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。
诚挚地向您问候一声:您好，朋友！
这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。
想要在自己的平淡无奇的人生长河中留下些什么，
或者只是为了拯救老人家岌岌可危的记忆力，
仅此而已。
来到此地，分享与你。
也期待与您的再次相遇！
有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com
欢迎您的来信！
前段时间因为工作需要学习了前端Vue框架，目前有正在开发的项目也是用的Vue框架，有了一定程度的开发经验，现在有一点空闲时间，正好总结梳理一下Vue的一些学习笔记。第四篇，内容包括Vue的一些基础学习：Vue的组件与差值语法。
全局组件: 可以在vue控制的任意模版下使用
局部组件: 仅在实例控制的html代码段里可以使用
<div id="app">
<p>{{ message }}</p>
<p>{{ ( 1 + 2 ) * 3 }}</p>
<p>{{ num + 1 }}</p>
<p>{{ num * 2 }}</p>
<p>{{ title + message }}</p>
<p>{{ title + ' ' + message }}</p>
<p>{{ title }} {{ message }}</p>
<my-component></my-component>
<my-ganace></my-ganace>
</div>
<div id="app2"></div>
<script src="../common/js/vue.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: "<div>我是全局组件-{{ name }}</div>",
// 使用vue.component定义组件
// 第一参数: 定义组件的名字
// 第二参数: 是个对象
// 全局组件: 可以在vue控制的任意模版下使用
data: function () {
// data字段必须是函数
return {
name: 'abc'
}
}
})
const app = new Vue({
el: '#app',
data: {
tab: 'show',
title: 'Vue',
message: 'Mustache语法（双大括号）',
num: 233
},
// 局部组件
components: {
'my-ganace': {
template: '<div>这是局部组件</div>'
}
}
});
const app2 = new Vue({
el: '#app2',
data: {
name: 'ganace'
},
template: '<my-component></my-component>'
});
</script>