第六十篇：Vue的基本使用
阿新 • • 發佈：2022-03-30
好傢伙，要來了，經典“hello world”
試用一下vue
① 匯入 vue.js的 script 指令碼檔案
② 在頁面中宣告一個將要被vue所控制的DOM區域
③ 建立vm例項物件（vue例項物件）
試一試 :隨便開一個.html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="">
<meta name="viewport" content="width=device-width,initial-scale=1.0
//el屬性是固定的寫法,表示當前的vm例項要控制頁面上的那個區域,接受的值是一個選擇器
el:'#app',
//data物件就是要渲染到頁面上的資料
data:{
username:'zhangsan'
}
})
</script>
</body>
</html>
效果如下:
看著沒什麼問題
2.vue的指令
2.1.內容指令v-text
特性:會覆蓋標籤內部原本的內容
2.2.{{}}插值語法
如這個
<div id="app">{{ username }}</div>
2.3.v-html指令
用於標籤的插入
1．內容渲染指令
1．v-text 指令的缺點：會覆蓋元素內部原有的內容！
2．{{ }}插值表示式：在實際開發中用的最多，只是內容的佔位符，不會覆蓋原有的內容！
3．v-html指令的作用：可以把帶有標籤的字串，渲染成真正的HTML內容！
2．屬性繫結指令
注意：插值表示式只能用在元素的內容節點中，不能用在元素的屬性節點中！
·在vue中，可以使用v-bind：指令，為元素的屬性動態繫結值；
·簡寫是英文的：
·在使用v-bind屬性繫結期間，如果繫結內容需要進行動態拼接，則字串的外面應該包裹單引號，例如：
屬性繫結v-bind
(v-bind:src 與 :src是等效的 ":"是"v-bind"的簡寫)
為元素的屬性動態繫結
<div :title=＂'box'＋index＂>這是一個 div</div>