![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CMjV2YihDZmRGO4YmYzQDMhZjY2EmY0AzNhhzY0IGZz8CXzAzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL3M3Lc9CX6MHc0RHaiojIsJye.png)
一個小案例(要去官網下載下傳vue的js檔案,放到js檔案夾中):
容器和vue執行個體隻能一一對應。
在雙大括号中能寫的可以是js表達式和js代碼:
===
v-bind: 表示給後面的字元動态綁定值,可以直接簡寫成:
v-model:value(簡寫:v-model)
容器和執行個體有兩種關聯寫法:
date的兩種寫法:
函數式的簡寫:
==============
MVVM模型:
用方法将age屬性注入到person中(這樣注入的值是無法周遊到的,要添加配置項才能修改):
加一個配置項就能周遊到(object.keys就是用來周遊keys):
還有幾個配置項:
getter和setter:
簡單的一個資料代理(用obj2去改變obj1的x值):
============
事件處理:
====
示範用插值文法和method方法:
計算屬性的示範:
計算屬性的簡寫(隻有查詢沒有修改的時候才能這麼寫):
監視屬性:
第二種寫法:
深度監視,監視屬性多級結構中的值:
監視的簡寫形式(隻有不寫配置項如:deep的時候才可以簡寫):
優化一下(三種心情随機出現):
=============
清單渲染
周遊數組:
必須要給每個結構取個唯一的名字,就是key
p就是每個元素,index就是每個元素的索引
周遊對象:
周遊字元串:
設定key的作用,key的原理:
清單的過濾:
做個優化:
用計算屬性代替watch實作過濾,其中 indexof方法是判斷是否包含,傳回值為-1代表不包含:
=========
清單排序:
通過計算屬性實作排序,其中.sort方法就是用來排序,通過兩個參數p1-p2或者p2-p1實作升序或者降序
vue對象資料監測的原理P34
vue數組資料監測的原理P35,36
========
過濾器:
========
===========
==================
自定義指令P47
生命周期: