最近除了我在優化以及測服務端併發，還有mq的優化
其他人在用vue.js寫項目的前端
我 真的是一點也不會 才懶得看
雖然主要做服務端，還是學習下，不好前端怪尷尬的，萬一以後面試招全站呢？
歡聲笑語打出GG 要有後端服務端工程師的堅持
v-bind屬性
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>I wanna leave</h1>'
}
})
</script>
我注意到，html 並不是div的一個屬性，所以是用v-html
其他的比如id,class等都是用的 v-bind-id = "id" v-bind-class = "class"
v-bind-id
v-bind-class
v-bind-href
<p v-if ="seen"></p> 這個可以控制是否顯示
v-html
v-if
v-on:click
v-model //值
v-on:submit
v-show //true 和 false
Vue.js 提供了完全的 JavaScript支持
{{就和普通的js一樣，還可以創建變量的，改變變量}},我發現js寫的變量依然可以綁定到v-bind，v-if等上面
過濾器
<div id="app">
{{ message | capitalize("ss",aa)}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob',
aa:"和你貼心的流浪"
},
filters: {
capitalize: function (value,value1,value2) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)+value1+value2
}
}
})
</script>
縮寫
<a :href="url"></a>
<a @click="doSomething"></a>
條件和循環語句
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<ol>
<li v-for = "item in items">
{{item.name}}
</li>
<ol>
<template v-for="item in items">
<li>{{item.name}}</li>
</templacte>
<template v-for="（value,key,index） in object">
<li>{{value}}</li>
<li>{{index}}</li>
</templacte>
<template v-for="（value,index） in list">
<li>{{value}}</li>
</templacte>
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
跟最近學的python有點像
計算屬性
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>計算後反轉字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'battle!'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
可以用methods代替 computed
監聽
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch: {
meters:function(value){
this.meters = value;
this.kilometers = value / 1000;
},
kilometers:function(value){
this.kilometers = value;
this.meters = value*1000
}
}
});
// $watch 是一個實例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 這個回調將在 vm.kilometers 改變後調用
document.getElementById ("info").innerHTML = "修改前值爲: " + oldValue + "，修改後值爲: " + newValue;
})
</script>
class
有分隔符號的 - 需要用 ‘’ ,否則不需要
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
width: 150px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, text-danger: hasError }">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})
</script>
還能用object以及數組來代替呢
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
內聯樣式
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">夜空中</div>
</div>
<div id="app">
<div v-bind:style="styleObject">夜空中</div>
</div>
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">夜空中</div>
</div>
事件處理器
v-on:click
v-on:keyup.13
v-on:keyup.enter v-on:keyup.alt
@keyup.enter
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能點擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
表單
<div id="app">
<p>單個複選框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多個複選框：</p>
<input type="checkbox" id="runoob" value="穿越" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="紅塵" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="的悲歡" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>選擇的值爲: {{ checkedNames }}</span>
</ div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
.lazy
在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自動將用戶的輸入值轉爲 Number 類型（如果原值的轉換結果爲 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：
<input v-model.number="age" type="number">
這通常很有用，因爲在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。
.trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>