vue所有指令练习合集。这是个html文件，用chrome打开可查看结果。

<!DOCTYPE html>

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="UTF-8">

  <title>指令合集</title>

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

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

  <style>

    .greenWord {

      color: green;

    }

    .wordSize {

      font-size: large;

      background-color: darkorange;

    }

    .redWord {

      color: red;

    }

    [v-cloak]{

      display: none;

    }

  </style>

</head>

<body>

<div id="app1">

  <!--绑定普通文本-->

  <h3>1、插值绑定</h3>

  <span v-text="msg"></span>

  <span>{{msg}}</span>

  <!--插入一段html源码 将源码渲染为DOM结构-->

  <h3>2、v-html 动态渲染html</h3>

  <div v-html="mhtml"></div>

  <!--v-show 原理：通过改变css的display决定是否显示元素；即不管v-show的值是true还是false,都会渲染完该节点下所有Dom-->

  <h3>3、v-show 条件渲染</h3>

  <span v-show="isshow">提莫队长现身啦</span>

  <!--真正的条件渲染，符合条件则渲染v-if的DOM结构，否则只渲染v-else指示的结构块-->

  <h3>4、v-if 使用</h3>

  <span v-if="isok">您是男士</span>

  <span v-else>您是女士</span>

  <span v-if="Math.random() < 0.3">概率小于0.3</span>

  <span v-else-if="Math.random() < 0.6 && Math.random()>=0.3">概率0.3~0.5</span>

  <span v-else>概率大于50%</span>

  <!--for循环插值-->

  <h3>5、v-for vue循环</h3>

  <div v-for="item in items">{{item}}</div>

  <div v-for="item in items2">{{item.name}}>>>{{item.age}}</div>

  <!--给节点添加事件处理功能-->

  <h3>6、v-on 事件处理器</h3>

  <button v-on:click="chgColor" id="btn1">雨中的彩虹</button>

  <button v-on:click.right="rightAlert">右击选择</button>

  <button v-on:click.stop="stopEvent($event)">停止冒泡</button>

  <button v-on:click="count +=1">加法：{{count}}</button>

  <!--给元素绑定class属性-->

  <h3>7、v-bind 绑定class</h3>

  <span v-bind:class="{greenWord : isActive}">快给我披上色彩吧</span>

  <span v-bind:class="classObj">却从没有感觉，我无地自容</span>

  <span v-bind:class="[redWord]">绑定数组类</span>

  <!--给元素绑定内联style-->

  <h3>8、绑定内联样式</h3>

  <span v-bind:style="{color:'#66cc66',fontSize:20+'px'}">内联样式 对象语法</span>

  <span v-bind:style="styleObj">内联样式>>>对象语法</span>

  <span v-bind:style="[styleObj]">内联样式>>>数组语法</span>

  <!--绑定一个html属性,自定义的也可以-->

  <h3>9、绑定一个属性</h3>

  <img v-bind:src=" './logo.png' "/>

  <div v-bind:title="mtitle">红红火火恍恍惚惚</div>

  <div v-bind:data-mid="mid">测试绑定mid</div>

  <!--处理表单 憋说话 怒吃你的语法糖-->

  <h3>10、v-model 表单控件或者组件上创建双向绑定</h3>

  <input v-model="message" placeholder="edit me">

  <p>单行信息：{{message}}</p>

  <textarea v-model="info" placeholder="add multiple lines"></textarea>

  <p style="color: darkorange">多行信息：{{info}}</p>

  <input type="checkbox" id="checkbox" v-model="checked">

  <label for="checkbox">单个复选框：{{checked}}</label>

  <h4>多个复选框</h4>

  <div>

    <input type="checkbox" id="jack" value="jack" v-model="checkNames">

    <label for="jack">jack</label>

    <input type="checkbox" id="jack2" value="jack2" v-model="checkNames">

    <label for="jack2">jack2</label>

    <input type="checkbox" id="jack3" value="jack3" v-model="checkNames">

    <label for="jack3">jack3</label>

    <span>checked names:{{checkNames}}</span>

  </div>

  <h4>单选框</h4>

  <input type="radio" id="one" value="one" v-model="picked">

  <label for="one">one</label>

  <span>您的选择：{{picked}}</span>

  <h4>选择框</h4>

  <select v-model="selected">

    <option>111</option>

    <option>222</option>

    <option>333</option>

  </select>

  <span>您的选择：{{selected}}</span>

  <!--语法糖 有点甜 方便一丢丢-->

  <select v-model="mselect">

    <option v-for="option in options" v-bind:value="option.value">

      {{option.text}}

    </option>

  </select>

  <span>您的选择：{{mselect}}</span>

  <!--很少用到这个-->

  <h3>11、v-pre 跳过该元素和其子元素编译过程</h3>

  <span v-pre>{{@@@@@@@@@@@@@@@@@@@@@@}}</span>

  <!--现象：在vue编译结束中，界面可能会闪现一下Mustach符号，很丑。加上这个指令可以有效地阻止这种情况发生，永葆优雅。-->

  <h3>12、v-lock 该实例编译结束后，解除该指令绑定</h3>

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

  <!--少用-->

  <h3>13、v-once 只渲染元素和组件一次</h3>

  <span v-once>我只更新一次：{{once}}</span>

  <span>不加v-once:{{once}}</span>

</div>

</body>

<script>

  var app1 = new Vue({

    el: '#app1',

    data: {

      msg: '插值测试',

      mhtml: '<span style="color: palevioletred">巴啦啦小魔仙</span>',

      isshow: true,

      isok: true,

      items: ["林徽因", "陆小曼", "张爱玲"],

      items2: [{name: "徐志摩", age: "28"}, {name: '梁思成', age: 26}, {name: '金岳霖', age: 30}],

      count: 0,

      isActive: false,

      error: null,

      classObj: {

        greenWord: true,

        wordSize: true

      },

      redWord: 'redWord',

      styleObj: {

        color: '#00eeff',

        fontSize: 30

      },

      message:'',

      info:'',

      checked:true,

      checkNames:[],

      picked:'',

      selected:'',

      options:[{text:'犬次郎',value:'QCL'},{text:'道格森二世',value:'DGS'}],

      mselect:'',

      once:'渲染2次',

      mtitle:'title-property',

      mid:'123456'

    },

    methods: {

      chgColor: function () {

        $("#btn1").css('color', "#cc66cc")

        $('#btn1').text('我变成了粉红色')

      },

      rightAlert: function () {

        alert("您点击了鼠标右键")

      },

      stopEvent: function (event) {

        alert("event:" + event.target.tagName)

      }

    },

    computed: {

      classObj: function () {

        return {

          greenWord: this.isActive && !this.error,

          wordSize: this.error && this.error.type === 'fatal'

        }

      }

    }

  })

</script>

</html>

vue指令示例合集的更多相关文章

  1. 天气类API调用的代码示例合集：全国天气预报、实时空气质量数据查询、PM2.5空气质量指数等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 全国天气预报:数据来自国家气象局,可根据地名.经纬度GPS.IP查 ...

  2. 位置信息类API调用的代码示例合集：中国省市区查询、经纬度地址转换、POI检索等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 中国省市区查询:2017最新中国省市区地址 经纬度地址转换:经纬度 ...

  3. 通讯服务类API调用的代码示例合集：短信服务、手机号归属地查询、电信基站查询等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 短信服务:通知类和验证码短信,全国三网合一通道,5秒内到达,费用低 ...

  4. 生活常用类API调用的代码示例合集：邮编查询、今日热门新闻查询、区号查询等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 邮编查询:通过邮编查询地名:通过地名查询邮编 今日热门新闻查询:提 ...

  5. 开发工具类API调用的代码示例合集：六位图片验证码生成、四位图片验证码生成、简单验证码识别等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...

  6. 出行服务类API调用的代码示例合集：长途汽车查询、车型大全、火车票查询等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 长途汽车查询:全国主要城市的长途汽车时刻查询,汽车站查询 车型大全 ...

  7. 超全的 Vue 开源项目合集，签收一下

    超全的 Vue 开源项目合集,签收一下 xiaoge2016 前端开发 1周前 作者:xiaoge2016 链接: https://my.oschina.net/u/3018050/blog/2049 ...

  8. VUE相关资料合集

    ===官方=== https://github.com/vuejs/vue vue-components组件库 ---PC端--- https://github.com/ElemeFE/element ...

  9. NHibernate查询示例合集

    基本查询   复杂查询示例 /// <summary> /// 获取自定义表单数据中属于部门的部分 /// </summary> /// <param name=&quo ...

随机推荐

  1. 定期删除Azure存储账号下N天之前的数据文件-ASM

    ######RemoveStorageBlob*DaysOld##### <# .SYNOPSIS Remove all blob contents from one storage accou ...

  2. Dota2APP--第一天

    从今天开始,下定决心自己独立开发一个有关于Dota2的APP,因为非常喜欢这个游戏恰好自己又是做iOS移动开发的所以萌生了这个想法.希望可以坚持下去,有喜欢dota2的朋友也可以提点建议. 一.项目的 ...

  3. leetcode-852-山脉数组的峰顶索引

    题目描述: 我们把符合下列属性的数组 A 称作山脉: A.length >= 3 存在 0 < i < A.length - 1 使得A[0] < A[1] < ... ...

  4. CSS02--四种样式、背景、文本、链接状态、表格样式

    接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...

  5. SpringBoot进阶用法-随笔

    SpringBoot进阶用法 实现setApplicationContext //实现ApplicationContextAware接口,重写setApplicationContext方法 publi ...

  6. phpspreadsheet开发手记

    坑安装简单示例通过模板来生成文件释放内存单元格根据索引获取英文列设置值合并单元格居中显示宽度设置批量设置单元格格式直接输出下载自动计算列宽函数formula单元格变可点击的超链 PhpSpreadsh ...

  7. Google发布移动网站设计原则

    Google 刚刚发布了由 Google 与 AnswerLab 联合打造,名为<Principles of Mobile Site Design: Delight Users and Driv ...

  8. IDEA 及 Gradle 使用总结

    自动编译组件 目前Android开发的主流开发工具是 Eclipse 和 IDEA 目前主流的自动化打包工具时 ant,maven,gradle. maven工具中有自己的依赖仓库维护,很多开源支持包 ...

  9. λ(lambda)表达式

    理论阶段 函数接口 函数接口是行为的抽象: 函数接口是数据转换器; java.util.Function包.定义了四个最基础的函数接口: Supplier<T>: 数据提供器,可以提供 T ...

  10. leetcode简单题目两道(4)

    心情还是有问题,保持每日更新,只能如此了. Problem Given a binary tree, return the level order traversal of its nodes' va ...