好吧, 開始搞vue.js了,
主要是用于自己做個整理.
看了下很像angular.js很久之前用過, 不過現(xiàn)在忘得差不多了, 原理都差不多,應(yīng)該學(xué)起來也挺快.
似乎得好好梳理后才能寫, 先做成筆記吧
1: 聲明式渲染
// html
<div id="app">
{{message}}
</div>
// js
var myapp = new Vue({
el: "#app",
data: {
message: "這個是聲明是渲染"
}
})
可以看到雙花括號{{}}中的值可以去js中對應(yīng)el: id名字正確的構(gòu)造函數(shù)中的data對象中找對應(yīng)的鍵值, 并顯示在頁面上
2: 指令: v-bind:屬性(class, style value, src....) / prop()
//html
<div class="item">
<p>v-bind="綁定的變量" 指令</p>
<div id="app2">
<span v-bind:title="message">
這個也是聲明是渲染, 只不過使用了V-bind指令綁定了spand的title屬性,
</span>
</div>
</div>
//js
let app2 = new Vue({
el: '#app2',
data: {
message: 'test'
}
})
- 用于給一個標(biāo)簽動態(tài)添加某個屬性,
- 簡寫, 綁定class可見寫為
:class="lala" - 還有多種組合方法:
v-bind:class="imageA"-
:class="{ red: isRed }"(js中isRed 為true,或者false) -
:class="[classA, classB]"(js中classA, classB為鍵名對應(yīng)的值是類名) -
:class="[classA, { classB: isB, classC: isC }](上面兩種的結(jié)合) -
class="static" v-bind:class="{ active: true }"(與已有class共存, <div class="static active"></div>) -
v-bind="{ id: someProp, 'other-attr': otherProp }"(屬性的集合) -
:style="{ fontSize: size + 'px' }"(css樣式要駝峰命名, size是變量) -
:style="[styleObjectA, styleObjectB]"(styleObjectA 和 styleObjectB是對象中的鍵名) - (還有其他的, 之后再添加上)
