vuejs的核心是乙個允許使用簡潔的模板語法宣告式的將資料渲染進dom元素的系統
1.基礎構建
//vuejs引入
//宣告資料
2.使用簡潔的語法將資料渲染進模板
} //文字插值
v-html 將值作為html的形式插入當前dom元素
v-text 將值作為文字的形式插入當前dom元素
v-bind:屬性名=「值中可以有data資料物件的屬性」
v-once 只繫結一次資料
title
title
3.條件繫結和迴圈繫結
v-if、v-else、v-show
指的是當滿足if條件時才顯示標籤,後續不會再顯示此標籤
v-if和v-else之間不能有其他標籤
v-if 時,不僅是不顯示,而且dom不存在,而v-show時,是隱藏,看不見但dom存在
false
active
4.陣列、物件的渲染
陣列: v-for="(item,index) in arr"
物件:v-for="(item,key,index) in obj"
}}----}
}}===}===}
5.陣列物件更新檢測
更改陣列
1.使用能夠改變陣列本身的方法才運算元據 push pop shift unshift splice sort reverse
經常使用splice,功能比較強大,可以增加,刪除,修改vm.arr.splice(startindex,length,newvalue);
2.vm.$set(vm.arr,index,newvalue)
3.vue.set(vm.arr,index,newvalue)
更改物件
錯誤寫法 vm.obj.屬性名=「值」
正確寫法 1.vm.$set(vm.obj,key,newvalue)
2.vue.set(vm.obj,key,newvalue)
6.雙向資料繫結
雙向資料繫結 v-model 只能加給表單元素
7.繫結事件
在methods中新增函式 函式名()
methods:
}
在需要繫結的物件上新增 @繫結事件名稱=「函式名」
span
阻止冒泡 @繫結事件名稱.stop=「函式名」
阻止瀏覽器預設行為 @繫結事件名稱.prevent=「函式名」
span
8.結合實踐,用vue寫tab切換例子
}
Vue 基礎指令用法總結
v text關聯標籤的文字內容 textcontent 不能讀取html標籤 v html關聯更新元素的 innerhtml 可以讀取html標籤 v bind當表示式的值改變時,將其產生的連帶影響,響應式地作用於 dom 簡寫 class msg 超連結超連結v on元素繫結事件 超連結 超連結事...
vue基礎內容總結(四)
每個 vue 應用都是通過用 vue 函式建立乙個新的 vue例項開始的 var vm new vue 選項 雖然沒有完全遵循mvvm 模型,但是 vue 的設計也受到它的啟發。當建立乙個 vue 例項時,可以傳入乙個選項物件。乙個 vue 應用由乙個通過 new vue 建立的根vue例項,以及可...
Vue基礎知識總結
vue會管理el選項命中的元素 及其內部的後代元素 可以使用其他的選擇器,但是建議使用id選擇器 可以使用其他的雙標籤,不能使用html 和body 1.內容繫結 事件繫結 v text v html v on基礎 v text 設定標籤的文字值,預設寫法會替換全部內容,使用差值表示式 可以替換指定...