操作Dom元素内容

v-once

v-once指令是操作dom元素内部的内容，主要功能就是设置当前DOM元素内部，差值表达式只能生效一次，再次修改data里面的值是不可以被修改的。

书写格式 / 位置

<div v-once>{{ title }}</div>

v-text与v-html

v-text与v-html指令的作用，都是操作DOM元素内部的内容，区别在于v-text指令不能够生成html结构片段，只能操作纯文本，而v-html指令是可以生成html结构片段的，两个指令设置，会将原有的内容覆盖掉，在使用时v-html的使用并不多。

书写格式 / 位置

<div v-html="值定义在data里面" / v-text="值定义在data里面" ></div>

操作Dom元素属性

v-bind

v-bind指令针对元素的属性设置，v-bind指令绑定的属性，一、是可以书写js代码，但书写的只能是表达式，不能是语句，二、可以是对象的格式，对多个变量进行绑定。指令在使用时，也可以绑定自定义属性。

语法糖写法 :属性名=“ 属性值 ”，可以省略前面的v-bind，直接书写:

语法格式/代码举例

<div id="app">
      <!-- 在这里需要通过指令v-bind = 属性名 / 变量名 -->
     <h1 v-bind="item"></h1>
 </div>
 <script src="js/vue.js"></script>
   <script>
       const app = new Vue({
           el:'#app',
           data:{
               item:{
                   id:"rose",
                   name:'jennie',
                   title:'jisoo',
                   class:'lisa',
                   // 可以绑定自定义属性
                   dataSta:'jessica'
               }
           }
       })
       
  </script>

class的操作

通过v-bind指令操作，在操作类名时需要注意

注意事项一、在使用v-bind操作类名时，原有的类名是不被覆盖的，

注意事项二、在使用时，设置多个类名时，是不能出现空格的，并且不能书写语句，如果设置多个类名，直接在data里面进行定义即可

多个类名处理方式

data:{
    //在data里面使用这种方式可以设置多个类名
    class:'clis cl2s cls3'
}

对类名的特殊处理

对类名的特殊处理，如果需要设置多个类名，需要特殊的处理方式

在特殊处理时，可以通过对象的形式进行书写 v-bind:class="{键：值}"

键代表的是要设置的class类名：

值代表的时，判断这个类名是否存在，值的类型是布尔值

二者的关系是，类名与是否生效的对应的关系
<p v-bind:class="{类名：布尔值，类名：布尔值}"></p>
如果要书写特殊类名比如说短横线、下划线等等特殊符号，需要用引号进行包裹
<p v-bind:class="{'特殊类名'：true}"></p>

style的操作

使用v-bind指令动态绑定行内style样式，并且可以与原来的行内样式共存，不会覆盖
<p :style="style">  </p>

<script>
  const app = new Vue({
  el:'#app',
  data:{
      style:{
          width:'200px',
          height:'300px'
      }
  }
})
</script>
注意：

在设置带有单位的样式时，需要给样式添加上单位

设置带有短横线（-）的属性值是，一种方式是使用驼峰命名法，第二个单词首字母大写，第二种方式是通过将属性加上引号，也可以使用。

渲染数据操作

v-for(重要)

v-for指令是vue里面重要的指令，通过v-for指令可以将数据渲染到页面上（视图），一般使用它对对象与数组进行遍历。

参数一、是内部数据的标识符，名字可自定义（有意义的），他代表的事数据内部的每一项

参数二、in是固定值

参数三、原数组或是原对象类型的数据

如果操作时，需要用到索引值是，在遍历时，需要设置另一个值。

<li v-for="(item ,index) in arr">{{ item , index }}</li>

在操作对象是，也可以设置第二个参数，但是这时候的第二个参数代表的事属性名

<li v-for="(item ,key) in obj">{{ item.key }}</li>

使用v-for指令必须知道的事

在使用v-foir指令的时候，我们需要注意的是，因为在渲染数据时，如果数据位置发生变化，但vue渲染时，并不会去更改dom元素，所以在使用v-for指令是，通常会与key进行连用

在与key属性连用时，需要注意的事，就是key属性需要通过v-bind指令进行动态绑定，通常key的值是遍历的每一个元素的id值。

<li v-for="item in arr" :key="item.id"></li>

连用的优点

在渲染时不容易出错。
提高页面渲染效率。

v-show与v-if

v-show指令与v-if指令，在功能方面上，他们两个实现的效果是相同的，让一个元素显示隐藏，但他们的区别就在于，v-show指令，会给dom元素添加行内属性，设置于元素显示与隐藏，但是v-if指令就有些不同，他会使这个元素从dom树移除。他们的返回值是相同的，都是布尔值，true代表的隐藏，false代表的是现实，在使用的时候，避免两个指令作用在同一个DOM元素上。

两个指令适用的场景
1. 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
2. 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

v-show注意点

再使用v-show指令时，需要注意的是，他不能给模板标签进行使用，因为模板标签template渲染时，他不是一个真实的标签，所以设置这个属性并没有什么作用。

v-if注意点

在使用v-if指令时，需要注意的是，当v-if与v-else-if 与v-else连用时，就要注意，如果他们内部设置的html结构或者是内容，都是相同的，这时他们需要设置不同key值。

使用场景以及注意事项

场景如下，一个表单，用户切换时显示不同的输入框，分别代表，手机号输入框，密码输入框，邮箱输入框，当使用v-if指令操作时，我们都知道v-if指令是将这个元素进行销毁，但是，内部的值不会被销毁，而是，在用户点击到另一个输入框，数据会在下一个输入框内部进行展示。

<div id="app">
        <div v-if="type=='username'" :key="'username'">
            输入框1<input type="text">
        </div>
        <div v-else :key="'email'">
            输入框2<input type="text">
        </div>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
               type:"username"
            }
        })
    </script>

事件处理

v-on指令，用于给元素添加事件，就好比jsavScript里面的事件，是同的。

书写格式/语法

<button v-on:click="处理程序（或者是变量名num）">点击按钮</button>

事件处理程序需要书写在methods选项内部，格式如下

const app = new Vue({
    ......,
    methods: {
        // num就相当于javascript里面的函数给名，或者是对象内部的方法名
        num: function () {
            // 逻辑代码
        }
    }
})

简写格式/语法

<button @click="方法名">点击按钮</button>

在书写时，切记指令内部的方法名无需加（），如果加上（）代表有参数需要传递

表单指令

v-model指令只适用于表单元素，指令的功能是实现数据的双向绑定，也就是说，输入框的值改变，data里面定义的数据时会发生改变的，data内部的数据变化，也是会影响视图上输入的内容。

指令内部的实现是通过一个事件@input，与v-bind实现的