vue指令示例合集

Posted 静静是小花

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue指令示例合集相关的知识,希望对你有一定的参考价值。

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指令示例合集的主要内容,如果未能解决你的问题,请参考以下文章

VUE指令合集(更新中)

VS Code中小程序与Vue常用插件合集(前端合集)

需要示例代码片段帮助

Vue-小demo小效果 合集(更新中...)

Redis数据库相关指令大合集

Vue.js教程--况颜