Vue的基本知識你都瞭解嗎

2022-02-24 19:00:37

1. Vue的基本知識

1.1 Vue的使用

可以匯入Vue檔案或者是通過CDN引入
想要讓Vue工作就必須要建立一個Vue的範例物件，並且設定物件
在真實的開發中只有一個Vue的範例，並且配合元件一起使用

1.2 插值語法

<div>
  	<h1>
  			Hello!{{name}} {{Date.now()}} {{address}}
  	</h1>
  </div>

<script>
  Vue.config.productionTip = false  //阻止vue在生成時自動產生提示
//建立Vue範例
new Vue({
	el:'#root', //el用於指定當前Vue範例為哪個容器服務，值通常為css選擇器字串。
	data:{ //data中用於儲存資料，資料供el所指定的容器去使用，值我們暫時先寫成一個物件。
		name:'Tree',
		address:'China'
	}
})
  </script>

注意點：

1.{ { xxx } } 這裡的xxx要寫的是js表示式，並且它會自動讀取到data中所有的屬性

2.一旦data中的資料發生改變，那麼頁面用帶該資料的地方也會自動更新

3.插值語法的功能：用於去解析標籤體內容，標籤體就是起始標籤和結束標籤中間的內容，例如：<h1> xxx </h1> xxx就是標籤體

4.要區分什麼是js表示式？什麼是js程式碼？

    1. 什麼是js表示式？
       表示式可以產生一個值或者返回一個值
         (1) a = 1
         (2) a+b
         (3) Date.now() 函數
         (4) x = Y ? 1 : 2
                   
 	2. 什麼是js程式碼？（語句）
     	(1) if(){}
     	(2) for(){}
		js表示式就是一種特殊的js程式碼

1.3 v-bind（單向繫結）

指令語法有很多，下面例子只是其中一個 v-bind: ===> 可以簡寫為 :

加入該指令後 " " 裡的內容就會變成js表示式，而不是字串（這個知識點很重要後面使用的地方會很多）

該方法是解析標籤得屬性，指令的功能很強大可以解析標籤（例如：解析標籤體，標籤屬性，繫結事件）

<div class="wrapper">
        <h1>你好啊！{{name}}</h1>
        <hr>
        <a :href="school.url">點選進入{{school.name}}</a>
        <a v-bind:href="school.url">點選進入{{school.name}}</a>
    </div>
   <script>
       Vue.config.productionTip = false
       new Vue({
        el:".wrapper",
        data:{
            name:"Tree",
            school:{
                name: "bilibili",
                url:"https://www.bilibili.com/"
            }
        }
       })
   </script>

1.4 v-model（雙向繫結）

1.4.1 v-model和v-bind的區別

v-bind(單項繫結)：資料只能從data流向頁面
v-model(雙向繫結)：不僅資料從data流向頁面，而且可以從頁面流向data
雙向繫結一般用在表單類元素上面（input，select，含有value屬性值）
如果遇到像checkbox這種型別的沒有value值時，v-model/ v-bind 傳boolearn值可以去控制該型別的狀態

    <div class="wrapper">
        <!-- 普通寫法 -->
        <!-- 單項資料繫結: <input type="text" v-bind:value="name"><br>
        雙向資料繫結: <input type="text" v-model:value="name"> -->
        <!-- 簡便寫法 -->
        單項資料繫結: <input type="text" :value="name"><br>
        雙向資料繫結: <input type="text" v-model="name">
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:".wrapper",
            data:{
                name:"Hello"
            }
        })
    </script>

1.4.2 v-model 簡單小例子

<div class="root">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>
    <script>
        Vue.config.productionTip = false   //阻止vue在生成時自動產生提示
        new Vue({
            el:".root",
            data:{
                message:'Hello! Vue'
            }
        })
    </script>

1.4.3 v-model 收集表單案例

1.v-model的三個修飾符：

v-model.trim: 去掉前後空格
v-model.number:將收到的資料轉換為number型別
v-model.lazy:表示當失去焦點的時候再接收資料

2.v-model收集的就是value的值

當input型別為radio，需要我們去手動設定一個value值
當input型別為checkbox，它返回的布林值，根據情況進行是否設定value值
記住如果收集的是多個，屬性值要是一個空的陣列

 <div id="root">
        <form @submit.prevent="demo"> <!-- 當點選按鈕時，會有預設行為提交資訊，重新整理頁面-->
            <!-- v-model.trim表示去掉前後空格 -->
            賬號：<input type="text" v-model.trim="userinfo.account"><br><br>
            密碼：<input type="password" v-model="userinfo.password"><br><br>
            <!-- input型別的number是限制使用者的輸入，而v-model.number是將收到的資料轉換為number型別，二者配合使用 -->
            年齡：<input type="number" v-model.number="userinfo.age"><br><br>
            性別：
            <!-- 對於單選項，我們通過取相同的名字來表示是一組的 -->
            男<input type="radio" v-model="userinfo.sex" name="sex" value="男">
            女<input type="radio" v-model="userinfo.sex" name="sex" value="女"><br><br>
            愛好：
            <input type="checkbox" v-model="userinfo.hobby" value="打籃球">打籃球
            <input type="checkbox" v-model="userinfo.hobby" value="敲程式碼">敲程式碼
            <input type="checkbox" v-model="userinfo.hobby" value="乾飯">乾飯
            <br><br>
            所屬校區：
            <select v-model="userinfo.address">
                <option value="">請選擇地區</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="廣州">廣州</option>
                <option value="深圳">深圳</option>
            </select><br><br>
            <!-- v-model.lazy:表示當失去焦點的時候再接收資料 -->
            其他資訊：<textarea cols="20" rows="3" v-model.lazy="userinfo.other"></textarea>
            <br><br>
            <input type="checkbox" v-model="userinfo.agree">同意並接受
            <a href="#" style="text-decoration: none;">《使用者協定》</a>
            <br><br>
            <button>提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                userinfo:{
                    account:"",
                    password:"",
                    age:"",
                    sex:"",
                    hobby:[],
                    address:"",
                    other:"",
                    agree:""
                },
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userinfo));
                }
            },
        })
    </script>

1.5 理解MVVM

M

模型(Model) ：data中的資料

V

檢視(View) ：模板程式碼（不是靜態頁面）

VM

viewModel: 檢視模型（Vue的範例）

對MVVM的理解：

MVVM 本質上即模型-檢視-檢視模型。模型model指的是後端傳遞的資料，檢視view指的是所看到的頁面。檢視模型viewModel是 mvvm 模式的核心，它是連線 view 和 model 的橋樑。它有兩個方向：

將模型轉化成檢視，即將後端傳遞的資料轉化成所看到的頁面。實現的方式是：資料繫結

將檢視轉化成模型，即將所看到的頁面轉化成後端的資料。實現的方式是：DOM 事件監聽

這兩個方向都實現的，我們稱之為資料的雙向繫結

1.6 Object.defineProperty(重要)

 Object.defineProperty
                - 第一個引數：指定的物件
                - 第二個引數：要新增的屬性名
                - 第三個引數：設定項

<script>
        let number = 20
        Vue.config.productionTip = false  //阻止預設提示
        var person = {
            name : "jack",
            address : "hgs"
        }
        Object.defineProperty(person,"age",{
            // value: 18 ,
            // enumerable:true,   控制屬性是否能夠進行列舉，預設值false
            // writable:true,     控制屬性是否能夠被修改，預設值false
            // configurable:true  控制屬性是否能夠被刪除，預設值fasle
            // 上面屬於基本設定，下面get和set很重要
            //當有人讀取person的age屬性時get函數（getter）就會被呼叫，返回的值就是age的值
            get(){
                console.log("讀取成功！");
                return number
            },
            //當有人修改Person的age屬性時set函數（setter）就會被呼叫，修改後的值就會被獲取到value
            set(value){
                console.log("修改的值: "+value);
                number = value
            }
        })

1.7 資料代理（重要）

自我對於資料代理的理解：

當建立vm範例物件後，它會在裡面新增很多屬性，它會將data的資料傳入到vm下的_data中去，並且把_data的資料利用Object.defineProperty也就是資料代理到vm中去通過getter和setter去讀/修改，這樣做的目的是方便寫程式碼，直接{{name}},不用{{_data.name}}.
vue中的資料代理通過vm物件去代理data物件的屬性的操作給每一個新增到vm上的屬性，設定一個getter和setter通過getter和setter去操作data裡的屬性

    <div id="root">
    	<h1>Hello！{{_data.name}}</h1>
        <h1>Hello！{{_data.address}}</h1>
        <h1>Hello！{{name}}</h1>
        <h1>Hello！{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false  //阻止預設的提示
        var vm = new Vue({
            el: '#root',
            data: {
                name:"Jack",
                address:"China"
            }
        })
    </script>