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. QuantLib 金融计算——数学工具之插值

    目录 QuantLib 金融计算--数学工具之插值 概述 一维插值方法 二维插值方法 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--数学工具之插值 载入模块 ...

  2. tp5.0 根据经纬度 获取附近信息

    自己备注一下 /* *参数说明: *$lng 经度 *$lat 纬度 *$distance 周边半径 默认是500米(0.5Km) */ public function returnSquarePoi ...

  3. 【App性能分析】：tracelog分析法

    tracelog可以记录每个OpenGL函数调用的消耗时间,所以很多时候用来作performance分析.目前只支持安卓4.1以上的版本设备 1,目前Android Device Monitor最新的 ...

  4. 线段树+单调栈+前缀和--2019icpc南昌网络赛I

    线段树+单调栈+前缀和--2019icpc南昌网络赛I Alice has a magic array. She suggests that the value of a interval is eq ...

  5. Javascript之in操作符的用法

    in操作符是js里面常用的一个操作符,下面是其几个常用的功能: 1.配合for语句循环遍历/迭代数组中的元素 2.配合for语句循环遍历/迭代集合中的属性 3.判断对象是否是数组的元素 4.判断对象是 ...

  6. javascript005_Object

    •我们目前为止大多数引用类型都是Object类型的实例,Object也是ECMAScript中使用最多的一种类型(就像java.lang.Object一样,Object类型是所有它的实例的基础). – ...

  7. ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法

    1.ifram的使用 左边是<a>链接  右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...

  8. scrapyd远程连接配置

    安装scrapyd: pip install scrapyd 默认scrapyd启动是通过scrapyd就可以直接启动,bind绑定的ip地址是127.0.0.1端口是:6800,这里为了其他主机可以 ...

  9. C 扩展库 - mysql API

    MySQL API C API Data Structures MYSQL This structure represents handler for one database connection. ...

  10. MapReduce原理——分而治之

    一.MapReduce简介 二.MapReduce并行处理的基本过程 三.MapReduce实际处理流程 四.一个job的运行流程 一.MapReduce简介 MapReduce是一种并行可扩展计算模 ...