Vue常用基本指令_html pv-text class=-CSDN博客

本文链接：https://blog.csdn.net/weixin_45637035/article/details/115471302

导入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项/属性
})

vue实例的选项

el
用于挂载元素，定义该vue对象的作用范围
data
用于定义变量属性
methods
用于定义函数
computed
计算属性，与methods类似
watch
监听属性，通过 watch 来响应数据的变化
当指定的属性值的值发生改变时，会调用函数，第一个参数是新数据的值，第二个参数是旧数据的值
computed 与 methods区别

computed 是基于它的依赖缓存，当依赖vue对象的属性时，只有相关依赖发生改变时才会重新执行函数，取值。放入缓存，直接使用缓存使用返回值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

基本模板结构

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  //等选项。。。
})
</script>

常用基本指令

插值表达式

{{ number + 1 }}   //可以在变量的基础上进行表达式运算

{{ ok ? 'YES' : 'NO' }}    //三目运算法，变量ok的值如果是true，则值是yes，否则是no

{{ message.split('').reverse().join('') }}    //可以对变量的值进行JavaScript原生语法的修改

v-cloak

插值表达式在渲染数据的时候有一个问题，就是每当刷新页面，会出现短暂的闪烁问题，为了解决这个问题，可以用v-cloak。

第一步，先定义一个样式.

<style>
    [v-clock]{
        display:none;
    }
</style>

第二步，在具有插值表达式的元素上使用。

<p v-clock>
    {{message}}
</p>

v-text

用于输出文本内容，如果元素原本有文本内容，则覆盖原先的文本内容。默认没有闪烁问题。

<p v-text='message'>
    会被覆盖
</p>

v-html

用于输出 html 代码，如果元素内部有子元素，则覆盖子元素。

<p v-text='message'>
    子标签会被覆盖
</p>

v-bind

属性绑定

各种属性，href，class，alt，title，id，等等

class属性举例：

数组

<h1 :class="['red','name']">   //同时使用多个类
    这是h1的内容
</h1>

数组使用三元表达式

<h1 :class="['red','name',isactive?'active':'']">   //三元表达式决定是否使用
    这是h1的内容
</h1>

数组嵌套对象

<h1 :class="['red','name',{'active':isactive}]">   //对象中，如果isactive值为true，则使用active类，否则不使用
    这是h1的内容
</h1>

直接使用对象

<h1 :class="{'active':true,'rad':true}">   //全部为true，全部使用
    这是h1的内容
</h1>

样式绑定

使用样式对象

<h1 :class="{color:'red',font-size:'40px'}">   //全部为true，全部使用
    这是h1的内容
</h1>

data定义多个样式对象，数组引用

<h1 :class="[styleobj1,styleobj2,styleobj3]">   //全部为true，全部使用
    这是h1的内容
</h1>

简写方式

完整写法

<a v-bind:href="url"></a>

简写方式

<a :href="url"></a>

v-on

事件绑定,用于监听dom事件。

<button @click="counter += 1">增加 1</button>		//简单处理变量值的话，可以直接写
<p>这个按钮被点击了 {{ counter }} 次。</p>

<button @click="doSometing"></button>    //调用函数名

<button @click="doSometing('p')"></button>   //向函数传递参数

<button @click="doSometing1('p'),doSometing2('p')"></button>   //同时监听多个事件

事件修饰符

触发某个事件时，调用函数

语法：v-on:事件名.事件修饰符=“函数名”

支持jquery所有事件。

<a @click.stop="doThis"></a>  //阻止冒泡
<a @click.prevent="doThis"></a>  //阻止a链接的默认行为，不跳转

.stop
阻止冒泡
冒泡就是点击一个标签触发的事件，之后也会触发他的父级，祖先所定义的触发事件，阻止冒泡，就是不允许触发祖先的事件
.prevent
阻止默认事件
例如，a标签默认会跳转，可以使用它，阻止他跳转行为，效果如同Javascript:;
.capture
捕获事件
与stop相反，是先触发祖先事件，再触发内部，从外到内
.self
只监听触发该元素本身的事件
例如点击事件，不会冒泡，只有点击自己，才可以触发
.once
第一次的时候触发

按键修饰符

监听键盘事件，当按下某个按键时，触发事件，调用函数。

语法：v-on:keyup.按键修饰符="函数名"

<input v-on:keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

系统修饰键：

.ctrl
.alt
.shift
.meta

鼠标按钮修饰符:

.left
.right
.middle

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

简写方式

完整写法

<button v-on:click="onClick">A</button>

简写方式

<button @click="onClick">A</button>

v-model

在 input 输入框中，我们可以使用 v-model 指令来实现双向数据绑定：相当于绑定属性value的值，当你输入框的值变化时，你的data中中的变量值也在变化，当你的变量值在变化的时候，你输入框的值也在变化。v-model只能用在表单元素中.

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为属性并将 change 作为事件。

input 和 textarea 元素

<input v-model="message" placeholder="编辑我……">
<p>input 表单消息是: {{ message }}</p>            //改变输入框的值，变量message也会变化

<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
<p>textarea 表单消息是:</p>

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>	//选择了，值就是true，否则是false
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>	//选择一个，添加一个到数组里（value）
</div>
 
<script>
const app = {
  data() {
    return {
      checked : false,
      checkedNames: []
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

单选按钮

<div id="app">
    
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>		//选择谁，变量picked的值就是谁（value）
</div>
 
<script>
const app = {
  data() {
    return {
      picked : 'Runoob'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

select 列表

如果是单选，则直接赋值绑定，如果是多选，绑定到一个数组中去。

<div id="app">
    
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}		//选择谁，变量的值就是谁  （value）
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

v-show

使用 v-show 指令来根据条件的值(true 或 false )来决定是否展示元素，实际是切换元素的 CSS 属性 display

<p v-show='isshow'>内容</p>		//如果data中变量isshow的值为true，则显示该标签，否则不显示

v-if

条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示

<p v-if="seen">现在你看到我了</p>   //seen的值为真的话，才会显示

<div v-if="Math.random() > 0.5">随机数大于 0.5</div>    //表达式判断真假

链式使用

<div id="app">
    <div v-if="type === 'A'">
         A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C					//都为假的话，显示这个
    </div>
</div>

<script>
const app = {
  data() {
    return {
      type: "C" 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

循环数组

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

<ul id="example-2">
  <li v-for="(item, index) in items">		//第二个参数是索引
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

循环对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">				//第一个参数是值
    {{ value }}
  </li>
</ul>

<div v-for="(value, key) in object">
  {{ name }}: {{ key }}						//第二个参数是键
</div>

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}			//第三个参数是索引
</div>

注意

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

后续更新。。。。。vue其他知识。。。。