Vue的指令及其用法

指令

指令是绑定在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: '

hello Vue.js

'
, 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/

你可能感兴趣的:(Vue的指令及其用法)