天天看點
傳回

《分布式微服務電商》專題(十)-電商項目前端Vue基礎文法

文章目錄

  • ​​1.MVVM思想​​
  • ​​2.安裝​​
  • ​​3.測試使用​​
  • ​​4.v-text、v-html、v-ref​​
  • ​​5.單向綁定v-bind​​
  • ​​6.雙向綁定v-model​​
  • ​​7.v-on事件​​
  • ​​8.v-for周遊​​
  • ​​9.v-if和v-show​​
  • ​​10.v-else和v-else-if​​
  • ​​11.縮寫@​​

1.MVVM思想

  • M：model包括資料和一些基本操作
  • V：view視圖，頁面渲染結果
  • VM：View-model，模型與視圖間的雙向操作（無需開發人員幹涉）

視圖和資料通過VM綁定起來，model裡有變化會自動地通過​

​Directives​

​​填寫到視​

​view​

​​中，視圖表單中添加了内容也會自動地通過​

​DOM Listeners​

​儲存到模型中。

教程：​​https://cn.vuejs.org/v2/guide/​​

《分布式微服務電商》專題(十)-電商項目前端Vue基礎文法
view     ViewModel    Model
隻要我們Model發生了改變，View上自然就會表現出來。
當使用者修改了View，Model中的資料也會跟着改變。
把開發人員從D0M操作中解放出來，那關注點放在如何操作Model上。

2.安裝

  • 下載下傳​

    ​js​

     ​​并用​

    ​<script>​

     ​​ 标簽引入：​

    ​<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>​

     ​
  • 或者在​

    ​VScode​

     ​​控制台使用​

    ​npm install vue​

     ​導入。步驟分為：
  • 先​

    ​npm init -y​

     ​初始化項目，生成了一個​

    ​package.json​

     ​檔案，說明他是一個​

    ​npm​

     ​管理的項目，類似于​

    ​maven​

     ​的​

    ​pom.xml​

     ​
    《分布式微服務電商》專題(十)-電商項目前端Vue基礎文法
  • ​

    ​npm install vue​

     ​​，安裝後在項目​

    ​node_modules​

     ​裡有​

    ​vue​

     ​，類似​

    ​maven install​

     ​拉取遠端到本地
    《分布式微服務電商》專題(十)-電商項目前端Vue基礎文法

3.測試使用

  • new Vue
  • 在dom中{{name}}代表從模型中放到view中
  • v-model實作雙向綁定

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<sc>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        v-model實作雙向綁定。此處代表輸入框和vue裡的data綁定
        <input type="text" v-model="num">

        v-on:click綁定事件，實作自增。
        <button v-on:click="num++">num++</button>

        回調自定義的方法。 此時字元串裡代表的函數
        <button v-on:click="cancel">取消</button>

        <h1> {{name}} ,非常帥，有{{num}}個人為他點贊{{hello()}}</h1>
        先從vue中拿到值填充到dom，input再改變num值，vue執行個體更新，然後此處也更新

    </div>
    <!--引入依賴-->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.vue聲明式渲染,生成Vue對象
        let vm=new Vue({
            el:"#app",//綁定元素 div id="app" 可以指定标簽，但是不可以指定body标簽
            data:{
                //封裝資料
                name:"張三",
                num:10
            },
            methods: {
                //封裝方法
                cancel(){
                    this.num--;
                },
                hello(){
                    return "1";
                }
            },
        });

        // 還可以在html控制台vm.name

        //2、雙向綁定,模型變化，視圖變化。反之亦然。
        //3、事件處理

        //v-xx：指令

        //1、建立vue執行個體，關聯頁面的模闆，将自己的資料（data）渲染到關聯的模闆，響應式的
        //2、指令來簡化對dom的一些操作。
        //3、聲明方法來做更複雜的操作。methods裡面可以封裝方法。

    </script>
</body>
</html>
在VSCode中安裝vue 2 snippets文法提示插件，在谷歌浏覽器中安裝vue-devtool

4.v-text、v-html、v-ref

這兩個可以使用data資料。而​

​<div>{{}}</div>​

​​這種寫法叫插值表達式，可以計算，可以取值，可以調用函數,這裡還介紹​

​v-html v-text​

​​差別

注意取的大多數不是請求域了，而是​​

​vue​

​​對象裡的​

​data​

​

插值閃爍：

使用​

​{{}}​

​​方式在網速較慢時會出現問題。在資料未加載完成時，頁面會顯示出原始的{{}}，

加載完畢後才顯示正确資料，我們稱為插值閃爍。

我們将網速調慢一些，然後重新整理頁面，試試看剛才的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}} {{1+1}} {{hello()}} 前面的内容如果網速慢的話會先顯示括号，然後才替換成資料。

        v-html 和v-text能解決這個問題
        <br/>
        
        用v-html取内容
        <span v-html="msg"></span>
        
        <br/>
        原樣顯示
        <span v-text="msg"></span>  

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
       new Vue({
           el:"#app",
           data:{
               msg:"<h1>Hello</h1>",
               link:"http://www/baidu.com",
           },
           methods: {
               hello(){
                   return "World"
               }
           },
       });
    </script>
</body>
</html>

5.單向綁定v-bind

問題：花括号隻能寫在标簽體内（​

​<div 标簽内> 标簽體 </div>​

​），不能用在标簽内。

插值表達式隻能用在标簽體裡，如果我們這麼用​

​<a href="{{}}">​

​​是不起作用的，是以需要 ​

​<a v-bind:href="link">​

​跳轉這種用法

解決：用​

​v-bind:​

​​，簡寫為​

​:​

​​。表示把​

​model​

​​綁定到​

​view​

​​。可以設定​

​src、title、class​

​等

在浏覽器裡vm.link="www.baidu.com"，此處vue資料改了，dom裡跳轉連結也改了class裡有哪些内容可以通過vue資料的bool值添加删除，而在style中代表的是k:v值。也可以把v-bind:簡寫成: {{}}必須有傳回值      
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a v-bind:href="link">跳轉</a>

        <!-- class,style  {class名：vue值}-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        let vm = new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color1: 'red',
                size: '36px'
            }

        });

    </script>
</body>

</html>

6.雙向綁定v-model

v-bind隻能從model到view。v-model能從view到model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 表單項，自定義元件 -->
    <div id="app">

        精通的語言：如果是多選框，那麼會把每個value值指派給vue資料
            <input type="checkbox" v-model="language" value="Java"> java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        選中了 {{language.join(",")}}
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language: []
            }
        })
    </script>

</body>
</html>

7.v-on事件

事件監聽可以使用 ​

​v-on​

​​ 指令

​​

​v-on:事件類型="方法"​

​​ ，可以簡寫成​

​@事件類型="方法"​

​

事件冒泡：大小div都有單機事件，點了内部div相當于外部div也點選到了。

如果不想點選内部div冒泡到外部div，可以使用.prevent阻止事件冒泡

用法是​​

​v-on:事件類型.事件修飾符="方法"​

 ​ 還可以綁定按鍵修飾符 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
                
        <!--事件中直接寫js片段-->
        <button v-on:click="num++">點贊</button>
        <!--事件指定一個回調函數，必須是Vue執行個體中定義的函數-->
        <button @click="cancel">取消</button>
        <!--  -->
        <h1>有{{num}}個贊</h1>


        <!-- 事件修飾符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>



        <!-- 按鍵修飾符： -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />

        提示：

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancel(){
                    this.num--;
                },
                hello(){
                    alert("點選了")
                }
            }
        })
    </script>
</body>

</html>

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通過由點 ​

​.​

​ 表示的指令字尾來調用修飾符。

.stop - 阻止冒泡
.prevent - 阻止預設事件
.once - 隻觸發一次      
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫文法 -->
<input @keyup.enter="submit">

8.v-for周遊

可以周遊 數組[] 字典{} 。對于字典​

​<li v-for="(value, key, index) in object">​

​

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <ul>
            <!-- 4、周遊的時候都加上:key來區分不同資料，提高vue渲染效率 -->
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、顯示user資訊：v-for="item in items" -->
               目前索引：{{index}} ==> {{user.name}}  ==>   
                  {{user.gender}} ==>{{user.age}} <br>
                <!-- 2、擷取數組下标：v-for="(item,index) in items" -->
                <!-- 3、周遊對象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                對象資訊：
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
                <!-- 4、周遊的時候都加上:key來區分不同資料，提高vue渲染效率 -->
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index">{{num}}=={{index}}</li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [
                { name: '柳岩', gender: '女', age: 21 },
                { name: '張三', gender: '男', age: 18 },
                { name: '範冰冰', gender: '女', age: 24 },
                { name: '劉亦菲', gender: '女', age: 18 },
                { name: '古力娜紮', gender: '女', age: 25 }
                ],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

</html>

9.v-if和v-show

在vue執行個體的data指定一個bool變量，然後v-show指派即可。

show裡的字元串也可以比較

if是根據表達式的真假，切換元素的顯示和隐藏（操作dom元素）

差別：show的标簽F12一直都在，if的标簽會移除，

if操作dom樹對性能消耗大

v-if和v-show.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        v-if，顧名思義，條件判斷。當得到結果為true時，所在的元素才會被渲染。
        v-show，當得到結果為true時，所在的元素才會被顯示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">點我呀</button>
        <!-- 1、使用v-if顯示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show顯示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>

</body>

</html>

10.v-else和v-else-if 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button v-on:click="random=Math.random()">點我呀</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦? >= 0.75
        </h1>
        <h1 v-else-if="random>=0.5">
            看到我啦? >= 0.5
        </h1>
        <h1 v-else-if="random>=0.2">
            看到我啦? >= 0.2
        </h1>
        <h1 v-else>
            看到我啦? < 0.2
        </h1>

    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>

</html>

11.縮寫@

Vue.js 為兩個最為常用的指令提供了特别的縮寫：

<!-- 完整文法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>      
<!-- 完整文法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
html 資料 vue.js
上一篇: 淺談傳統短信對比新媒體平台在傳播上的優勢
下一篇: 《分布式微服務電商》專題(九)-電商項目前端ES6

繼續閱讀