vue.js基础01--基础用法及内部指令

一、vue的概述及vue的入门小实例vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作D...v

muzidigbig

4523人浏览 · 2018-07-25 14:32:56

muzidigbig · 2018-07-25 14:32:56 发布

一、vue的概述及vue的入门小实例

vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

特性：

1.Vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。

2.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

3.前端组件化：一个组件相当于一个小的区域/模块（或者简单的理解成是一个w3c未提供给我们的标签）

4.Vue.js的核心是一个响应的数据绑定系统它让数据与DOM保持同步非常简单。

补充知识：

最常见的客户端架构有三种：

MVC: Model-View-Controller
MVP: Model-View-Presenter
MVVM: Model-View-ViewModel（面向数据M层）

MVVM：

Vue是一个MVVM框架 Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。M是model V是view 对应的是视图层,VM是把M层和V层关联起来的一个中间层，VM能够实现数据的双向绑定。

兼容性：
兼容性：Vue不支持IE8及以下的版本，因为Vue使用了IE8无法模拟的ECMAScript5的特性，但它支持所有兼容ECMAScript5的浏览器。

MVC：

在 MVC 里面，Model 是数据模型；View 是视图或者说就是我们的软件界面需要去展示的东西；Controller 是用来控制Model的读取、存储，以及如何在 View上展示数据，更新数据的逻辑控制器。vm=C=P

vue开发工具：

开发者工具：在使用Vue时，推荐在你的的浏览器上安装vue-devtools。vue-devtools是基于chrome的一款浏览器插件，是开发过程中必不可少的，其高效、简洁、方便的特点深受vue开发者的喜爱。它允许你在一个更好的界面中审查和调式Vue应用。

vue-devtools的插件安装：

下载链接：Vue Devtools_6.4.5_chrome扩展插件最新版下载_极简插件

打开浏览器扩展安装页面

点击浏览器右上角⋮>更多工具> 点击扩展程序

在扩展中心打开右上角的【开发者模式】按钮，然后【刷新】页面，把下载好的 .crx 文件拖入扩展中心

vue-devtools如何使用：

当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。

vue-devtools使用起来还是比较简单的，上手非常的容易，这里就细讲其使用说明了。

二、vue 引入

下面我们用vue的独立版本/将vue.js下载到本地在引入到项目中：

vue.js官网：介绍 — Vue.js

<!-- 开发环境版本，包含了用帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.vue简单入门实例：

每一个vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例：

一个Vue实例其实就是一个MVVM模式中所描述的ViewModel，因此在文档中经常会使用app这个变量名。

//vue根实例
var app = new Vue({

    //选项
})

下面用一个简单的实例来体验vue的特性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--这是我们的View-->
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
</body>
//引入我们本地的vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    // 这是我们的Model
    var exampleData = {
        site: "菜鸟教程",
        url: "www.runoob.com",
        alexa: "10000"
    }

    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    var vm = new Vue({
        el: '#vue_det',//挂载到html标签上的dom上还可以用类的形式绑定……
        data: exampleData,//将我们上面的对象赋值给vue实例中的data
        methods: {
            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
    // 打印出vue的实例
    console.log(vm);
</script>

</html>

vue的实例打印，凡是以$开头的就是vue实例的属性/方法

详解：

el:挂载到dom元素上

data: 用于定义数据/属性，实例中有三个属性分别为：site、url、alexa。

methods: 用于定义函数，可以通过 return 来返回函数值。

{{ }}: 用于输出对象属性和函数返回值，可以进行一些简单的js操作。

使用Vue的过程就是定义MVVM各个组件组成部分的过程。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

定义View
定义Model
创建一个Vue实例或"ViewModel"，它是连接View和Model的桥梁内部已经封装好不需要过多的理解

2.构建vue热处理的项目

live-server使用（独立版本在浏览器中热运行html项目）

用npm进行全局安装

npm install live-server -g

cd xxx进入项目中在项目目录中打开（获取浏览器本机访问网址）

live-server

二、vue的内部指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

1.输出指令 v-text & v-html & {{}}&v-cloak

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码：

<span>{{ message }}</span>=<span v-text="message"></span>

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。

<span v-html="msgHtml + 'mmm'"></span>

双大括号会将数据解释为纯文本/函数返回值，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。

v-text{{}}都是向页面中输出纯文本(不仅可以写变量，还可以写js)

v-html可以解析html标签及标签中的样式(不仅可以写变量，还可以写js)

v-html 原理： v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值

{{getSum()}} 需要保证函数有返回值，最终显示函数最后返回的结果

需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

v-cloak不需要表达式，它会在vue实例结束编译时从绑定的html元素上移除，经常和display:none; 。(当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。)

v-cloak:解决vue标签渲染闪烁问题 vue v-cloak 解决页面加载时闪烁出现vue标签或者指令的问题

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 使用v-cloak能够解决  插值表达式{{}}的闪烁问题 -->
        <p v-cloak>{{msg1}}</p>
        <!-- 默认v-text没有闪烁问
            v-text会覆盖元素中原本的内容；但 插值表达式 只会替换自己的这个    占位符，不会把整个元素的内容清空
            v-html会覆盖元素中原本的内容,同时它还可以解析html标签及样式
         -->
        <h2 v-text='msg1'>fffff</h2>
        <div v-html='msg2'></div>
    </div>
    
</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'.box',
        data:{
            msg1:'muzi',
            msg2:'<h1 style="color: pink;">muzidigbig</h1>'
        }
    })
</script>
</html>

2.属性指令，动态地绑定一个或多个 attribute，或一个组件 prop 到表达式 v-bind:attribute="data中的属性名"

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class="";简写 :class="";v-bind指令会将后面的值解析为js代码来运行

a.v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<a>也是一个标签，我们绑定<a>上的href进行动态赋值。

<body>
    <div class="box">
        <input type="button" value="按钮" v-bind:title="msg3">
        <!-- 由于v-bind会把后面的解析为js，另一种写法如下 -->
        <input type="button" value="按钮" v-bind:title="msg3+'我是后来有添加的'">
    </div>
    
</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'.box',
        data:{
            msg3:'我是一个按钮'
        }
    })
</script>

b.v-bind处理css样式（默认的class不会被覆盖，回被结合到一起）

第一种，直接绑定css样式

<p v-bind:class="vp1">点击下面链接查看更多学习资料</p>

第二种，数组绑定

<p v-bind:class="[vp1,vp2,……]">点击下面链接查看更多学习资料</p>

第三种，绑定对象（在实例中的data样式是一个对象的形式）

<p v-bind:class="vObj">obj点击下面链接查看更多学习资料</p>

绑定p2 class并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

<p v-bind:class="{p2:isOk}">objIf点击下面链接查看更多学习资料</p>

第四种，绑定数组中包含对象[样式,样式对象,……]

<p v-bind:class="[vp1,vObj]">obj点击下面链接查看更多学习资料</p>

第五种，绑定class，根据条件切换列表中的class使用三元表达式判断

<p v-bind:class="isOk?vp2:vp1">绑定class中的三元表达式判断</p>

第六种，绑定class根据函数来判断是否加载active

<p v-bind:class="{className:boolean}">绑定class中的三元表达式判断</p>

   <ul class="chooser-list">
      <li
        v-for="(item, index) in selections"
        :key="index"
        :class="{active:checkActive(index)}"
      >{{ item.label }}</li>
    </ul>


 data() {
    return {
      nowIndexes: [0]
    };
 },
 methods: {
    checkActive(index) {
      return this.nowIndexes.indexOf(index) !== -1;
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .p1{
            color: #5c4033;
            font-size: 30px;
            text-indent: 2em;
        }
        .p2{
            text-shadow: 5px 5px 2px #000;
        }
        .p3{
            transform: rotate(45deg);
            color: pink;
        }
    </style>
</head>
<body>
    <p>muzidigbig</p>

    <div id="box" >
        <!--直接绑定css样式-->
        <p v-bind:class="vp1">点击下面链接查看更多学习资料</p>
        <!--数组绑定css样式-->
        <p v-bind:class="[vp1,vp2]">点击下面链接查看更多学习资料</p>
        <!--对象绑定css样式-->
        <p v-bind:class="vObj">obj点击下面链接查看更多学习资料</p>
        <!--对象绑定css样式的另一种形式(对样式进行判断)-->
        <p v-bind:class="{p2:isOk}">objIf点击下面链接查看更多学习资料</p>
        <!--数组中包含对象绑定css样式-->
        <p v-bind:class="[vp1,vObj]">数组中包含对象绑定css样式</p>
        <!--绑定class中的三元表达式判断-->
        <p v-bind:class="isOk?vp2:vp1">绑定class中的三元表达式判断</p>

        <a v-bind:href="attrA">muzidigbig的博客</a>
    </div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        attrA:'https://blog.csdn.net/muzidigbig',
        vp1:'p1',
        vp2:'p2',
        isOk:true,
        vObj:{
            'p2':true,
            'p3':true
        }
    };
    var app = new Vue({
        el:'#box',
        data:dataObj
    })
</script>
</html>

c.v-bind处理行内样式style

需要注意的是添加style样式遵循驼峰命名

第一种，添加对象

<p v-bind:style="styleObj">muzidigbig</p>

var dataObj = {
    styleObj:{
        background:'pink',
        fontSize:'20px'
    }
};
var app = new Vue({
    el:'#box',
    data:dataObj
})

第二种，添加数组对象

<p v-bind:style="[styleObj,styleObj1]">muzidigbig</p>

var dataObj = {
   
    styleObj:{
        background:'pink',
        fontSize:'20px'
    },
    styleObj1:{
        transform:'translateX(20px) skew(20deg)'
    }
};
var app = new Vue({
    el:'#box',
    data:dataObj
})

第三种，添加行内样式

<p v-bind:style="{background:`url(${imageBg})`}">muzidigbig</p>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   
    </style>
</head>
<body>
    <p>muzidigbig</p>

    <div id="box" >

        <!--对象添加style样式-->
        <p v-bind:style="styleObj">muzidigbig</p>
        <!--数组对象添加style样式-->
        <p v-bind:style="[styleObj,styleObj1]">muzidigbig</p>

        <a v-bind:href="attrA">muzidigbig的博客</a>
    </div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        attrA:'https://blog.csdn.net/muzidigbig',
     
        styleObj:{
            background:'pink',
            fontSize:'20px'
        },
        styleObj1:{
            transform:'translateX(20px) skew(20deg)'
        }
    };
    var app = new Vue({
        el:'#box',
        data:dataObj
    })
</script>
</html>

3.判断指令 v-if v-else v-show

v-if:

v-if:是vue 的一个内部指令，指令用在html标签中。

v-if用来判断是否加载html的DOM（每次都要判断）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
<p>muzidigbig</p>
<div class="box" >
    <p>{{meg}}</p>
    <p v-if="isOk">{{text}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        meg:'是否加载下面的p中的dom',
        text:'我3秒中后消失',
        isOk:true
    };

    var app = new Vue({
        el:'.box',
        data:dataObj
    });
    setTimeout(function () {
        dataObj.isOk = false
    },3000)
</script>
</html>

这里我们在vue的data里定义了isOk的值，当它为true时，网页就会显示：我3秒钟后消失，3秒钟后isOk为false时，就会消失。

条件渲染（v-if与<template>标签的配合使用）
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素，但是查看后台dom结构存在template标签。

v-show （显示/隐藏）：

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div v-show="isLogin">你好：JSPang</div>

isLogin:true/false

注意：v-show 不支持 <template> 元素，也不支持 v-else；v-if、v-else-if与v-else之间不能让其他元素隔开，必须是紧临的。

v-if 和v-show的区别：

v-if：判断是否加载元素，可以减轻服务器的压力，在需要时加载。(元素频繁的切换不推荐使用)
v-show：已经加载元素是否显示，可以使客户端操作更加流畅。 display:none
v-if显示隐藏时把DOM元素整个添加和删除；v-show时控制元素的display值来让元素显示和隐藏；
v-if才是真正的条件渲染；v-show从false编程true的时候不会触发组件的生命周期，v-if会触发生命周期
v-if有一个局部编译/卸载的过程，切换这个过程会调用销毁和重建内部的事件监听和子组件；v-show只是简单的css切换
v-if的切换效率比较低 v-show的效率比较高

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

案例：

<body>
<p>muzidigbig</p>
<div class="box" >
    <p>{{meg}}</p>
    <p v-if="isOk">{{text}}</p>
    <p v-else>{{text}}</p>
    <p v-show="isOk">{{text}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        meg:'是否加载下面的p中的dom',
        text:'我3秒中后消失',
        isOk:true
    };

    var app = new Vue({
        el:'.box',
        data:dataObj
    });
    setTimeout(function () {
        dataObj.isOk = false
    },3000)
</script>

4.v-on:事件='函数' 绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。两中事件监听器（无参，有参）；事件的行内调用

事件绑定-参数传递
1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2.如果绑定事件函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
<p>muzidigbig</p>
<div class="box" >
    <button type="button" @click="init(10,$event)">初始值</button>
    <button v-on:click="add()">+1</button>
    <button v-on:click="substrack()">-1</button>
    <p>{{count}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        count:5
    };
    var app = new Vue({
        el:'.box',
        data:dataObj,
        methods:{
            init(num,event) {
                this.count= num;
                console.log(event)
            },
            add:function () {
                return this.count++;
            },
            substrack:function () {
                return this.count--;
            }
        }
    });
</script>
</html>

我们的v-on 还有一种简单的写法，就是用@代替。

<button @click="substrack">减分</button>

    .stop - 调用 event.stopPropagation()。冒泡
    .prevent - 调用 event.preventDefault()。默认
    .capture - 添加事件侦听器时使用 capture 模式。捕获
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。e.target == e.currentTarget
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    .native - 监听组件根元素的原生事件。(可以调用子组件的事件)
    .once - 只触发一次回调。
    .left - (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

在子组件上绑定事件，需要添加.native修饰符:

//.native - 监听组件根元素的原生事件。
<child @click.native="handleClick($event)"></child>

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。

绑定事件写法：

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript代码：

onEnter:function(){
    this.count=this.count+parseInt(this.secondCount);
}

因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。

自定义按键修饰符：

// 规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

Vue.config.keyCodes.f1 = 112; 使用<input type="text" v-on:keyup.f1="onEnter" >

或者

<input type="text" v-on:keyup.112="onEnter" v-model="secondCount">

methods事件为什么不能使用箭头函数？

箭头函数没有this，this其实是外部的this，即箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。所以箭头函数的this是固定的，不能改变或者重新绑定。

代码运行后会把methods上的方法都挂载到vue实例上，即this指向vue实例对象，而前面说过，箭头函数是没有this的，并且是无法改变或重新绑定的，又因为methods是一个对象，而对象不构成单独的作用域，导致箭头函数定义时的作用域是全局作用域，也就是window对象，所以vue的methods中不可以使用this。

那么问题来了，按这么说，那this应该是window对象，那为什么打印出来的是undefined呢？

原因是vue中使用的是严格模式use strict，所以this是undefined。
this

v-on如何绑定多个事件

// v-on绑定多个方法（采用的是对象形式）
<button v-on="{click: clickMethods, mousemove: mouseMethods}">按钮<button> 2.v-on
//一个事件绑定多个方法 （语法糖 @）
<button @click="click1;click2">按钮</button>

5.双向绑定指令v-model="数据"

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定，但有一个前提是需要借助Vue实例来管理

v-model仅限以下三种标签使用： <input> <select> <textarea>

这里运用到的原理是：获取同一个数据源，进行双向绑定获取

v-model原理：

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

也就是说下面的代码：等同于下面的代码：

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
<p>muzidigbig</p>
<div class="box">
    <input type="text" v-bind:placeholder="meg" v-model="meg">
    <p>{{meg}}</p>
    <!-- v-model的原理 
      v-model其实是一个语法糖，它的背后本质上是包含两个操作：
        1.v-bind绑定一个value属性
        2.v-on指令给当前元素绑定input事件
      
      <input type="text" v-model="message">
      等同于
      <input type="text" :value="message" @input="message = $event.target.value">
    -->
    <input type="text" v-model="message" placeholder="v-model原理">
    <p>{{message}}</p>
    <input type="text" :value="message" @input="message = $event.target.value" placeholder="v-model原理">
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        meg:'初始数据',
        message: ""
    };
    var app = new Vue({
        el:'.box',
        data:dataObj
    });
</script>
</html>

指令修饰符

.lazy：取代 input 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

多选按钮绑定一个值

<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

多选绑定一个数组

       <h3>多选绑定一个数组</h3>
       <p>
            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
            <label for="JSPang">JSPang</label><br/>
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="JSPang">Panda</label><br/>
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="JSPang">PanPan</label>
            <p>{{web_Names}}</p>
       </p>

select中多选需要添加multiple属性

6.v-for指令：解决模板循环问题

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名（即数组中每项的别名）。

这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是：你需要给哪个html标签循环，v-for就写在那个标签上边。

其中我们也可以把in换成of作为分隔符，因为它是最接近JavaScript迭代器的语法。

of 只会循环数组内容。in 会循环数组对象中的数组内容，和对象内容

<body>
<p>muzidigbig</p>
<div class="box">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
         <hr>
        <!-- 循环对象 
            v-for="(value, key, index) in data2"   
            value:值;
            key:键;
            index:索引
         -->
         <ul>
             <li v-for="(value, key, index) in data2" :key="index">
                 {{value}}
             </li>
         </ul>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        items:['木','子','大','大'],
        data2:{
             name:"muzidigbig",
             age:22,
             hight:172
        }
    };
    var app = new Vue({
        el:'.box',
        data:dataObj
    });
</script>

在自定义组件里，也可以像任何普通元素一样用v-for。

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用子组件中使用 props：

<my-component
    v-for="(item, index) in items"
    v-bind:item="item"
    v-bind:index="index"
    v-bind:key="item.id"
></my-component>

注意：v-for时为什么一定推荐绑定key值，且key值不推荐绑定index,推荐绑定item.id?

答：因为当数组插入一个新值时需要进行数组更新，需要与旧数组进行对比更新提升更新效率，拥有key值可以根据key值进行对比更新，如果key值是index,则丧失了根据key值对比更新的初衷，因为默认就是根据index默认排序进行对比的，key值必须是唯一且不变的值，一般数据中id值是数据的相当于识别码，是唯一且不变的，最符合key值的要求。

key作用:

1.跟踪每个节点的元素，方便重用或重新排序当前元素。

2.要求：元素必须有的且唯一不变。

详情

排序

我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。

computed:{
//计算完属性后返回的新数据属性sortItems
    sortItems:function(){
          return this.items.sort();
    }
}

我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。

注意：computed中操作data里面的数据源不能起同样的名称要定义不同的名称区别开来

如果不重新声明报错：

<body>
<p>muzidigbig</p>
<div class="box">
    <!--计算完属性后的值为-->
    <p>{{sortItems}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        items:[19,67,3,5,6,745]
    };
    var app = new Vue({
        el:'.box',
        data:dataObj,
        computed:{
            sortItems:function(){
                return this.items.sort();
            }
        }
    });
</script>

如果一切顺利的话，你已经看到了结果，但是这个小程序还是有个小Bug的，现在我把数组修改成这样:

我们可以自己编写一个方法sortNumber，然后传给我们的sort函数解决这个Bug。

  function sortNumber(a,b){
            return a-b
  }

用法

computed:{
    sortItems:function(){
        return this.items.sort(this.sortNumber);
    }
}

<script>
    var dataObj = {
        items:[19,67,3,5,6,745]
    };
    var app = new Vue({
        el:'.box',
        data:dataObj,
        computed:{
            sortItems:function(){
                return this.items.sort(this.sortNumber);
            }
        },
        methods: { // 这个是定义方法的属性
            sortNumber(a, b) {
                return a - b;
            }
      }
    });
    
</script>

对象循环输出

我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。

我们先定义个数组，数组里边是对象数据

students:[
  {name:'pang',age:32},
  {name:'Panda',age:30},
  {name:'PanPaN',age:21},
  {name:'King',age:45}
]

<body>
<p>muzidigbig</p>
<div class="box">
    <ul>
        <li v-for="student in students" :key="student.id">
            {{student.name}}----{{student.age}}
        </li>
    </ul>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        students:[
            {name:'pang',age:32},
            {name:'Panda',age:30},
            {name:'PanPaN',age:21},
            {name:'King',age:45}
        ]
    };
    var app = new Vue({
        el:'.box',
        data:dataObj,
        computed:{
            sortItems:function(){
                return this.items.sort(sortNumber);
            }
        }
    });
</script>

加入索引序号：

<ul>
  <li v-for="(student,index) in students">
    {{index}}：{{student.name}} - {{student.age}}
  </li>
</ul>

排序，我们先加一个原生的对象形式的数组排序方法：

//数组对象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}

有了数组的排序方法，在computed中进行调用排序

sortStudent:function(){
     return sortByKey(this.students,'age');
}

注意：vue低版本中 data里面的items和computed里面可以一样，但是高版本，是不允许相同名称。有很多小伙伴踩到了这个坑，这里提醒学习的小伙伴，根据自己版本的不同，请修改代码。

7.永远不要把 `v-if` 和 `v-for` 同时用在同一个元素上。当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级

7.1为什么不建议同时使用这两个指令呢？原因如下：

渲染顺序问题：v-if 和 v-for 在渲染顺序上存在冲突。Vue.js 的渲染顺序规定，v-for 的优先级高于 v-if。也就是说，在每次循环迭代时，v-if 的条件判断都会执行一次。这可能会导致一些意外的结果，特别是在有大量数据和复杂条件逻辑的情况下。
可读性和维护性：同时使用 v-if 和 v-for 可能会增加代码的复杂性，降低代码的可读性和维护性。两个指令的同时使用可能导致逻辑难以理解和排查错误，特别是在较大的代码库中。

7.2那么，如何解决这个问题呢？以下是几种可行的解决方案：

使用计算属性：将需要根据条件进行过滤的数据处理逻辑放到计算属性中，并在模板中使用该计算属性进行循环渲染。这样可以避免在模板中使用 v-if 和 v-for 同时存在的问题。
数据预处理：在数据传递给模板之前，先对数据进行处理，根据条件将需要渲染的数据进行筛选或过滤，然后再进行循环渲染。
使用 <template> 元素：如果你确实需要在同一个元素上同时使用 v-if 和 v-for，可以使用 <template> 元素来包裹它们。<template> 元素在渲染时不会被保留，可以作为一个容器来使用这两个指令，避免同时使用 v-if 和 v-for 时可能导致的问题。

下面是使用 <template> 元素包裹 v-if 和 v-for 的示例代码：

<template v-for="item in items">
  <div v-if="item.condition">
    <!-- 根据条件渲染的内容 -->
  </div>
</template>

通过使用 <template> 元素，可以解决 v-if 和 v-for 同时使用时的渲染顺序问题。v-for 在 <template> 元素上进行迭代，而每次迭代时<div>元素根据条件进行渲染。

这种方式能够保持代码的可读性和维护性，并且不会引起意外的结果。同时，还可以利用 <template> 元素的特性，避免不必要的 DOM 元素渲染，提升性能。

8.其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了，直接将他译为文本。动态的样式也不会被编译。

<div v-pre>{{message}}</div>

这时并不会输出我们的message值，而是直接在网页中显示{{message}}

v-cloak指令

在vue渲染完页面后指定的整个DOM后才进行显示保持在元素上直到关联实例结束编译并隐藏未编译的。它必须和CSS样式一起使用，

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程（不显示修改的）。

<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<p>muzidigbig</p>
<div class="box">
    <!--不进行数据驱动-->
    <p v-pre>{{meg}}</p>
    <!--在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程（不显示修改的）-->
    <p v-once>{{meg}}</p>
    <p v-cloak>{{meg}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var dataObj = {
        meg:'初始数据'
    };
    var app = new Vue({
        el:'.box',
        data:dataObj
    });
</script>
</html>

9.自定义指令

注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

下面这个例子将聚焦一个 input 元素，像这样：

当页面加载时，元素将获得焦点。事实上，你访问后还没点击任何内容，input 就获得了焦点。现在让我们完善这个指令：

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // el表示指令所绑定的元素(dom)
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

使用：

<input type="text" v-focus>

带参数的自定义指令（改变元素背景色）实参是在data中取得:

Vue.directive('color', {
    inserted: function(el, binding) {
        el.style.backgroundColor = binding.value.color;
    }
})


var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello world!',
        color: 'red'
    },
   
})

使用：

<input type="text" v-color="color">

也可以注册局部指令，组件中接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义---

  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性：

<input type="text" v-focus>

若有不足请多多指教！希望给您带来帮助！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^