vue的基本使用

2019年9月16日 126次阅读 来源: 花花呀

基本指令

  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>

《vue的基本使用》

组件

全局组件

一、
<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>
    原文作者：花花呀
    原文地址: https://segmentfault.com/a/1190000019476564
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞