VUE框架指令快速入门及详解

插值表达式

双大括号叫插值表达式，作用是用来渲染data中的数据的

合法使用方式有以下几种：

• 直接写一个变量名
• 字符串拼接
• 数值运算
• 三元运算符
• 函数

<!--html代码-->
<div id="app">
    <h3>{{name}}</h3>
    <p>{{'欧阳'+ name}}</p>
    <p>{{age+1}}</p>
    <p>{{age>=18?'已成年':'未成年'}}</p>
    <p>{{name.split('').reverse().join('')}}</p>
</div>

//javascript代码
let vm = new Vue({
      el: '#app',
      data: {
        name: 'jack',
        age: 17
      }
})

指令

凡是以v-开头的，都叫指令，指令的作用是用来增强html代码功能

v-text指令

v-text和插值表达式区别：v-text写在标签属性位置，{{}}写在标签innerHTML位置。

使用：在标签属性位置写上v-text='data中的变量

<!--html代码-->
<!--开发时使用{{}}就行了-->
<h3 v-text="name"></h3>
<h3 v-text="'欧阳'+name"></h3>
<h3 v-text="age+1"></h3>
<h3 v-text="age>=18?'已成年':'未成年'"></h3>
<h3 v-text="name.split('').reverse().join('')"></h3>
<p>{{msg}}</p>
<p v-text="msg"></p>

//javascript代码
let vm = new Vue({
  el: '#app',
  data: {
    name: 'jack',
    age: 17,
    msg: '<p>hello itcast</p>'
  }
})

v-html指令

要渲染带html标签的字符串，需要使用v-html指令

v-html使用不安全，尽量避免使用

<!--html代码-->
<div id="app">
  <p v-html="msg"></p>
  <p v-html="name"></p>
</div>

//javascript代码
let vm = new Vue({
  el: '#app',
  data: {
    name: 'jack',
    msg: '<p>hello itcast</p>'
  }
})

v-bind指令

作用：动态绑定属性

使用方法： 在标签属性位置 v-bind:需要动态绑定的属性="data中的变量"

简写 ： 在标签属性位置 :需要动态绑定的属性="data中的变量"

<!--html代码-->
<div id="app">
    <img v-bind:src="logurl" alt="">
    <img :src="logurl" alt="">
    <a :href="'/del?id=' + id">删除</a>
    <!-- 推荐使用下面这种方式 -->
    <a :href="`/del?id=${id}`">删除</a>

    <!-- 在后面讲到组件的时候，会经常使用下面这种方式 -->
    <p :mylogo="logurl">测试v-bind绑定任意属性</p>

    <!-- 需求:id===1是加上一个myfont的类 -->
    <!-- 动态绑定class使用对象语法，对象的key是一个类名，-->
    <!-- 对象的value是一个布尔值 -->
    <p :class="{myfont: id===1}">测试类名</p>

    <!-- 数组语法了解 -->
    <p :class="['myfont', 'mybackground']">动态绑定class数组语法测试</p>
    <p :class="[id===1 ? 'myfont': '', id===1 ? 'mybackground' : '']">
        动态绑定class数组语法测试
    </p>
</div>

//javascript代码
var vm = new Vue({
  el: '#app',
  data: {
    logurl: './logo.png',
    id: 1
  }
})

v-model指令

指令用于实现双向数据绑定

v-model只适用于input/textarea/select/组件 这几个元素

双向数据绑定： 数据模型的值和视图模型的值进行同步变化 你变我也变，我变我也变

<!--html代码-->
<div id="app">
    <input type="text" v-model="msg">
</div>

//javascript代码
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello world',
    list: [
      {name: 'jack', id: 1},
      {name: 'jack2', id: 2},
      {name: 'jack3', id: 3}
    ]
  }
})

v-for指令

v-for指令可以用来渲染数组或者对象。

在渲染数据时，数据模型中的数据变化了之后，视图会跟着变化

1. 数组

• 在标签的属性位置写上 v-for="item in arr" item为形参，

可以随意起名字，它表示数组中的每一项；arr表示需要循环渲染的数组

• 在标签的属性位置写上 v-for="(item, index) in arr"

index表示数组项中的索引,名字随意取

2. 对象

• 在标签的属性位置写上 v-for="val in obj" val为形参，可以随意取名字，

它表示对象中key对应的值；obj表示需要循环的对象

• 在标签的属性位置写上 v-for="(val, key, index) in obj" key就表示对象的键，

index就表 示这个键所对应的索引，这个索引和数组类似，也是从0开始的

3.注意1

• 当使用数组的length属性改变数组长度时，不会触发视图的自动更新
• 当使用数组索引改变数组的时候，也不会触发视图更新
• 解决方式
  • 使用Vue.set(arr, index, newData) 例如：Vue.set(vm.list, 0, {name: 'lisi', id: 33})
  • 使用数组的splice方法 例如：vm.list.splice(0, 3)

4.注意2

• v-for指令在使用的时候一定要结合key属性来使用，

这个属性能唯一标识数组中的每一项，

• 请注意，key的值是唯一且不重复的；它能提升渲染效率

<!--html代码-->
 <div id="app">
    <h1>v-for="item in arr"</h1>
    <ul>
          <li v-for="item in list" :key="item.id">
              {{item.name}}
          </li>
    </ul>
    
    <h1>v-for="(item, index) in arr"</h1>
    <ul>
        <li v-for="(item, index) in list" :key="index">
          {{item.name}} : {{index}}
        </li>
    </ul>
    
    <h1>v-for="val in obj"</h1>
    <ul>
      <li v-for="val in user" :key="val">{{val}}</li>
    </ul>
    <h1>v-for="(val, key, index) in obj"</h1>
    <ul>
      <li v-for="(val, key, index) in user" :key="index">
          {{key}}: {{val}} ===> {{index}}
      </li>
    </ul>
</div>

//javascript代码
var vm = new Vue({
  el: '#app',
  data: {
    list: [
      {name: 'jack1', id: 1},
      {name: 'jack2', id: 2},
      {name: 'jack3', id: 3}
    ],
    user: {
      name: 'zhangsan',
      age: 12,
      id: 6
    }
  }
})

v-on指令

指令用于监听事件，事件可以是click/keyup/keydown/...... 以及自定义事件。

使用方法：

• 在标签属性位置写上v-on:事件类型="执行的函数"
• 简写： @事件类型="执行的函数"
• 给事件传递参数只需要在执行函数中加上参数就可以了
• 在事件中获取事件对象通过给执行函数传递$event来获取，注意$event只能叫这个名字，并且不能加引号
• 事件修饰符： 用来增强事件的功能的。 常用的事件修饰符有： .prevent阻止默认行为 .stop阻止冒泡
• 按键修饰符：按键修饰符主要是给键盘事件使用的，比如keydown，keyup，能够限制用户按的键执行的方法

 <!--html代码-->
<div id="app">
  <p>{{msg}}</p>
  <button v-on:click="changeMsg">点击改变msg</button>
  <button @click="changeMsg">点击改变msg简写形式</button>
  <button @click="changeMsgByarg('heima')">点击改变msg传参形式</button>
  <button @click="getEventObj($event)">点击获取事件对象</button>
  <a href="http://www.baidu.com" @click.prevent="getBrand">不跳转到百度</a>
  <div>
    <input type="text" v-model="inputVal" @keydown.13="printInput">
    <input type="text" v-model="inputVal" @keydown.enter="printInput">
    <input type="text" v-model="inputVal" @keydown.f4="printInput">
  </div>
</div>

//javascript代码
// 自定义一个f4按键修饰符
Vue.config.keyCodes.f4 = 115
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello itcast',
    inputVal: ''
  },
  // 函数的定义在methods属性中
  methods: {
    // es6中函数写法
    changeMsg() {
      console.log(this === vm);
      // this代表的就是vue实例
      this.msg = 'hello world'
    },
    changeMsgByarg(val) {
      this.msg = val
    },
    getEventObj(evt) {
      console.log(evt);
    },
    getBrand() {
      console.log('baidu');
    },
    printInput() {
      console.log(this.inputVal);
    }
  }
})

v-show和v-if指令

• 都能够用来控制元素的显示于隐藏
• 使用方式： 标签属性位置v-if v-show="布尔值" 为true表示显示， 为false表示隐藏
• 二者区别：
  • v-show通过样式display: none来控制元素的显示与隐藏
  • v-if通过操控dom来控制元素的显示与隐藏

• 使用场景的区别：
  • 在涉及到大量dom频繁显示与隐藏切换的时候就用v-show
  • 在涉及到异步数据渲染时，用v-if好一些

<!--html代码-->
<div id="app">
  <p v-show="isVisible">v-show</p>
  <p v-if="isVisible">v-if</p>
  <button @click="toggle">点击切换显示与隐藏</button>
</div>

//javascript代码
var vm = new Vue({
  el: '#app',
  data: {
    isVisible: false
  },
  methods: {
    toggle() {
      setTimeout(() => {
        this.isVisible = !this.isVisible
      }, 2000);
    }
  }
})

v-if，v-else-if，v-else指令

用于条件判断

 <!--html代码-->
<div id="app">
  <div v-if="score>=90">优</div>
  <div v-else-if="score>=80">良</div>
  <div v-else-if="score>=70">中</div>
  <div v-else>差</div>
</div>

//javascript代码
var vm = new Vue({
  el: '#app',
  data: {
    score: 70
  }
})

v-cloak指令

 <!--html代码-->
<!-- 通过v-cloak指令解决表达式闪烁问题，它必须结合css样式来解决-->
<div id="app">
  <!-- 当vuejs文件加载进来之后，它会移除掉标签上面的v-cloak指令 -->
  <p v-cloak>{{msg}}</p>
</div>

//javascript代码
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello world'
  }
})