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. Laravel5.5 引入并使用第三方类库操作

    理论上,Laravel5系列都支持,各位可以一试.我这里使用5.5版本. 我这里引入了一个将汉字转化为拼音的类库测试,一起来看看吧! 首先,在laravel的app目录下自定义一个文件夹,我用的名字是 ...

  2. 配置bootstrap环境

    bootstrap是一个优雅,灵活,可扩展的前端工具集,可搭建WEB页面的HTML,CSS,JavaScript工具集,最重要的是它的栅格系统. 这里不做更多的详细介绍具体可参照官方网站:http:/ ...

  3. 【实战】Weblogic反序列化Getshell

    修仙就是干,直接操作起来 1.访问http://x.x.x.x:7001/wls-wsat/CoordinatorPortType 2.加入Content-Type:text/xml 3.在body中 ...

  4. python爬虫常用之Scrapy 简述

    一.安装 pip install scrapy. 如果提示需要什么包就装什么包 有的包pip安装不起,需要自己下载whl文件进行安装. 二.基本的爬虫流程 通用爬虫有如下几步: 构造url --> ...

  5. 查看APK包签名的方法。

    1.查看 keystore $ keytool -list -keystore debug.keystore 结果: Keystore type: JKS Keystore provider: SUN ...

  6. Mac下使用Wine安装Xshell 4和Xftp 4

    下载: (链接: https://pan.baidu.com/s/1o78qisM 密码: 79sq) 安装: 1.安装Wine 参考:http://www.cnblogs.com/EasonJim/ ...

  7. Mac使用Launchd命令行lauchctl操作服务的简单用法

    注意:操作时前面比如带上sudo,不然只能操作当前用户的服务,会出现无法操作一些root用户的服务的问题.系统版本为Mac 10.12. 1.配置好plist之后: #加载一个服务到启动列表 sudo ...

  8. hibernate_SessionFactory_getCurrentSession_JTA简介

    JTA:java transaction  api java里所规定的一种管理事务的API 在另一篇播客我写到了,SessionFactory需要关注两个方法, 即:  openSession     ...

  9. 使用WSW将Nginx创建为Windows系统服务

    我们都知道Windows Service是一种特殊的应用程序,它的好处是可以一直在后台运行,相对来说,比较适合一些需要一直运行同时不需要过多用户干预的应用程序,这一类我们称之为“服务”,在Window ...

  10. js脚本语言在页面上不执行

    转换原理:// 编码原理就是创建TextNode节点,附加到容器中,再取容器的innerHTML.(将脚本编码) // 解码原理是将字符串赋給容器的innerHTML,再取innerText或text ...