欢迎您来到Ganace 的个人博客。
在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。
诚挚地向您问候一声:您好，朋友！
这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。
想要在自己的平淡无奇的人生长河中留下些什么，
或者只是为了拯救老人家岌岌可危的记忆力，
仅此而已。
来到此地，分享与你。
也期待与您的再次相遇！
有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com
欢迎您的来信！
前段时间因为工作需要学习了前端Vue框架，目前有正在开发的项目也是用的Vue框架，有了一定程度的开发经验，现在有一点空闲时间，正好总结梳理一下Vue的一些学习笔记。第五篇，内容包括Vue的一些基础学习：Vue的指令与语法糖。
v-once：数据只在第一次渲染，之后不再做改变
v-html：把数据解析成html再展示
v-text：把数据按照文本来展示
v-pre：把数据不解析原样展示
v-cloak：斗篷，再vue解析之前存在，解析之后不存在
v-bind: 动态绑定属性:class属性、style（对象&数组）
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
<div id="app" v-cloak>
<p v-once>{{ vonce }}</p>
<p>{{ vhtml }}</p>
<p v-html="vhtml"></p>
<p v-text="vtext"></p>
<p v-pre="vpre">{{ vpre }}</p>
<!-- v-bind动态绑定属性 -->
<p class="title" v-bind:class="vbind">v-bind动态绑定属性</p>
<p :class="vbind">v-bind语法糖（简写）</p>
<p :class="{red: false}">v-bind语法class插入对象，{类名：布尔值，类名：布尔值}</p>
<p :class="{red: isRed}">v-bind语法</p>
<p v-bind:class="getClass()">v-bind语法用方法调取对象</p>
<button @click="btnColor">v-bind的class切换</button>
<p class="title" :class="['active','line',vbind]">v-bind语法class插入数组</p>
<!-- <p :class="{key(属性名):value(属性值)}">233</p> -->
<!-- 50px必须加单引号，否则会被当做变量解析 -->
<!-- <p :style="{fontSize: '50px'}">v-bind+style</p> -->
<!-- finalSize当做变量使用 -->
<p :style="{fontSize: finalSize + 'px',color: finalColor}">v-bind+style</p>
<!-- v-bind动态绑定style数组语法 -->
<p :style="[baseStyle,baseStyle1]">v-bind+style</p>
</div>
<script src="../common/js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
title: '差值操作&动态绑定属性',
messages: [
'v-once数据只在第一次渲染，之后不再做改变',
'v-html把数据解析成html再展示',
'v-text把数据按照文本来展示',
'v-pre把数据不解析原样展示',
'v-cloak斗篷，再vue解析之前存在，解析之后不存在',
'v-bind动态绑定属性+class属性',
'v-bind动态绑定属性style（对象&数组）',
],
vonce: 'vonce',
vhtml: '<a href="https://www.zhihu.com/explore">zhihu</a>',
vtext: 'vtext',
vpre: 'vpre',
vbind: 'red',
isRed: true,
finalSize: '40',
finalColor: 'red',
baseStyle: {
backgroundColor: 'red'
},
baseStyle1: {
fontSize: '50px'
}
},
methods: {
btnColor: function () {
this.isRed = !this.isRed;
},
getClass: function () {
return {
red: this.isRed
};
}
},
});
app.vonce = '123';
</script>