[Vue入門及介紹，基礎使用、MVVM架構、插值表示式、文字指令、事件指令]

劉較瘦丫發表於2021-07-13
VueMVVM架構事件

[Vue入門及介紹，基礎使用、MVVM架構、插值表示式、文字指令、事件指令]

1）定義：javascript漸進式框架

​ 漸進式：可以控制一個頁面的一個標籤，也可以控制一系列標籤，也可以控制整個頁面，甚至可以控制整個前臺專案

2）優勢：

​ 有指令（分支結構，迴圈結構...），複用頁面結構等
有例項成員（過濾器，監聽），可以對渲染的資料做二次格式化
​ 有元件（模組的複用或組合），快速搭建頁面
​

虛擬DOM
資料的雙向繫結
單頁面應用
資料驅動

3）為什麼學習vue：

前臺框架：Angular（龐大）、React（精通移動端）、Vue（吸取前兩者優勢，輕量級）
Vue一手文件是中文
實現前後臺分離開發，節約開發成本

關於編輯器的選擇

'''
1 ide:
    python--->pycharm,vscode(免費)，juptyer    （anaconda）
    go------->goland,vscode(免費)
    java----->IDEA , myeclipse,eclipse
    前端----->webstorm,sublinetext,Hbuilder(nui-app),vscode,pycharm：vue外掛
    php------>phpstrom
    c/c++---->clion
    安卓開發---->androidstadio---->谷歌公司買了授權+adt
        
2 捷克的jetbrains公司出的，後期不管做什麼語言，簡易都用他家的
'''

MVVM架構

MVVM介紹

1 M(資料層)----V(頁面展示)----VM（vm）
2 雙向資料繫結：JS中變數變了，HTML中資料也跟著改變
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，是一種事件驅動程式設計方式
​
Model ：vue物件的data屬性裡面的資料，這裡的資料要顯示到頁面中
View ：vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” （HTML+CSS）
ViewModel：vue中編寫程式碼時的vm物件，它是vue.js的核心，負責連線 View 和 Model資料的中轉，保證檢視和資料的一致性，所以前面程式碼中，
　　　　　　 data裡面的資料被顯示中p標籤中就是vm物件自動完成的（雙向資料繫結：JS中變數變了，HTML中資料也跟著改變）
---------------------------------------------------------------------------------
M-V-VM思想：資料的雙向繫結（*****）
Model ：vue物件的data屬性裡面的資料，這裡的資料要顯示到頁面中
View ：vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” （HTML+CSS）
ViewModel：vue中編寫程式碼時的vm物件，它是vue.js的核心，負責連線 View 和 Model資料的中轉，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的（雙向資料繫結：JS中變數變了，HTML中資料也跟著改變）

img

MVVM的特性

  • 低耦合：檢視（View）可以獨立於Model變化和修改，1個ViewModel可以繫結到不同的View上，當View變化的時候 Model可以不變，當Model變化的時候 View也可以不變
  • 可複用：可以把一些檢視邏輯放在1個ViewModel中，讓很多View重用這端檢視的邏輯（以此減少程式碼冗餘）
  • 獨立開發：開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計
  • 可測試：介面元素是比較難以測試的，而現在的測試可以針對ViewModel來編寫

單頁面開發和元件化開發

元件化開發：
類似於DTL中的include，每一個元件的內容都可以被替換和複用

單頁面開發：
只需要1個頁面，結合元件化開發來替換頁面中的內容
頁面的切換隻是元件的替換，頁面還是隻有1個index.html

img

Vue環境簡單搭建：通過script標籤匯入vue檔案即可

"""
1）cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>  

2）本地匯入
<script src="js/vue.js"></script>
"""

掛載點el

"""
/** el: 掛載點

* 1）一個掛載點只能控制一個頁面結構（優先匹配到的結構）
* 2）掛載點掛載的頁面標籤嚴格建議用id屬性進行匹配（一般習慣用app）
* 3）html標籤與body標籤不能作為掛載點（html和body標籤不可以被替換，元件中詳細介紹）
* 4）是否接受vue物件，是外界是否要只有vue物件的內容決定的

*/
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>

</head>

<body>

    <div id="d1">
	
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#d1',   # 將id為d1的div 掛載
  	
    })

</script>
</html>

插值表示式 模板語法

"""
 /** 插值表示式
     * 1）空插值表示式：{{ }}
     * 2）中渲染的變數在data中可以初始化
     * 3）插值表示式可以進行簡單運算與簡單邏輯
     * 4）插值表示式符合衝突解決，用delimiters自定義（瞭解）
     */
"""

<div id="app">
    <p>{{ info }}</p>
    <p>{{ msg }}</p>
    <p>{{ }}</p>
    <p>{{num}}</p>
    <p>{{num + 10 * 2}}</p>   # 可做運算
    <p>{{ msg.length + num }}</p>
    <p>{{ msg[4] }}</p>   # 可索引取值
    <p>{{ msg.split('')[4] }}</p>  # 可按指定字元切分，切分後去索引4
    <p>[{ num }]</p>
    
     <input type="text" v-model="name">
</div>
<script>
	// 例項化得到一個vue物件，傳入一些引數，
    var vm = new Vue({
        el: '#app',   # el掛載
        data: {
            info: '資訊',
            msg: 'message',
            num: 10,
            name: 'dsb'
        },
        // 控制vue插值表示式符合
        delimiters: ['[{', '}]'],
    })
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值語法：放js變數或語法</title>
    <script src="./js/vue.js"></script>
</head>
<body>


<div id="app">

    <p>
        名字：{{name}}
    </p>
    <p>
        陣列：{{t}}
    </p>
    <p>
        陣列的第一個值：{{t[1]}}
    </p>

    <p>
        物件：{{obj}}
    </p>
    <p>
        物件取值：{{obj.name}}
    </p>


    <p>
        s字串：{{s}}
    </p>
        條件？值：值
    <p>三目運算子： {{100>20?'是':'否'}}</p>
</div>


</body>
<script>


    var a =10>20?'是':'否'

    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            t: ['張三', '李四', 1],
            obj: {name: 'lqz', age: 19},
            s: '<a href="http://www.baidu.com">點我看美女</a>'
        }
    })
</script>

</html>

指令之文字指令

v-html 讓HTML字串渲染成標題

v-text 標籤內容顯示js變數對應的值

v-show 放1個布林值：為真 標籤就顯示；為假 標籤就不顯示

v-if 放1個布林值：為真 標籤就顯示；為假 標籤就不顯示

"""
/**
* 1) v-* 是vue指令，會被vue解析，v-text="num"中的num是變數（指令是有限的，不可以自定義）
* 2）v-text是原樣輸出渲染內容，渲染控制的標籤自身內容會被替換掉（<p v-text="num">123</p>會被num替換）
* 3）v-html可以解析渲染html語法的內容
*/
v-show	放1個布林值：為真 標籤就顯示；為假 標籤就不顯示
v-if	放1個布林值：為真 標籤就顯示；為假 標籤就不顯示

v-show與 v-if的區別：
v-show：標籤還在，只是不顯示了（display: none）
v-if：直接操作DOM，刪除/插入 標籤

4）補充
<!-- js基本資料型別：字串、數字、布林、undefined -->
<p v-text="'abc' + num + 10"></p>
<p>{{ 'abc' + num + 10 }}</p>
"""

<body>
    <div id="app">
        <p>{{ num | add(300) }}</p>

        <p v-text="num"></p>
        <p v-text="num">123</p>

        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100,
            info: '<i style="color: red">info內容</i>'
        },
        filters: {
            add: function (a, b) {
                return a + b;
            }
        }
    })
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字指令</title>
    <script src="./js/vue.js"></script>	
</head>
<body>


<div id="app">

    <div v-html="s"></div>
    <hr>

    <p v-text="name"></p>
    <span>{{name}}</span>

    <hr>
<!--        <div v-show="false">我是個div</div>-->
        <div v-show="show">我是個div--v-show</div>

    <hr>
    <div v-if="show">我是個div--v-if</div>

    <hr>
    <h1>通過點選按鈕實現div顯示與不顯示</h1>
    <button @click="handleClick">點我顯示/不顯示</button>

    <h1 v-show="show_h1">我是一個h1標題</h1>



</div>


</body>
<script>


    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            s: '<a href="http://www.baidu.com">點我看美女</a>',
            show:true,
            show_h1:true
        },
        methods:{
            handleClick(){
                // alert('11111')
                // this.$data.show_h1=false

                this.show_h1=!this.show_h1
            },
        }
    })
</script>

</html>

指令之事件指令

v-on:事件	     觸發事件（不推薦）
@事件	         觸發事件（推薦）  與↑ 效果一樣
@[event]	  觸發event事件（可以是其他任意事件）

"""
/**
 * 一、資料驅動
 *  1）操作是一個功能，使用需要一個方法來控制 
 	2）方法名是變數，所以控制變數就可以控制該方法
 *
 *
 * 二、事件指令
 *  1）在例項成員methods中宣告事件方法
 *  2）標籤通過事件指令繫結宣告的方法： v-on:事件名="事件方法名"
 *      eg: <button v-on:click="btnClick">按鈕</button>
 *  3）標籤通過事件指令繫結宣告的方法，且自定義傳參： v-on:事件名="事件方法名()"
 *      eg: <button v-on:click="btnClick()">按鈕</button>  不傳任何引數
 *      eg: <button v-on:click="btnClick($event)">按鈕</button>  傳入事件物件，同不寫()
 *      eg: <button v-on:click="btnClick(10)">按鈕</button>  只傳入自定義引數，當然也可以傳入事件物件
 */
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
​
<div id="app">
    <h1 v-html="link"></h1>
    <h1 v-text="name"></h1>
    <h1 v-text="link"></h1>
    <h1></h1>
​
    <button @click="handleClick">若隱若現</button>
    # @click="handleClick"  與 v-on:click="handleClick" 一樣
    
    <div v-show="show">
        <h2>我只要你一滴淚的時間，聽你形容他狠心的臉</h2>
    </div>
​
​
    <button @click="handle1">點我</button>
    <div v-if="if_show">
        <h2>那些快樂的夢都變醜了，你看不見嗎</h2>
    </div>
​
    <div></div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'geng',
            link: '<a href="http://www.baidu.com">點我</a>',
            show: true,
            if_show: true
        },
        methods: {
            handleClick() {
                this.show = !this.show
            },
            handle1() {
                this.if_show = !this.if_show
            }
        }
    })
</script>
</html>

相關文章