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 RBAC权限

    Azure RBAC权限的细化一直是比较繁琐的事情,以下示例抛砖引玉,供大家参考 客户需求: 新用户在指定资源组下权限需求如下: 一.禁止以下权限 1. 调整虚拟机大小配置 2. 删除&停止虚 ...

  2. docker安装Tomcat软件,部署项目

    1 搜索tomcat镜像 $ sudo docker search tomcat NAME DESCRIPTION STARS OFFICIAL AUTOMATED tomcat Apache Tom ...

  3. hibernate与Oracle

    今天在用hibernate连接Oracle数据库进行查询时,出现一点小状况 数据库中是有数据的,而且程序本身也没有问题,可就是查不出数据,在经过几个小时的查找下,中遇找到了问题所在,那就是我Oracl ...

  4. day5:python学习之集合

    0. 集合的作用及特点 集合具有去重和关系测试两大作用,它具有无序的特点. list1 = [1,2,3,4,5,7,6,8,6,4] list1 = set(list1) print(list1) ...

  5. 认识python正则模块re

    python正则模块re python中re中内置匹配.搜索.替换方法见博客---python附录-re.py模块源码(含re官方文档链接) 正则的应用是处理一些字符串,phthon的博文python ...

  6. Spring Security OAuth 2开发者指南译

    Spring Security OAuth 2开发者指南译 介绍 这是用户指南的支持OAuth 2.0.对于OAuth 1.0,一切都是不同的,所以看到它的用户指南. 本用户指南分为两部分,第一部分为 ...

  7. hadoop-2.6.0.tar.gz的集群搭建（3节点）（不含zookeeper集群安装）

    前言 本人呕心沥血所写,经过好一段时间反复锤炼和整理修改.感谢所参考的博友们!同时,欢迎前来查阅赏脸的博友们收藏和转载,附上本人的链接http://www.cnblogs.com/zlslch/p/5 ...

  8. ehcache 集群使用 rmi方式 有图有真想

    来源:http://www.tuicool.com/articles/MJzYZbR ehcache 有几种方式集群 ,rmi,jgroup还有jms:这里讲一下ehcache的使用 ehcache ...

  9. emacs26.1 ppa

    sudo add-apt-repository ppa:kelleyk/emacssudo apt updatesudo apt install emacs26

  10. https证书pfx 生成 pem,crt,key

    (1)将.pfx格式的证书转换为.pem文件格式:    openssl pkcs12 -in xxx.pfx -nodes -out server.pem (2)从.pem文件中导出私钥server ...