Vue快速入門

本文轉載自查看原文 2019-07-26 01:42 943

一. vue.js庫的下載

　　vue.js是目前前端web開發最流行的工具庫，由尤雨溪在2014年2月發布的。

　　另外幾個常見的工具庫：react.js /angular.js

　　官方網站：

　　　　中文：https://cn.vuejs.org/

　　　　英文：https://vuejs.org/

　　　　官方文檔：https://cn.vuejs.org/v2/guide/

　　vue.js目前有1.x、2.x和3.x 版本，我們學習2.x版本的。

　　下載步驟：

　　　　1. 進入中文官網：https://cn.vuejs.org/ 點擊起步。

　　　　2. 進入起步頁面，點擊安裝。

　　　　3. 進入安裝頁面，我們學習建議使用開發版本。

　　　　4. 選擇路徑進行保存，會有一個vue.js的文件（下載完畢，放在對應的文件目錄下，一引入就可以使用了）。

二. vue.js庫的基本使用

　　vue的引入類似於jQuery，開發中可以使用開發版本vue.js，產品上線要換成vue.min.js。

　　我們快速新建一個HTML文件，感受一下吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的快速使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!--要想正常顯示vue提供的數據，必須要放在vue對象控制標簽里-->
    <h2>{{title}}</h2>
    <div id="app">
        <h2>{{title}}</h2>
        {{ message }}
        <p>{{num}}</p>
        <input type="text" v-model="num">
    </div>

    <script>
        // vue.js的代碼開始於一個Vue對象。所以每次操作數據都要聲明Vue對象開始。
        var vm = new Vue({
            el: "#app",  // 設置vue對象控制的標簽范圍
            data: {     // vue要操作的數據
                "message": "hello world!",
                "title": "vue的快速使用",
                "num": 100,
            }
        })
    </script>
</body>
</html>

　　代碼執行的效果：

　　總結：

1. vue的使用要從創建Vue對象開始
   var vm = new Vue();
   
2. 創建vue對象的時候，需要傳遞參數，是json對象，json對象對象必須至少有兩個屬性成員
   var vm = new Vue({
         el:"#app",
     data: {
             數據變量:"變量值",
             數據變量:"變量值",
             數據變量:"變量值",
         },
   });
   
   el:設置vue可以操作的html內容范圍，值一般就是css的id選擇器。
   data: 保存vue.js中要顯示到html頁面的數據。
   
3. vue.js要控制器的內容外圍，必須先通過id來設置。
  <div id="app">
      <h2>{{title}}</h2>
      {{message}}
  </div>

三. vue.js的M-V-VM思想

　　M-V-VM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。

　　Model 指代的就是vue對象的data屬性里面的數據。這里的數據要顯示到頁面中。

　　View 指代的就是vue中數據要顯示的HTML頁面，在vue中，也稱之為“視圖模板” 。

　　ViewModel 指代的是vue.js中我們編寫代碼時的vm對象了，它是vue.js的核心，負責連接 View 和 Model，保證視圖和數據的一致性，所以前面代碼中，data里面的數據被顯示p標簽中就是vm對象自動完成的。

　　在瀏覽器中可以在 console.log通過 vm對象可以直接訪問el和data屬性,甚至可以訪問data里面的數據。

console.log(vm.$el)     # #app  vm對象可以控制的范圍
console.log(vm.$data);  # vm對象要顯示到頁面中的數據
console.log(vm.$data.message);  # 訪問data里面的數據
console.log(vm.message);# 這個 message就是data里面聲明的數據,也可以使用 vm.變量名顯示其他數據,message只是舉例.

　　總結：

1. 如果要輸出data里面的數據作為普通標簽的內容，需要使用{{  }}
   用法：
      vue對象的data屬性：
          data:{
            name:"小明",
          }
      標簽元素：
              <h1>{{ name }}</h1>
2. 如果要輸出data里面的數據作為表單元素的值，需要使用vue.js提供的元素屬性v-model
   用法：
      vue對象的data屬性：
          data:{
            name:"小明",
          }
      表單元素：
              <input v-model="name">
      
   使用v-model把data里面的數據顯示到表單元素以后，一旦用戶修改表單元素的值，則data里面對應數據的值也會隨之發生改變，甚至，頁面中凡是使用了這個數據都會發生變化。

四. 顯示數據

　　1. 在雙標簽中顯示數據要通過{{ }}來完成數據顯示（也可以使用v-html顯示雙標簽的內容，{{ }} 是簡寫，推薦簡寫）

　　2. 在表單輸入框中顯示數據要使用v-model來完成數據顯示

　　3. 雙花括號僅用輸出文本內容,如果要輸出html代碼,則不能使用這個.要使用v-html來輸出。v-html必須在html標簽里面作為屬性寫出來。

　　v-model或者v-html等vue提供的屬性，或者 {{}} 都支持js代碼。

    <h1>{{str1.split("").reverse().join("")}}</h1>
    <!-- 3.2 支持js的運算符-->
    <h1>{{num1+3}}</h1>

    <!-- 3.3 js還有一種運算符,三元運算符,類似於python里面的三元表達式
        三元運算符的語法:
         判斷條件 ? 條件為true的結果 : 條件為false的結果

        python 三元表達式[三元運算符]的語法:
        a if 條件 else b
     -->
    <h1>num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}</h1>

　　示例：

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

<div id="app">
    <p>{{url}}</p>
    <div>{{text}}</div>
    <div v-html="text"></div>
    <input type="text" v-model="url">
    <div>num是{{num%2==0?'偶數':'奇數'}}</div>
    <div>num的下一個數字：{{num-0+1}}</div>
    <input type="text" v-model="num">
    <div>{{message.split("").reverse().join("")}}</div>
    <input type="text" v-model="message.split('').reverse().join('')">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: "http://www.luffycity.com",
            text: "<h2>我是h2標簽</h2>",
            num: 100,
            message: "abcdef",
        }
    })
</script>

</body>
</html>

　　效果：

五. 常用指令

　　指令 (Directives) 是帶有“v-”前綴的特殊屬性。每一個指令在vue中都有固定的作用。

　　在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

　　指令會在vm對象的data屬性的數據發生變化時，會同時改變元素中的其控制的內容或屬性。

　　因為vue的歷史版本原因，所以有一部分指令都有兩種寫法：

vue1.x寫法              vue2.x的寫法
v-html         ---->   {{ 普通文本 }}   # vue2.x 也支持v-html，輸出html代碼的內容
v-bind:屬性名   ---->   :屬性
v-on:事件名     ---->   @事件名

　　1. 操作屬性

　　格式：

<標簽名 :標簽屬性="data屬性"></標簽名>

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作屬性</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <a v-bind:href="link">{{text}}</a>
    <!--推薦這種寫法-->
    <a :href="link">{{text}}</a>
    <img :src="img_url" alt="" height="200">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            text: "首頁",
            link: "http://www.luffycity.com",
            img_url: "images/詠春.jpg",
        }
    })
</script>

</body>
</html>

　　效果：

　　2. 綁定事件

　　有兩種事件操作的寫法，@事件名和 v-on:事件名

<button v-on:click="num+=1">贊</button> <!-- v-on 是vue1.x版本的寫法 -->
<button @click="num-=1">踩</button>

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>綁定事件</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    點贊數：{{num}}
    <!-- vue提供的事件操作中可以直接操作data屬性，不需要通過vm來調用，也不能使用vm來調用. -->
    <button v-on:click="num+=1">贊</button>
    <button @click="num-=1">踩</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            num: 0
        }
    })
</script>

</body>
</html>

　　效果：

　　總結：

1. 使用@事件名來進行事件的綁定
   語法：
      <button @click="num--">踩</button>

2. 綁定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus
   ....

　　操作購物車商品的數量案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作購物車商品的數量</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--簡單版本，存在一個bug，數量會存在負數-->
    <!--<span @click="num&#45;&#45;">-</span>-->
    <!--<input type="text" size="1" v-model="num">-->
    <!--<span @click="num++">+</span>-->

    <span @click="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="add">+</span>
    <!--也可以不加括號，有參數時，需要加括號-->
    <!--<span @click="add()">+</span>-->
    {{text}}
</div>
<script>
    var text = "測試";
    var vm = new Vue({
        el: "#app",
        data: {
            num: 0,
            text: text,   // 這里可以簡寫成 test
            // text,
        },
        // 定義操作data數據的方法
        methods: {
            add: function () {
                this.num++;  // this 指代vm對象
                let _this = this;
                setTimeout(function () {
                    // 因為setTimeOut不是vm提供的，所以這里的this指代的不是vm對象，
                    // 因此我們要在這里使用vm對象，需要在外面把vm對象（this）賦值給一個變量，我們在這里引用變量即可。
                    alert(_this.num)
                }, 1000)
            },
            // 在新版本的js代碼中，給對象添加方法，可以進行簡寫
            // sub: function () {
            //     this.num--;
            //     if(this.num <=0){
            //         this.num=0;
            //     }
            // }
            sub(){  // 省略了 : function
                this.num--;
                if(this.num <=0){
                    this.num=0;
                }
            }
        }
    })
</script>

</body>
</html>

　　效果：

　　3. 操作樣式

　　3.1 控制標簽class類名

　　格式：

<h1 :class="值">元素</h1>  值可以是字符串、對象、對象名、數組

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作樣式-class</title>
    <script src="js/vue.js"></script>
    <style>
        .p1{
            color: #ff6700;
            background: green;
        }
        .p2{
            border: 2px solid black;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- class的值是一個字符串，字符串就是class類名 -->
    <p :class="className">第一種使用方式</p>
    <p :class="is_add?className:''">第一種使用方式</p>
    <button @click="is_add=!is_add">點擊添加/移除樣式</button>


    <!--class的值是一個對象， 通過對象里面的屬性來輸出一個或多個class類名-->
    <p :class="{p1:bool, p2:bool2}">第二種使用方式</p>
    <button @click="bool=!bool">點擊添加/移除樣式</button>

    <!-- class的值是一個對象的變量名，這是上面第二種寫法的調用 -->
    <p :class="cls_name">第三種用法</p>
    <button @click="cls_name.p2=!cls_name.p2">點擊添加/移除邊框樣式</button>

    <!-- class的值是一個數組，可以通過給元素增加多個不同的class類名 -->
    <p :class="['p1','p2']">第四種使用方式</p>
    <p :class="[cls1,cls2]">第四種使用方式</p>
    <p :class="arr">第四種使用方式</p>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 第一種用法的相關屬性
            is_add: true,
            className: 'p1',

            // 第二種用法的相關屬性
            bool: true,
            bool2: true,

            // 第三種用法的相關屬性
            cls_name: {
                p1: true,
                p2: false,
            },

            // 第四種用法的相關屬性
            cls1: "p1",
            cls2: "p2",
            arr:["p1","p2"]
        },
    })
</script>

</body>
</html>

　　效果：

　　總結：

    給元素綁定class類名，最常用的就是第二種。
    vue對象的data數據：
        data:{
          myObj:{
            complete:true,
            uncomplete:false,
          }
        }

        html元素：    
            <div class="box" :class="myObj">2222</div>
    最終瀏覽器效果：
            <div class="box complete">2222</div>

　　3.2 控制標簽style樣式

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作樣式-style</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 用法1：style的值是一個json對象，對象格式： {樣式屬性名： 樣式值/變量, 樣式屬性名： 樣式值/變量 }
         樣式屬性名，必須是css樣式屬性的駝峰式寫法
         color  ----》  color
         background-color -----》 backgroundColor
    -->
    <p :style="{color: '#00f'}">第一種用法</p>
    <p :style="{color: text_color,backgroundColor: bgcolor,borderRadius: radius}">第一種用法</p>

    <!--用法2：值是對象變量名，對象在data中進行聲明-->
    <p :style="mystyle">第二種用法</p>

    <!--用法3：值是數組-->
    <p :style="[sty1,sty2]">第三種用法</p>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 第一種用法
            text_color:"#00f",
            bgcolor: "orange",
            radius: '30px',

            // 第二種用法
            mystyle:{
                color: '#ffffff',
                backgroundColor: 'red',
                borderRadius: '5px'
            },

            // 第三種用法
            sty1:{
                color: '#fff',
                // borderRadius: "5px",
                'border-radius': '5px',  // 如果不喜歡駝峰式，可以屬性名改成字符串寫法，就可以寫原生的css屬性名
            },
            sty2:{
                background: 'blue',
            }
        },
    })
</script>

</body>
</html>

　　效果：

　　3.3 實例vue版選項卡

　　代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選項卡模板</title>
    <script src="js/vue.js"></script>
    <style>
        .option_card{
            width: 400px;
            height: 300px;
            background: #eeeeee;
        }
        .title_box{
            height: 50px;
            background: #ff6700;
        }
        .active{
            background: #eeeeee;
        }
        span{
            line-height: 50px;
            text-align: center;
            display: inline-block;
            width: 80px;
        }
        .item{
            height: 250px;
            border-bottom: 1px solid black;
            display: none;
        }
        .current{
            display: block;
        }
    </style>
</head>
<body>
    <div class="option_card">
        <div class="title_box">
            <span :class="index==0?'active':''" @click="index=0">歐美專區</span>
            <span :class="index==1?'active':''" @click="index=1">日韓專區</span>
            <span :class="index==2?'active':''" @click="index=2">大陸專區</span>
            <span :class="index==3?'active':''" @click="index=3">圖片專區</span>
        </div>
        <div class="content_box">
            <div class="item" :class="index==0?'current':''">歐美專區的內容</div>
            <div class="item" :class="index==1?'current':''">日韓專區的內容</div>
            <div class="item" :class="index==2?'current':''">大陸專區的內容</div>
            <div class="item" :class="index==3?'current':''">圖片專區的內容</div>
        </div>
    </div>

    <script>
        // 選項卡
        // 在用戶點擊不同的位置的選項卡標題，同樣位置的選項卡內容要顯示出來
        var vm = new Vue({
            el: ".option_card",
            data: {
                index: 0,
            }
        })
    </script>
</body>
</html>

　　效果：

　　4. 條件渲染指令

　　vue中提供了兩個指令可以用於判斷是否要顯示元素，分別是v-if和v-show。

　　4.1 v-if

  標簽元素：
      <!-- vue對象最終會把條件的結果變成布爾值 -->
            <h1 v-if="ok">Yes</h1>
  data數據：
          data:{
              ok:false    // true則是顯示，false是隱藏
      }

　　4.2 v-else

　　v-else指令來表示 v-if 的“else 塊”，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

  標簽元素：
            <h1 v-if="ok">Yes</h1>
            <h1 v-else>No</h1>
  data數據：
          data:{
              ok:false    // true則是顯示，false是隱藏
      }

　　4.3 v-else-if

　　可以出現多個v-else-if語句，但是v-else-if之前必須有一個v-if開頭。后面可以跟着v-else，也可以沒有。

  標簽元素：
            <h1 v-if="num==1">num的值為1</h1>
            <h1 v-else-if="num==2">num的值為2</h1>
          <h1 v-else>num的值是{{num}}</h1>
  data數據：
          data:{
              num:2
      }

　　4.4 v-show

　　用法和v-if大致一樣，區別在於2點：

　　　　1. v-if條件結果為false時，元素根本沒有vue渲染出來，所以標簽是沒有。.v-show條件結果為false，元素還是會被vue渲染出來，是通過了display: none;隱藏起來了；
　　　　2. v-if后面可以根據v-else-if或者v-else，而v-show不能，它只能單獨使用。

　　4.6 綜合示例

　　代碼：

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

<div id="app">
    <!--v-if指令和v-else指令-->
    <span v-if="token==false">
        <a href="">登錄</a> | <a href="">注冊</a>
    </span>
    <span v-else>你好，歡迎回到路飛學城！</span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            token: false,
        }
    })
</script>

<hr>
<!--v-if指令、v-else-if指令 和 v-else指令-->
<div id="app2">
    <span v-if="age<18">猜小了</span>
    <span v-else-if="age>18">猜大了</span>
    <span v-else>猜對了</span>

</div>
<script>
    var vm2 = new Vue({
        el: "#app2",
        data: {
            age: 22,
        }
    })
</script>

<hr>
<!--v-if指令可以嵌套使用-->
<div id="app3">
    <span v-if="week==1">周一
        <span v-if="timer=='上午'">早餐餐單</span>
        <span v-if="timer=='中午'">午餐餐單</span>
        <span v-if="timer=='下午'">晚餐餐單</span>
    </span>
    <span v-if="week==2">周二
        <span v-if="timer=='上午'">早餐餐單</span>
        <span v-if="timer=='中午'">午餐餐單</span>
        <span v-if="timer=='下午'">晚餐餐單</span>
    </span>
    <span v-if="week==3">周三
        <span v-if="timer=='上午'">早餐餐單</span>
        <span v-if="timer=='中午'">午餐餐單</span>
        <span v-if="timer=='下午'">晚餐餐單</span>
    </span>
</div>
<script>
    var vm3 = new Vue({
        el: "#app3",
        data: {
            week: 2,
            timer: "中午"
        }
    })
</script>

<hr>

<div id="app4">
    <!--v-show指令的使用-->
    <span v-show="token==false">
        <a href="">登錄</a> | <a href="">注冊</a>
    </span>
    <span v-show="token==true">你好，歡迎回到路飛學城！</span>
</div>

<script>
    var vm4 = new Vue({
        el: "#app4",
        data: {
            token: false,
        }
    })
</script>


</body>
</html>

　　效果：

　　5. 列表渲染指令

　　在vue中，可以通過v-for指令可以將一組數據渲染到頁面中，數據可以是數組或者對象。

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染指令</title>
    <script src="js/vue.js"></script>
    <style>
        table{
            border-collapse: collapse;
            border: 1px solid red;
            text-align: center;
        }
        table td,th{
            width: 130px;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>圖書列表</h3>
    <table border="1">
        <tr>
            <th>序號(正序)</th>
            <th>序號(倒序)</th>
            <th>ID</th>
            <th>書名</th>
            <th>價格</th>
        </tr>
        <tr v-for="item, key in book_list">
            <td>{{key+1}}</td>
            <td>{{book_list.length-key}}</td>
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            book_list: [
                {"id":11,"title":"西游記","price":79.8},
                {"id":12,"title":"西廂記","price":79.8},
                {"id":18,"title":"東游記","price":89.8},
                {"id":20,"title":"紅樓夢","price":79.5},
                {"id":21,"title":"水滸傳","price":79.5},
                {"id":30,"title":"三國演義","price":79.5},
                {"id":31,"title":"道德經","price":79.5},
                {"id":40,"title":"易經","price":74.5},
                {"id":61,"title":"論語","price":79.5},
            ]
        }
    })
</script>
</body>
</html>

　　效果：

　　練習：

goods:[
    {"name":"python入門","price":150},
    {"name":"python進階","price":100},
    {"name":"python高級","price":75},
    {"name":"python研究","price":60},
    {"name":"python放棄","price":110},
]

# 把上面的數據采用table表格輸出到頁面，價格大於60的數據需要添加背景色橙色[orange]

免責聲明！

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

猜您在找 vue小白快速入門 Vue快速入門 Vue.js 快速入門 vue實現路由跳轉和嵌套（快速入門） Vue快速入門學習筆記(更新ing) vue 快速入門系列 —— Vuex 基礎 Ant Design Vue快速入門補充 vue-element-admin框架快速入門 07Vue.js快速入門-Vue路由詳解 Vue.js前端開發快速入門與專業應用