Vue學習筆記（一）

目錄

• Vue（漸進式JavaScript框架）概述
• Vue的數據渲染
• Vue的插值表達式
• Vue的基礎指令
  • v-text
  • v-html
  • v-bind
  • v-for
  • v-model
  • v-on
  • v-if
  • v-show

Vue（漸進式JavaScript框架）概述

Vue是一套用於構建用戶界面的漸進式框架。

Vue的數據渲染

• 第一步：引入Vue文件
  1. CMD進入當前工程的文件夾
  2. npm init -y 生成package.json文件
  3. npm i vue 加載Vue包
  4. 在HTML文件中引用Vue.js

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

• 第二步：創建一個vue實例(對象)，這個實例用來管理html代碼

  var vm = new Vue();
  

• 第三步：對象中的el屬性，用來指定需要管理的范圍，值需要一個標簽的id

  var vm = new Vue({
      el:"#root",
  })
  

• 第四步：對象中的data屬性，用來保存頁面需要用到的數據

  var vm = new Vue({
      el:"#root",
      data:{
          msg:"Hello"
      }
  })
  

• 第五步：將data中的數據綁定到頁面上，在{{}}中寫data的屬性名即可

  <div id="root">
      <p>{{ msg }} vue !!</p>
  </div>
  <!-- 不在vue的管轄范圍內，不會渲染數據 -->
  <p>{{ msg }} vue !!</p>
  

Vue的插值表達式

<!-- 不多bb 是什么玩意自己領會 -->
<div id="app">
    <h1>{{ userName }}</h1>
    <h1>{{ userName + "搬家"}}</h1>
    <h1>{{ age + 1 }}</h1>
    <h1>{{ age > 18 ? "成年" : "未成年" }}</h1>
    <h1>{{ userName.split("").reverse().join("") }}</h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            userName:"xxx",
            age:18,
        }
    })
</script>

Vue的基礎指令

v-text

• v-text的值可以設置表達式，與差值表達式相同
• v-text會替換掉標簽的內容

<div id="app">

    <!-- 這個顯示的是小明 -->
    <h1 v-text="userName"></h1> 

    <!-- 這個顯示的也是小明 -->
    <h1 v-text="userName">~~~~~~~~~~</h1>

    <!-- 使用v-text不會讓瀏覽器渲染標簽 -->
    <div v-text="htmlStr"></div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            userName:"小明"
            htmlStr:"<h2>吵架</h>"
        }
    })
</script>

v-html

• v-html可以在HTML頁面上渲染標簽
• 但是v-html使用不安全，一般很少用

<div id="app">
    <!-- 這里顯示的是h2標簽的 “吵架” -->
   <div v-html="htmlStr"></div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            htmlStr:"<h2>吵架</h>"
        }
    })
</script>

v-bind

• v-bind 可以給標簽動態綁定屬性

    <div id="app">

        <!-- 給img標簽添加src地址 -->
        <img v-bind:src="imgSrc" alt="">
        <!-- 簡寫 -->
        <img :src="imgSrc" alt="">

        <!-- 給a標簽添加href地址 -->
        <a :href="theHref">Vue官網</a>
        <!-- a標簽地址的字符串拼接 -->
        <a :href="'delete.php?id=' + theId">刪除</a>

        <!-- ES6的模板字符串 這樣寫也行 -->
        <a :href="'delete.php?id=${theId}'">刪除</a>

        <!-- {red:flag} red是類名 flag為true時該標簽設置這個類名 -->
        <p :class="{red:flag}">中午吃啥</p>
        <p :class="{red:age == 18}">中午吃啥</p>

    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                imgSrc:"https://cn.vuejs.org/images/logo.png",
                theId:111,
                theHref:"https://cn.vuejs.org/v2/api/#v-text",
                flag:true,
                age:1
            }
        })
    </script>

v-for

• v-for 遍歷數組、json元素用

    <div id="app">
        <ul>
            <!-- item 數組中的每一項 list data中的數組 -->
            <li v-for="item in list" :key="item.id">{{ item.id }}:{{ item.name }}</li>
        </ul>

        <ul>
             <!-- item 數組中的每一項 index數組的下標 -->
            <li v-for="(item,index) in list" :key="index">
                {{ index }} : {{ item.name }}
            </li>
        </ul>

        <ul>    
            <li v-for="value in user" :key="value">
                {{ value }}
            </li>
        </ul>

        <ul>
            <li v-for="(value,key,index) in user">
                {{ key }} : {{ value }} ------- {{ index }}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{              
                list:[
                    {id:1,name:"xxx"},
                    {id:2,name:"zzz"},
                    {id:3,name:"ccc"}
                ],
                user:{name:"vvv",age:20}
            }
        })
    </script>

v-model

• v-model 可實現數據雙向綁定，這個指令只能給input、textarea、select使用

<div id="app">
    <input type="text" v-model="msg" >
    <input type="text" :value="msg" >
    <h1>{{ msg }}</h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"Hello Vue"
        }
    })
</script>

v-on

• v-on 綁定事件

<!-- 點擊事件綁定 -->
<div v-on:click="changeName">點擊改變name</div>
<!-- 這個是簡寫 -->
<button @click="changeName">點擊改變name</button>


<!-- 函數傳參 -->
<button @click="abc('ccc')">傳參</button>

<!-- 獲取時間對象 -->
<button @click="getEvent($event)">獲取事件對象</button>

<!-- 事件修飾符-阻止默認事件 -->
<a href="http://www.baidu.com" @click.prevent="baidu">百度一下</a>

<!-- 按鍵修飾符 -->
<!-- 按回車鍵響應 -->
<input type="text" v-model="name" @keyDown.enter="submit">
<!-- 按65號鍵響應 -->
<input type="text" v-model="name" @keyDown.65="submit">


<!-- methods中的點擊事件中的this 指的是 新建的Vue對象 -->
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"xxxx"
        },
        methods: {
            changeName(){
                console.log(this === vm);
                this.name = "zzz";
            },
            abc(newName) {
                this.name = newName;
            },
            getEvent(e) {
                console.log(e);
            },
            baidu() {
                console.log("百度一下");
            },
            submit() {
                alert("點擊回車");
            }
        },
    })
</script>

v-if

• v-if 根據條件創建標簽

<div id="app">
<!-- 只顯示第一個p標簽 -->
    <p v-if="age >= 18">已成年</p>
    <p v-if="age < 18">未成年</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{              
            age:18,
        }
    })
</script>

v-show

• v-show 標簽全部創建 但是根據條件顯示

<div id="app">
<!-- 標簽都創建，只顯示第一個p標簽，第二個隱藏display -->
    <p v-show="age >= 18">已成年</p>
    <p v-show="age < 18">未成年</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{              
            age:18,
        }
    })
</script>