1.在頁面引入vue.js文件庫地址
Vue和React:不允許直接操作dom節點,所有的dom節點都為:虛擬dom
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
一般下載到本地修改為vue.min.js引入
2.實例化
var vm=new Vue{
el:'dom對象',
data:{
屬性:'值'
} }
實例掛載dom對象
特性:所有vue實例對象方法或屬性,都必須用$符號 或者方法el也可以
vm.$amount('')
new Vue({}).$mount('選擇器')
3.作用域
-全局
-子樹
-組件
-實例
4.數據綁定
vue指令
指令名:v-
實例化的屬性:model
vm層:頁面view可視化+data數據
雙向綁定:v-model
修飾符 .
v-model增強指令修飾.+功能
v-model.lazy
.lazy:實現oninput事件切換onchange 懶監聽事件
v-model.trim
.trim:自動過濾輸入內容最開始和最后的 空格,中間的會保留一個空格,多的會被過濾掉
number修飾符數字類型:v-model.number
值綁定語法
innerText指令:v- 文字內容綁定text
v-text=""
運算:三目、&&、|| 得到是一個值
5.循環
v-for循環:遍歷指令
遍歷數組對象
用數組對象屬性得到屬性值
采用數組的for...in=>for(let item in list)
v-for="item in list"
if {}else if {}else{}需要符合條件,否則不會渲染
v-if=""
v-else-if=""
v-else=""
v-show:顯示與否指令
通過display控制元素是否展示
v-show=""
if和show區別
根據業務不同,使用不同命令;
如果數據變化比較頻繁使用v-show,否則使用v-if