Vue的指令及其用法

最新推荐文章于 2024-06-08 19:38:05 发布

雾里种花

最新推荐文章于 2024-06-08 19:38:05 发布

阅读量3.4k

点赞数 3

文章标签： Vue.js vue的指令指令 v-xxx 框架指令

本文链接：https://blog.csdn.net/ThisOnly/article/details/93410433

版权

指令

指令是绑定在dom属性上的
这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
Vue 1.0 叫它属性指令（借鉴Angular来的）
Vue 2.0 统称为 ‘指令’

指令是用一个 v-xxx 表示

指令是用来操作dom

Vue中不允许直接操作dom

mustache语法 — 属性写法的属性值是直接写数据的，不需要使用 {{ }}

v-html

可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（相当于使用了 innerHTML ）

v-text

可以将一个数据展示在一个dom的内容中（相当于使用了 innerText）

<body>
  <div id="app">
    <p v-html = "h"></p>
    <p v-text = "h"></p>
  </div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    data: {
     msg: 'hello Vue.js',
     h: '<h3> hello Vue.js </h3>',
     flag: true
    }
  })
</script>

条件渲染的指令

v-show

可以控制一个dom的显示隐藏（这个指令操作的是dom的display属性）

v-if

可以控制一个dom的存在与否（创建和销毁）

v-if vs v-show 区别

v-if 操作的是dom元素（组件）的创建或是销毁
v-show 操作的是dom元素的display属性
v-if可以有多种使用形式：单路分支，多路分支，双路分支
v-show 只能写一个单路形式
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if

v-else

可做双路分支的一个判断

v-if

v-else

v-else-if

可做多路分支的一个判断

<body>
  <div id="app">
    <h3> v-show </h3>
      <p v-show = "showFlag"> v-show指令 </p>
    <hr>
    <h3> v-if - 单路分支 </h3>
      <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
    <h3> v-if - 双路分支 </h3>
      <p v-if = "ifFlag">  双路分支 成立  </p>
      <p v-else> 双路分支不成立 </p>

    <h3> v-if - 多路分支 </h3>
    <p v-if = " type === 'A'"> A </p>
    <p v-else-if = " type === 'B'"> B </p>
    <p v-else> C </p>
  </div>
</body>
<script>
var vm = new Vue({
    el: '#app',//给跟实例一个模板（ 挂载 ）
    data: { 
      showFlag: true,
      ifFlag: false,
      type: 'A'
    }
  })
</script>

v-for

Vue中的循环遍历

1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
3. json类型数据
4. 嵌套类型数据

key:
给每一个循环的列表添加一个唯一的标识

使用指令 v-bind 来绑定 key

 <div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>

如果有id，那么我们就使用id，如果没有，我们才会选择index

<body>
  <div id="app">
    <h3> 数组 </h3>
    <ul>
      <li v-for = " (item,index) in arr ">
        <p> item :{{ item }} --  index: {{ index }}</p>
      </li>
    </ul>
    <hr>
    <h3> 对象 </h3>
    <ul>
      <li v-for = "(item,key,index) in obj"> 
        <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> json </h3>
    <ul>
      <li v-for = "(item,index) of json">
        <p> id: {{ item.id }} </p>
        <p> task: {{ item.task }} </p>
        <p> {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> 嵌套 </h3>
    <ul>
      <li v-for = " item in lists ">
        <p> id: {{ item.id }} </p>
        <ul>
          <li v-for = "todo in item.todos">
            todos中的数据 -- {{ todo }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script>
new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: '程序员',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '敲代码1'
        },
        {
          id: 2, 
          task: '敲代码2'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: '张三'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: '李四'
          }
        }
      ]
    }
  })
</script>

v-bind

单项数据绑定：将一个数据绑定在一个dom的属性上

简写

 <div v-for = " (item,index) in lists" :key = " item.id "></div>

类名绑定

vue中如何给dom添加类名
1. 直接在dom上绑定类名
2. vue中类名绑定 - 对象形式
目的： dom身上属性class 要和数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

  <p :class = "{ size,bg_color }"></p>
  //size是自定义的属性， 它的属性值是undefined， 相当于是false
  <p :class = "{ size: true, bg_color: true }"></p>
  //size也是自定义属性，他的属性是true,那么就会加上去
  <p :class = "{ [s]: true, [bg_color]: true }"></p>

格式： v-bind:class = "{ 属性： boolean }"
格式： v-bind:class = "{ [data]： boolean }"

3. vue中类名绑定的形式 - 数组的形式【推荐】
格式： v-bind:class = "[ 数据 ]"

4. 类名绑定不会覆盖原先的类名

5. 为什么要绑定类名
指令是用来操作dom
目的：为了将来通过数据来操作类名，类名操作dom

<style>
    .size{
      width: 100px;
      height: 100px;
    }
    .bg_color{
      background: red;
    }
  </style>
<body>
  <div id="app">
    <h3> v-class </h3>
    <hr>
    <h3> vue中类名添加第一种 </h3>
    <p class="size bg_color"></p>
    <hr>
    <h3> vue中类名添加第二种 - 对象的形式</h3>
    <p :class = "{ size: true,bg_color: false }"></p>
    <p :class = "{ size: true, bg_color: true }"></p>
    <p :class = "{ [s]: true, [bg_color]: true }"></p>
    <p :class = "{ [s]: 5>3?true: false, [bg_color]: true }"></p>
    <hr>
    <h3> vue中类名添加的第三种形式 - 数组形式（ 推荐 ）</h3>

    <p :class = "['size','bg_color']"></p>

    <p :class = "[ s, bg_color ]"></p>

    <p :class = "[ flag? s:'box', bg_color]"></p>
    <p :class = "[ flag? s:'box', bg_color]"  class = "yyb"></p>

  </div>
</body>
<script>
 new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js',
      s: 'size',
      bg_color: 'bg_color',
      flag: true
    }
  })


  var a = {
    name: 'yyb'
  }
  var b = {
    name: 'liancheng'
  }
</script>

样式绑定

样式的绑定：
v-bind: style = “”
1. 对象的形式
2. 数组的形式

<body>
  <div id="app">
    <h3> style </h3>
    <hr>
    <h3> style - 对象形式 </h3>
    <p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>

    <h3> style - 数组的形式 </h3>

    <p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>

    <p :style = "[ size,bg ]"></p>
  </div>
</body>
<script>
new Vue({
    el: '#app',
    data: {
      size: {
        width: '100px',
        height: '100px'
      },
      bg: {
        background: 'purple'
      }
    }
  })
</script>

v-on

事件 v-on使用

事件源
事件绑定形式
事件类型
事件处理程序

v-on:eventType = " handlerName "
//简写  v-on:    --- > @

<body>
  <div id="app">
    <button v-on:click = "helloHandler"> 点击 </button>
    <button @click = "helloHandler"> 点击 </button>
  </div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler () {
        alert( 'hello' )
      }
    }
  })
  console.log( 'vm', vm )
</script>

问题：如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现
分析：我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined
解决：在函数执行时，传入一个实际参数 $event 来代表事件对象

<body>
  <div id="app">
    <!-- <button v-on:click = "helloHandler"> 点击 </button> -->
    <button @click = "helloHandler( 10,20,$event)"> 点击 </button>
  </div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( a,b,e ) {
        console.log( a )
        console.log( b )
        console.log( e )
      }
    }
  })
  console.log( 'vm', vm )
</script>

v-model

双向数据绑定
默认绑定value值
v-model应用于表单元素

<body>
  <div id="app">
    <input type="text" v-model = "msg">
    <p> {{ msg }} </p>
  </div>
</body>
<script>
new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js'
    }
  })
</script>

记得引入Vue.js的cdn或是安装模块来使用

//https://www.bootcdn.cn/

雾里种花

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue的指令及其用法

指令指令是绑定在dom属性上的这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字Vue 1.0 叫它属性指令（借鉴Angular来的）Vue 2.0 统称为 ‘指令’指令是用一个 v-xxx 表示指令是用来操作domVue中不允许直接操作dommustache语法 — 属性写法的属性值是直接写数据的，不需要使用 {{ }}v-html可以...
复制链接

扫一扫