vue的基本使用

0

基本指令

  1. 数据展示

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

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

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

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

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

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

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

图片描述

组件

全局组件

一、
<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>

二、
<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>

二、
<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>

你可能感兴趣的

Shyla · 6月14日

加油ヾ(◍°∇°◍)ノ゙

回复

载入中...