vue基礎及指令

src=
"vue.js路徑"
>
script
>
>
// 這裡寫相關js的**
script
>

new

vue(

)掛載點，將對應符合選擇器要求的掛載點，作為vue的模板（只有變成模板才能去使用模板語法）

new
vue(
)

如果我們把資料放在data中，那麼我們就可以在頁面模板中直接使用這些data，如果實在new vue中的相關函式裡，我們可以使用this.***獲取對應的data

new
vue(})
/*   模板插值可以使用 }
new vue的函式中可以使用 this.msg獲取 this.msg="新的值"設定
*/

我們可以把專案中涉及到的函式以及事件函式防止在methods中。

事件函式繫結

我們需要使用v-on指令，具體操作在v-on內容

直接呼叫

如果想要在乙個函式中呼叫另外乙個函式，可以使用this.函式名()

插值可以使用 }

>
}html
>

設定元素的顯示隱藏狀態，是css級別的（display）

相當於innertext、innerhtml

我們可以通過條件判斷來決定html是否渲染（在一些頁面上，相同的位置，有不同的狀態，就可以使用該方法去解決對應的渲染問題）

>
v-if
="!arr.length"
>
暫無資料div
>
v-else
>
}div
>
div>
>
newvue(}
)script
>

當我們要對資料進行遍歷渲染列表時可以使用v-for

v-for一定要新增key，v-for和v-if盡量不要在同乙個標籤上使用，可以利用template標籤


v-for
="item in arr"
>
div>
v-for
="(item, index) in arr"
>
div>
v-for
="(value, key, index) in obj"
>
div>

在頁面標籤裡插入內容用}，如果我們想要在標籤屬性中插值，可以使用v-bind:屬性="動態值"

v-bind可以縮寫為:

:src
="data中相關屬性名"
>

class的繫結

class的繫結有多種用法

:class
="classname"
>
div>
:class
="[classname1, classname2, classname3]"
>
div>
:class=""
>
div>
:class
="['box', ]"
>
div>

style的繫結

樣式的繫結後面跟著的可以是乙個物件，物件中包含相關css屬性及值

:style=""
>
div>

v-model是實現雙向繫結的指令，v-model支援表單的各種元素。v-model就是為了方便我們獲取表單中value值

見到表單元素就新增v-model，並且在data中給單獨的表單設定單獨的物件，物件中包含的所有屬性都是每個表單元素的value

v-model
="value"
>

v-on為了實現事件的繫結

@click
="methods中的函式名"
>
v-on=""
>

不讓vue進行渲染

只渲染一次，渲染後會失去和資料之間的管理

需要結合css使用

[v-cloak]

v show 控制當前元素的display block屬性控制元素的顯示隱藏 v on evennam.修飾符等同於 eventname.修飾符註冊事件事件修飾符事件操作符可以連用 prevent 阻止事件預設行為 stop 阻止事件冒泡 capture 捕獲階段執行從大元素到小元素 se...

filter 對介面的轉換，比如貨幣顯示形式 vue基礎指令 v mode 雙向繫結，用於文字框輸入框單選複選下拉框等等，輸入改變，模型也會改變反之，模型改變，輸入也會改變。v text 更多的是乙個文字的渲染，與類似，只是在頁面未載入完vue的時候，會顯示在頁面上，所以一般採用v t...

指令是帶有 v 字首的特殊屬性 1 v html 非轉義輸出將xml型別資料解析防止xss,csrf 2 v text 和結果是一樣的，但是有個短暫的顯示 3 v bind 單項資料繫結作用將乙個資料賦值給已有屬性 4 v model 雙向資料繫結作用範圍表單元素,因為預設繫結了...