vue基础-插值表达式与常用指令

2021-04-09 本文已影响0人 beizi

什么是插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，就是指插值表达式
表达形式为：{{属性名称}}
它的功能类似于模板引擎中的“输出表达式”，主要用于渲染指定的数据
在进行解析的时候，插值表达式将会被替代为对应数据对象上指名名称属性的值
无论何时，绑定的数据对象上的属性值发生了改变，插值处的内容都会更新。
当你需要在页面中渲染指定数据的时候，可以考虑使用插值表达式

<p>{{msg}}</p>

插值表达式的基本使用

<div>
    <!-- 1.基本使用:直接渲染指定名称的变量,变量需要先定义好 -->
    <p>{{msg}}</p>
    <!-- 2.可以在插值中使用api -->
    <p>{{msg.toUpperCase()}}</p>
    <!-- 3.可以进行字符串的拼接 -->
    <p>{{'我想对你说:' + msg}}</p>
    <p>我想对你说:{{msg}}</p>
    <!-- 4.可以使用三元表达式 -->
    <p>{{age>=18?'成年':'未成年'}}</p>

    <!-- 不要在插值里面使用自增或自减 -->
    <!-- <p>{{age++}}</p> -->
    <!-- 不能写js关键字或结构 -->
    <!-- <p>{{if(age>=18)}}</p> -->
  </div>

vue常用指令

v-text

功能：完全更新标签之间的内容
使用语法：v-text="变量"
特点
- 可以直接指定数据
- 可以拼接字符串
- 可以调用api
- 可以使用三元表达式

<div>
    <p>作用:设置标签的文本内容</p>
    <p>{{msg}}</p>
    <!-- 直接设置变量,变量要先定义好 -->
    <p v-text='msg'></p>
    <p v-text='msg.toUpperCase()'></p>
    <p v-text="'我想对你说:'+msg"></p>
    <p v-text="age>=18?'成年':'未成年'"></p>
    <p v-text="msg">这里已经有内容了</p>
  </div>

v-html

功能：完全更新标签之间的内容
使用语法：v-text="变量"
特性：可以解析网页结构

<template>
  <div>
    <p>v-html的特点:它可以解析html结构</p>
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <!-- 直接使用v-html指定数据 -->
    <p v-html="msg"></p>
    <p v-html="msg.toUpperCase()"></p>
    <p v-html="'拼个字符串'+msg.toUpperCase()"></p>
    <p v-html="age>=18?'成年':'未成年'"></p>

    <p>{{str}}</p>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello',
      age: 20,
      str: '后台返回的内容<hr>'
    }
  }
}
</script>

v-for

作用：基于源数据多次渲染元素或模板块,说白了，就是对数据进行动态渲染的
语法：

(1).遍历数组：value是数组的成员，index是数组的索引
<元素 v-for='(value,index) in 数组>{{value}}:{{index}}</元素>

(2).遍历对象：value是对象的属性值，key是对象的属性名称，index是索引(一般不用)
<元素 v-for='(value,key,index) in 对象>{{value}}:{{key}}:{{index}}</元素>

v-model

作用：可以实现数据与元素的双向绑定

数据变化会影响dom元素
dom元素中的内容变化也会影响数据

使用限制：不是任何的元素都能添加v-model,只有input,textarea,select可以使用v-model
语法：<标签 v-model='数据'></标签>，如<input v-model="msg"/>

<template>
  <div>
    <h2>v-model的作用是实现视图和数据的双向绑定 </h2>
    <h3>1.修改数据,视图内容自动更新</h3>
    <h3>2.修改视图内容,数据自动更新</h3>
    <p v-model="msg">{{msg}}</p>
    <input type="text"
           v-model="msg">
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  }
}
</script>

v-on

作用：为元素绑定事件。表达式可以是一个方法的名字或一个内联语句

事件类型由v-on后面的参数决定
在普通元素上时，只能监听原生 DOM 事件
v-on可以简写为@

<template>
  <div>
    <button v-on:click='dodo'>最简单的事件绑定 </button>
    <button @click='dodo("jack",$event)'>简写方式绑定事件</button>
    <a href="http://www.baidu.com"
       @click.prevent='nojump'>我不要跳转到百度</a>
</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: 'jack',
    }
  },
  methods: {
    dodo1 (name, e) {
      console.log(name, e);
    },
    nojump (e) {
      // e.preventDefault()
      console.log('我不跳');
    }
  }
}
</script>

v-bind

作用：动态地绑定一个或多个 attribute，如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令

可以为元素的任意属性进行动态绑定
只要属性的值是动态变化的，就应该使用v-bind
v-bind可以简写为 :

语法：<标签 v-bind:属性='值'></标签>，如<img v-bind:src="imgsrc"/> | <img :src="imgsrc"/>

<template>
  <div>
    <img v-bind:src="imgsrc" alt="">
    // 简写
    <a :href="'http://127.0.0.1:3002/userDetail?id='+id">给我简单的跳</a</template>

<script>
export default {
  data () {
    return {
      imgsrc: 'https://...881_11.jpeg',
      id: 10,
      isadd: false,
    }
  }
}
</script>

v-show

作用：通过为元素设置display样式实现元素的显示和隐藏

如果设置的bool值为true,就移除元素的display:none样式
如果设置的bool值为false,就为元素设置样式display:none

语法：<标签 v-show='bool值'></标签>，如<p v-show="ishsow">我到底能不能显示呢</p>

  <div>
    <h2>它的作用是用于控制元素的显示的隐藏，它是通过为元素设置display样式来实现的</h2>
    <h2>语法： v-show='bool值' 直接赋值bool值，关系运算符 逻辑运算符 </h2>
    <button @click="isshow = !isshow">切换</button>
    <p v-show='isshow'>我到底能不能显示呢</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isshow: true
    }
  }
}
</script>

v-if

作用：根据所指定的表达式的值有条件地渲染元素

如果设置的bool值为true,就创建元素并渲染
如果设置的bool值为false,就移除元素

<标签 v-if='bool值'></标签>，如<p v-if="ishsow">我到底能不能创建并显示呢</p>

<template>
  <div>
    <p>作用：也可以实现元素的显示和隐藏，它是通过创建和移除来实现的</p>
    <p>语法： v-if='bool值'</p>
    <button @click="isshow = !isshow">切换</button>
    <p v-if='isshow'>我到底能不能创建并显示呢</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isshow: true
    }
  }
}
</script>