vue的基本使用

時間  2019-12-04
標籤 vue 基本 使用 简体版
原文   原文鏈接

基本指令

  1. 數據展現css

    <body>
    <div id="app">
        <h1>{{msg}}</h1>
        <p>{{message}}</p>
    </div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello, haha',
            msg: 'hhhhhh'
        }
    });
</script>
</body>

  2. v-modelhtml

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

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: 'hhhhhh'
        }
    });
</script>
</body>
  3. v-once

  4. v-ifvue

    <body>
<div id="app">
    <p v-if="show">出現!</p>
    <p v-if="hide">不出現!</p>
    <p v-if="height > 1.5">你的身高:{{height}}</p>
    <p v-if="0">hhhh</p>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            show: true,
            hide: false,
            height: 1.58
        }
    });
</script>
</body>

  5. v-showweb

    <body>
<div id="app">
    <p v-show="show">出現!</p>
    <p v-show="hide">不出現!</p>
    <p v-show="height > 1.5">小明的身高:{{height}}</p>
    <p v-show="0">hhhh</p>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            show: true,
            hide: false,
            height: 1.58
        }
    });
</script>
</body>

  6. v-else數組

    <body>
<div id="app">
    <div v-if="num > 0.5">
        {{num}},大於0.5
    </div>
    <div v-else>
        {{num}},小於0.5
    </div>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            num: Math.random()
        }
    });
</script>
</body>

  7. v-else-ifapp

    <body>
<div id="app">
    <p>輸入的成績對應的等級:</p>
    <input type="text" v-model="score">
    <div>
        <p v-if="score >= 90">優秀</p>
        <p v-else-if="score >= 80">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
    </div>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            score: 90  //  優秀  良好  及格 不及格
        }
    });
</script>
</body>

  8. v-fordom

    <body>
<div id="app">
    <p v-for="(score, index) in scores">
        索引: {{index }} , 分數: {{score}}
    </p>
    <div v-for="(d, key) in dog">
        {{key + ':' + d}}
    </div>
    <span v-for="count in 100">{{count}}</span>
    <p v-for="(p, index) in phone">
        {{p}}
    </p>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
           scores: [100, 90, 70, 60, 5],
           dog: {name: 'haha', age: 2, width: 1.44, weight: '100斤'},
           phone: '11111111111',
           str: 'ww'
        }
    });
</script>
</body>
    <body>
<div id="app">
    <table>
        <thead>
           <tr>
               <th>姓名</th>
               <th>年齡</th>
               <th>性別</th>
           </tr>
        </thead>
        <tbody>
           <tr v-for="(p, index) in persons">
               <td>{{p.name}}</td>
               <td>{{p.age}}</td>
               <td>{{p.sex}}</td>
           </tr>
        </tbody>
    </table>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
           persons: [
               {name: '張三', age: 18, sex: '男'},
               {name: '李四', age: 28, sex: '女'},
               {name: '張三', age: 18, sex: '男'},
               {name: '王五', age: 38, sex: '女'}
           ]
        }
    });
</script>
</body>

  9. v-text+v-htmlide

    <body>
<div id="app">
     <p>{{msg}}哈哈哈哈</p>
     <p>{{html}}</p>

     <p v-text="msg">呵呵呵呵</p>
     <div v-html="html">
         哈哈哈
         <input type="color">
     </div>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院',
            html: '<input type="date"><input type="color">'
        }
    });
</script>
</body>

  10. v-bind函數

    <body>
<div id="app">
    <img v-bind:src="imgSrc" v-bind:alt="alt">
    <img :src="imgSrc1" :alt="alt">
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
           imgSrc: 'img/img_01.jpg',
           imgSrc1: 'img/img_02.jpg',
           alt: '哈哈哈'
        }
    });
</script>
</body>

  11. v-on工具

    <body>
<div id="app">
    <p>{{msg}}</p>
    <button v-on:click="msg = '哈哈哈哈哈'">改變內容</button>
    <button @click="msg = '啦啦啦啦啦'">改變內容</button>
    <button @click="changeContent()">改變內容</button>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
          msg: '有點累'
        },
        methods: {
            changeContent() {
                this.msg = '感冒真是太難受了';
            }
        }
    });
</script>
</body>

    1. class

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1{
            width: 300px;
            height: 40px;
            border: 1px solid orange;
        }

        .box2{
            font-size: 30px;
        }

        .box3{
            background-color: deepskyblue;
        }
    </style>
</head>
<body>

<!--
class
      1.  直接傳遞一個數組，注意： 這裏的 class 須要使用  v-bind 作數據綁定;
     2.  在數組中使用表達式;
     3.  在數組中使用 對象來代替三元表達式，提升代碼的可讀性;
代碼演示
    -->
    
    <div id="app">
        <p class="box1 box2">衆裏尋他千百度...</p>
        <p :class="['box1', 'box2']">衆裏尋他千百度...</p>
        <p :class="['box1', 'box2', isShow ? 'box3': '']">衆裏尋他千百度...</p>
        <p :class="[{'box1': isShow}]">衆裏尋他千百度...</p>
        <p :class="classObj">衆裏尋他千百度...</p>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        // 1. 建立Vue的實例
        new Vue({
            el: '#app',
            data: {
                isShow: true,
                classObj: {'box1': false, 'box2': false, 'box3': true}
            }
        });
    </script>
    </body>
    </html>
    ```

    

13. style

```html
<body>

<!--
style
    1.  直接在元素上經過 `:style` 的形式，書寫樣式對象
    2.  將樣式對象，定義到 `data` 中，並直接引用到 `:style` 中
    3.  在 `:style` 中經過數組，引用多個 `data` 上的樣式對象
-->

<div id="app">
    <p style="font-size: 18px; background-color: red;">衆裏尋他千百度...</p>
    <p :style="style1">衆裏尋他千百度...</p>
    <p :style="[style1, style2]">衆裏尋他千百度...</p>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
           style1: {color: 'green', fontSize: '40px'},
           style2: {fontStyle: 'italic'}
        }
    });
</script>
</body>
```

## 修飾符

1. v-model

   (1) 、.lazy

   ​    在默認狀況下，`v-model` 在每次 `input` 事件觸發後將輸入框的值與數據進行同步。使用`lazy` 修飾符，轉變爲使用 `change`事件進行同步。

   ​    <!-- 在「change」時而非「input」時更新 -->
   ​    <input v-model.lazy="msg" >

   (2)、.number

   ​    該修飾符用來將輸入內容自動轉換成數值。

   <input v-model.number="age" type="number">

   (3)、.trim

   ​    過濾用戶輸入的首尾空白字符。

   ​    <input v-model.trim="msg">

2. v-on

   - `.stop`

   - `.prevent`

   - `.capture`

   - `.self`

   - `.once`

   - `.passive`

     ```html
     <!-- 阻止單擊事件繼續傳播 -->
     <a v-on:click.stop="doThis"></a>
     
     <!-- 提交事件再也不重載頁面 -->
     <form v-on:submit.prevent="onSubmit"></form>
     
     <!-- 修飾符能夠串聯 -->
     <a v-on:click.stop.prevent="doThat"></a>
     
     <!-- 只有修飾符 -->
     <form v-on:submit.prevent></form>
     
     <!-- 添加事件監聽器時使用事件捕獲模式 -->
     <!-- 即元素自身觸發的事件先在此處理，而後才交由內部元素進行處理 -->
     <div v-on:click.capture="doThis">...</div>
     
     <!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
     <!-- 即事件不是從內部元素觸發的 -->
     <div v-on:click.self="doThat">...</div>
     ```

3. 鍵值修飾符

   - `.enter`
   - `.tab`
   - `.delete` (捕獲「刪除」和「退格」鍵)
   - `.esc`
   - `.space`
   - `.up`
   - `.down`
   - `.left`
   - `.right`

## 過濾器

```html
<body>

<div id="app">
    <p>{{money}}</p>
    <p>{{money | moneyFormat(money)}}</p>
</div>

<div id="app1">
    <p>{{money}}</p>
    <p>{{money | moneyFormat(money)}}</p>
</div>

<script src="js/vue.js"></script>
<script>
    // 0. 定義全局過濾器
    Vue.filter('moneyFormat', (money)=>{
        return '¥' + money.toFixed(2) ;
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            money: 189323323222.9892
        },
        filters: {
            //  局部過濾器
            moneyFormat(money){
                return '$' + money.toFixed(2) ;
            }
        }
    });

    new Vue({
        el: '#app1',
        data: {
            money: 4567821.9892
        }
    });
</script>
</body>
```

計算屬性

<body>

<div id="app">
    <p>初始值: {{name}}</p>
    <p>翻轉: {{name.split('').reverse().join('')}}</p>
    <p>方法: {{reverseStr()}}</p>
    <p>計算屬性: {{reverse}}</p>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
           name: 'Rose Jack'
        },
        methods:{
            reverseStr(){
                return this.name.split('').reverse().join('')
            }
        },
        computed: {  // 計算選項
            reverse: {
                get() {
                    return this.name.split('').reverse().join('');
                }
            }
        }
    });
</script>
</body>

setter

<body>

<div id="app">
    <p>{{fullName}}</p>
    <button @click="deal()">調用計算屬性中的setter方法</button>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            firstName: 'zhang',
            lastName: 'xing'
        },
        methods:{
          deal(){
              this.fullName = 'wang cai';
          }
        },
        computed: {  // 計算選項
           fullName: {
               get(){
                   return this.firstName + ' ' + this.lastName;
               },

               set(str){
                   let nameArr = str.split(' ');
                   this.firstName = nameArr[0];
                   this.lastName = nameArr[1];
               }
           }
        }
    });
</script>
</body>

生命週期

<body>

<div id="app"></div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        beforeCreate(){
            console.log('beforeCreate()');
        },
        data: {

        },
        methods: {

        },
        created(){
            console.log('created()');
        },
        beforeMount(){
            console.log('beforeMount()');
        },
        mounted(){
            // 結束建立期間的生命週期函數
            console.log('mounted()');
        },

        beforeUpdate(){
            console.log(beforeUpdate());
        },

        updated(){
            console.log(updated());
        },

        beforeDestroy(){
            console.log(beforeDestroy());
        },

        destroyed(){
            console.log(destroyed());
        }

    });
</script>
</body>

圖片描述

組件

全局組件

1、
<body>
<div id="app">
    <my-date></my-date>
    <my-date></my-date>
</div>

<div id="app1">
    <my-date></my-date>
    <my-date></my-date>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 組件構造器
    let Profile = Vue.extend({
        // 模板選項
        template: `
          <div>
              <input type="date">
              <p>今天下雪了!</p>
          </div>
          `
    });

    // 2. 註冊全局組件
    Vue.component('my-date', Profile);
    
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        }
    });

    new Vue({
        el: '#app1'
    })
</script>
</body>

2、
<body>

<div id="app">
    <my-date></my-date>
    <my-date></my-date>
</div>

<div id="app1">
    <my-date></my-date>
</div>

<script src="js/vue.js"></script>
<script>
    // 0. 註冊全局組件
    Vue.component('my-date', {
        template: `
          <div>
              <input type="date">
              <p>今天下雪了!</p>
          </div>
          `
    });


    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        }
    });

    new Vue({
        el: '#app1',
    });
</script>
</body>

局部組件

<body>
<div id="app">
    <my-date></my-date>
</div>

<div id="app1">
    <my-color></my-color>
    <my-color></my-color>
</div>
<script src="js/vue.js"></script>
<script>
    // 1. 組件構造器
    let Profile = Vue.extend({
        // 模板選項
        template: `
          <div>
              <input type="date">
              <p>今天下雪了!</p>
          </div>
          `
    });

    let Profile1 = Vue.extend({
        // 模板選項
        template: `
          <div>
              <input type="color">
              <p>我是色板!</p>
          </div>
          `
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        },
        components: {
            'my-date': Profile
        }
    });

    new Vue({
        el: '#app1',
        components: {
            'my-color': Profile1
        }
    })
</script>
</body>

2、
<body>
<div id="app">
    <my-date></my-date>
    <my-color></my-color>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        },
        components: {
            'my-date': {
                template: `
          <div>
              <input type="date">
              <p>今天下雪了!</p>
          </div>
          `
            },
            'my-color': {
                template: `
          <div>
              <input type="color">
              <p>我是色板!</p>
          </div>
          `
            },
        }
    });
</script>
</body>

父子組件

<body>
<div id="app">
    <parent></parent>

    <child></child>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 子組件構造器
    let Child1 = Vue.extend({
        template: `<img src="img/img_01.jpg" width="200">`
    });

    Vue.component('child', Child1);

    let Child2 = Vue.extend({
        template: `<h4>我認爲本身很美!</h4>`
    });

    // 2. 父組件構造器
    Vue.component('parent', {
        components: {
            'my-child1': Child1,
            'my-child2': Child2,
        },
        template:
            `
            <div>
                <h1>這是高手!</h1>
                <my-child1></my-child1>
                <my-child2></my-child2>
            </div>
          `
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        }
    });
</script>
</body>

template

<body>
<div id="app">
   <lk_div></lk_div>
</div>

<template id="lk_div">
    <div>
        <h1>哈哈哈哈</h1>
        <input type="date">
        <img src="img/img_02.jpg" alt="" width="200">
    </div>
</template>
<script src="js/vue.js"></script>
<script>

    Vue.component('lk_div', {
        template: '#lk_div'
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        }
    });
</script>
</body>

數據傳遞 data

<body>
<div id="app">
     <lk-div></lk-div>
</div>

<template id="lk_div">
    <div>
        <h1>{{msg}}</h1>
        <input type="date">
        <img src="img/img_02.jpg" alt="" width="200">
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    Vue.component('lk-div', {
        template: '#lk_div',
       /* data:{
            msg: '我是MT'
        }*/
       data(){
           return {
               msg: '我是MT'
           }
       }
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {

        }
    });
</script>
</body>

data屬性爲何是函數的形式？

這樣每個實例的data屬性都是獨立的，不會相互影響了。

<body>
<div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
</div>
<template id="my_btn">
    <button @click="counter += 1">點擊的次數: {{counter}}</button>
</template>

<script src="js/vue.js"></script>
<script>
    let data = {
      counter: 0
    };

    Vue.component('my-btn', {
        template: '#my_btn',
        data(){
            return {
                counter: 0
            }
        }

    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app'
    });
</script>
</body>

組件通訊

<body>

<div id="app">
    <my-div msg="今天下雪了" imgsrc="img/img_02.jpg"></my-div>
</div>

<template id="my_div">
    <div>
        <h1>{{msg}}</h1>
        <img :src="imgsrc" alt="" width="200">
    </div>
</template>

<script src="js/vue.js"></script>
<script>
    // 0. 建立組件
    Vue.component('my-div', {
        template: '#my_div',
        props: ['msg', 'imgsrc']
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            msg: '撩課學院'
        }
    });
</script>
</body>

// 多層通訊
<body>

<div id="app">
   <my-parent :imgtitle="title" :imgsrc="img"></my-parent>
</div>

<template id="my_img">
    <img :src="imgsrc" width="200">
</template>

<template id="my_title">
    <h2>{{title}}</h2>
</template>

<template id="my_parent">
    <div>
        <child1 :imgsrc="imgsrc"></child1>
        <child2 :title="imgtitle"></child2>
    </div>
</template>

<script src="js/vue.js"></script>
<script>
    // 0. 子組件的實例
    let Child1 = Vue.extend({
        template: '#my_img',
        props: ['imgsrc']
    });

    let Child2 = Vue.extend({
        template: '#my_title',
        props: ['title']
    });

    // 父組件
    Vue.component('my-parent', {
        props: ['imgtitle', 'imgsrc'],
        components: {
            'child1': Child1,
            'child2': Child2
        },
        template: '#my_parent'
    });

    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            title: '我是否是很漂亮',
            img: 'img/img_01.jpg'
        }
    });
</script>
</body>

動畫

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果。
包括如下工具：

  • 在 CSS 過渡和動畫中自動應用 class
  • 能夠配合使用第三方 CSS 動畫庫，如 Animate.css
  • 在過渡鉤子函數中使用 JavaScript 直接操做 DOM
  • 能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.js

transition：

v-enter 【這是一個時間點】 是進入以前，元素的起始狀態，此時尚未開始進入;
v-leave-to 【這是一個時間點】 是動畫離開以後，離開的終止狀態，此時，元素 動畫已經結束了

v-enter-active 【入場動畫的時間段】
v-leave-active 【離場動畫的時間段】

簡單示例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .fade-enter, .fade-leave-to{
            opacity: 0;
            transform: translateX(200px);
        }

        .fade-enter-active, .fade-leave-active{
            transition: all 1s ease-in-out;
        }
    </style>
</head>
<body>

<div id="app">
    <button @click="show = !show">切換</button>
    <transition name="fade">
        <div class="box" v-if="show">撩課學院</div>
    </transition>
</div>

<script src="js/vue.js"></script>
<script>
    // 1. 建立Vue的實例
    new Vue({
        el: '#app',
        data: {
            show: false
        }
    });
</script>
<script>
    // Provides transition support for a single element/component
    import Transition from "../../../Day1/資料/vue-dev/vue-dev/src/platforms/web/runtime/components/transition";
    export default {
        components: {Transition}
    }
</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程