代码改变世界

vue指令相关的

2017-05-29 15:41  龙恩0707  阅读(580)  评论(0)  编辑  收藏  举报

阅读目录

1.v-text

1. v-text {string} 更新元素的textContent 如下代码：
<span v-text='msg'></span>
<!-- 其实和下面的写法一样的 -->
<span>{{ msg }}</span>

如下demo代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-text='msg'></span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: 'aa'
      }
    })
  </script>
</html>

查看demo

2.v-html

2. v-html {string} 更新元素的 innerHTML.
作用是：在网站上动态渲染任意的html是非常危险的，因为容易导致XSS攻击，在可信的内容使用v-html,可以防止发生。
还有一个地方就是后端返回的json数据，如果包含html这些标签的话，如果按照普通的html文本插入的话，会把html标签显示出来，但是使用v-html可以
很好的解决这个问题，如下demo：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-html='innerhtml'></span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        innerhtml: 'aaaaaa<i style="color: red;">122334</i>'
      }
    })
  </script>
</html>

查看demo

3.v-show

作用是： 根据表达式是否有值，切换元素的 display css属性。
如下代码空字符串的话，就不显示内容，但是如果字符串有任何值的话，都显示内容。

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-show='msg'>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

查看demo

4.v-if

作用：根据表达式的是否有值来渲染元素，在切换元素时及它的数据绑定/组件被销毁并且重建。
如下demo

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-if='msg'>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

查看demo

5.v-if vs v-show

他们之间的区别是：v-if 是真正的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
比如如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-show='msg'>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

v-show 显示和隐藏直接 display:none, 页面的代码不会被销毁，如下代码：
<div id="demo"><span style="display: none;">1111111</span></div>
但是 v-if 不一样，它会重新创建和重新销毁，比如如果为false的话，span标签不会显示出来。
所以如果需要频繁的切换显示和隐藏的话，使用v-show比较好，如果使用的条件不太可能发生变化的情况下，使用v-if比较好。

6.v-else

作用是：前一兄弟元素必须有 v-if，含义是：如果.... 否则....
如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-if='msg'>1111</div>
      <div v-else>2222</div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: ''
      }
    })
  </script>
</html>

查看demo

7.v-for

7. v-for {Array | Object | number | string }
基于源数据多次渲染元素或模板块，就是遍历元素的意思；
如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-for='item in msg'>
        {{ item.text }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: [{'text': 1}, {'text': 2}]
      }
    })
  </script>
</html>

查看demo

当然也可以对数组进行遍历，我们可以为数组索引指定别名。

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-for='(item, index) in msg'>
        {{ item }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: [1, 2, 3]
      }
    })
  </script>
</html>
// 总之可以如下遍历：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
// v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

8.v-on

8. v-on
缩写：@
类型 Function
参数： event(required)
修饰符：
.stop 调用 event.stopPropagation()
.prevent 调用 event.preventDefault()
.capture 添加事件使用 capture模式
.self 只当事件是从监听器元素本身触发时才触发回调。
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发的回调。
.native 监听组件根元素的原生事件。
.once 只触发一次回调。
.left 当点击鼠标左键时触发
.right 当点击鼠标右键时触发。
.middle 当点击鼠标中键时触发。

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

// 在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <div v-for='(item, index) in msg' :key='item.id' @click='dothis'>
        {{ item }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: [1, 2, 3]
      },
      methods: {
        dothis: function() {
          alert(1)
        }
      }
    })
  </script>
</html>

查看demo

9.v-bind 和 v-model 

9. v-bind
缩写： :
类型 {any}
作用：动态地绑定一个或多个特性。
如下代码：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model 指令用在<input>, <select>, <textarea> 上可以实现双向绑定，vue实例中的data与其渲染的dom元素上的内容保持一致。

10.v-pre 

10. v-pre
作用是：跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。
如下代码demo：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <span v-pre>{{ msg }}</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        msg: 'aaa'
      }
    })
  </script>
</html>

查看demo

当加上 v-pre 时，代码标签没有编译，直接显示 msg内容，如果去掉v-pre时候，就会编译。

11.v-once

 只渲染元素和组件一次，随后重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。可用于优化更新性能。

如下代码：

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>