碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2021-07-13 22:37   299    Vue

[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>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue中的插值表達式和指令 Vue的插值與表達式 vue中的插值表達式的作用 AngularJS的表達式、指令的學習（2） vue從入門到進階：指令與事件（二） 五、案例-指令參考-freemarker指令、表達式 vue中的插值表達式 插值表達式 Vue input 控件: 通過自定義指令(directive)使用正則表達式限制input控件的輸入 VUE-文本-事件-屬性指令
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM