Vue：基本用法。

Posted 2021-02-10 yuezhen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue：基本用法。相关的知识，希望对你有一定的参考价值。

一、起步

1.下载核心库vue.js

bower info vue #查看版本号
npm init --yes #下载vue.js
cnpm install vue --save

版本 v2.5.17 目前最新版本（）

vue2.0比1.0相比最大的变化就是引入Virtual DOM(虚拟DOM)，页面更新效率高，速度更快

2.hello world（对比 angular）
2.1angular实现

js:
    let app=angular.module("myApp",[])
    app.controller("MyController",["$scope",function($scope){
        $scope.msg=" hello world ";
    }])

html:
    <html ng-app="myApp">
        <div ng-controller="myController>
            {{msg}}
        </div>
    </html>

2.2Vue实现

js:
    new Vue({
        el:"#itany",//指定光联的选择器
        data{//存储数据
            msg:"hello world",
            name:"小零"
        }
    })

html:
    <div id="itany">{{msg}}</div>

    3.安装vue-devtools插件，便于在Chrome中调试vue直接将vue-devtools解压缩，

三、常用指令

     1.什么是指令？
     用来扩展HTML标签的功能
     angular中常用指令：
     ng-model
     ng-repeat
     ng-show/hide
     ng-if

     2.vue中常用的指令
         1、v-model
         双向数据绑定，一帮用于表单元素

        2、v-for （val,key）
        对数组或对象进行循环操作，使用v-for,不是v-repeat
        注：在vue 1.0中提供了隐式变量，如$index.$key
            在vue 2.0中去除了隐式变量，已被废除。

        3、v-on
            用来绑定事件，用法v-on:事件名="函数"

        4、v-show/v-if
        用来显示或隐藏元素，v-show是通过display来实现，v-if是每次删除后重新创建，与angular中的类似

四、练习：用户管理

五、事件
    1、事件

        1.1、事件简写
            v-on:click=""
            简写方式 @click=""

        1.2 事件对象$event（e.target.innerHtml）

        1.3 事件冒泡

            原生的方法：e.stopPropagation()
            vue方法：@click.stop


        1.4 事件默认行为

            阻止事件的默认行为：

            原生的方法：e.preventDefault()
            vue方法：@click.prevent

        1.5 键盘事件

             @keydown @keypress @keyup

             (e.keyCode：按键序号)

        简写：

            回车： @keydown.13 或  @keydown.enter
            上： @keydown.38 或者  @keydown.up

            默认没有 @keydown.a/ @keydown.b

        1.6 事件的修饰符
            .stop - 调用 event.stopPropagation().
            .prevent -调用 event.preventDefault().
            .{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调
            .native - 监听组件根元素的原生事件
            .once - 支触发一次回调事件

    2、属性：

         2.1 属性绑定和属性的简写

             v-bind 用于属性绑定：v-bind:属性名=""

             简写方式：:属性名=""

         2.2class和style属性

            绑定class属性和style属性时比较复杂

            :class （:class={aa:true,cc:flag}）
                aa与cc为样式名，
                true：则运用此样式名的样式，
                flag：变量，为动态设置是否需要此样式名，flag在data中的值为true/false

            :style（）

六、模板

    1、简介
        Vue.js 基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据，
        模板也就是{{}}，用来进行数据绑定，显示在页面中
        也称之为Mustache语法

    2、数据绑定的方式
        a.双向数据绑定
            v-model
        b.单向数据绑定
            方式1：
                使用两大括号{{}}，肯能会出现闪烁的情况

            处理：
                用v-cloak 与css ([v-cloak]:display:none;)并用

            方法2：
                使用v-text/v-html 不会出现闪烁问题

                v-html：可识别字符串中的标签

    3、其他指令

        v-once 只绑定一次
        v-pre 不编译，直接显示原样

七、过滤器

    1、简介

        用来过滤模型数据，在显示之前对数据处理和筛选

        语法：{{data | filter1(参数) | filter2（参数）}}

    2、关于内置过滤器
        vue 1.0 中内置许多过滤器，如：

            currency，uppercase，lowercase、limitBy、orderBy、filterBy

        vue 2.0中已经删除了所有内置过滤器，全部被废除

            如何解决：

                a.使用第三方工具 loadash、date-fns日期格式化、accounting.js货币格式化等
                b.自定义过滤器

    3.自定义全局过滤器

        使用全局方法 Vue.filter