vue的基本使用

2019-06-14 admin

基本指令

  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>
```
  1. 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

    <!-- 阻止单击事件继续传播 -->
    <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

过滤器

<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 '/div> + 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>


![图片描述](https://img.javascriptcn.com/7ec3e8447824aa43c4da22578c06a288 "图片描述")

## 组件

### 全局组件

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67273.html

文章标题:vue的基本使用

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
回到顶部