Vue常用指令，事件行为，表单提交

1：指令介绍

用官方话来说就是 html 的特殊属性

HTML的属性是什么？

就是写在HTML的开始标签中 以 属性=“属性值” 的写法完成的

他的作用是用来扩展HTML标签的功能

举例：< img/> 标签，如果我就这样写，那么它什么也不是，但是当我加上 src=”… …“的时候它就能显示一张图片

指令 就是带有v-前缀的特殊属性， 如昨天学习的v-on, v-model

写在哪：任意 HTML 元素的开始标签内

2：vue常见指令

v-text——→ 作用：设置标签的文本值（textContent），<p v-text=”mes”></p> 标签内的所有内容都会被替换，或者使用双大括号表达式在标签内部取值也行；

v-html——→ 作用：设置标签的innerHTML值，如果是普通的文本，和v-text没有区别，如果数据中有标签的话，使用html将会解析为标签，而text只会解析成文本；

v-model —→ 作用：用于在表单元素中 关联模型数据 从而实现双向数据绑定（重点）

v-show —–→ 作用：控制一个元素的显示和隐藏（元素通过display:none来控制显示隐藏）

v-on —— → 作用：就是给vue来绑定事件的，可以省略，使用@代替

v-for ——→  作用：遍历data中的数据

v-bind —→  作用: 给网页中的html元素绑定属性，可以省略使用：代替

v-if ———→ 作用: 判断是否加载页面元素

v-else ——→ 作用：配合这v-if来对元素进行显示和隐藏

3：指令使用

注意：指令指向的都是data中声明的属性

1：双向绑定

v-model能轻松实现表单输入和应用状态之间的双向绑定

双向绑定指的是我们在vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

语法： v-model = ‘变量’

变量必须在data中进行声明

注意：v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上

 

2：条件渲染

条件渲染，根据表达式的真假来插入和删除元素，实现对标签的显示和隐藏，

实现条件渲染的指令是 v-if ,v-else;  v-show

两组都可以实现标签的显示和隐藏，有什么区别呢？

<p v-if=”true”>内容</p>

v-if的值为true时显示标签，为false时移除标签

v-else指令为v-if添加一个“else块”，v-else元素必须立即跟在v-if元素的后面，否则不能被识别

v-else 后面不需要表达式

v-if为true，后面的v-else不会渲染到HTML

v-if为false，后面的v-else才会渲染到HTML

 

v-show 为true时显示标签的内容，为false时则将display设置为none，实现对标签的影藏。

经验：如果需要频繁切换使用 v‐show 较好，如果在运行时条件不大可能改变 使用v‐if 较好

案例：2个P标签内容分别是表白成功和表白失败，一个按钮实现切换，在p标签内使用指令控制显示和隐藏，注意指令的值来自于data中。

  <div id="app">
    <p v-if="ok">表白成功</p>
<p v-else>表白失败啦</p>
<p v-show="ok">ok</p>
<p v-show="!ok">fail</p>
    <button>切换</button>
  </div>

  <script >
    new Vue({
      el: '#app',
      data: {
        ok: true
      }
    })
  </script>

3：列表渲染

v-for 实现data中数组的遍历。

语法：v-for="(item, index) in users" :key="index"
Users： 即将要遍历的data中的数组
In : 固定关键字
Item : 从数组中取出的每一个对象
Index : 下标

需求1：在vue的data中准备一个用户数组，里面的数据无所谓，在vue管理的范围内，使用列表标签和v-for指令实现对数组的遍历，再使用大括号表达式取出值。

注意：遍历时，v-for所在的标签，每一次遍历都会创建对应的标签。

需求2：遍历完成后，在每一行的后面加一个删除按钮，点击删除时，可以将当前行的数据删除掉。

分析：使用@click绑定事件，在绑定的时候将当前行数据的下标传递过去，然后根据下标进行删除，删除完成之后，要跟新data中的数组。

Vue中删除数组中指定下标的值，数组名.splice(index, num);   index表示从哪里开始删除，num表示删几个。

4：事件行为

1：阻止事件冒泡

有一种现象，存在2个div, 一个div包含另外一个div，2个div都有自己的事件，如下图

 

 

 

红色部分是外面的事件，蓝色部分是里面的事件，点击红色时发现外面的事件执行，这样是正常的，当点击蓝色背景时，里面的事件执行，同时外面的事件也执行了，

这样的现象就是事件冒泡，显然这样是不合理的，我们希望点击蓝色的背景时，仅仅执行蓝色部分的事件，现在就需要阻止事件冒泡。

Vue对这样的事件冒泡给出了很好的解决方案：@click.stop ="functionname"

在绑定事件的时候，加.stop 就很友好的解决了事件的冒泡

2：阻止事件默认行为

场景： 有一个a链接，href属性指向一个有效的地址，同时这个标签也有一个事件，此时点击的话会先执行事件，然后跳转到指定的地址。

阻止事件的默认行为：a链接不管什么事件都会执行跳转，这个就是默认行为，如果仅仅想执行事件的方法，不希望跳转的话，则需要阻止事件的默认行为。

Vue给出了很好的解决方法，在绑定事件时，这样写：@click.prevent="functionname"

5: 表单数据的收集

开发的时候经常会遇到表单，设计表单的话就需要收集数据。Vue使用v-model会自动完成对表单数据的收集。

案例：注册时，收集输入框，单选框，多选框，下拉框，文本框的内容。

注意：

1：一般出现input时，都会使用v-model指令，实现数据的双向绑定，有了v-model则不需要name的属性了，可以理解v-model就是name的属性。

2：v-model的属性值，一定要在vue实例的data中进行声明才能使用；

3：案例中不希望提交表单，表单的submit属性会自动提交表单到指定的地址，不希望提交的话，则需要阻止事件的默认行为，

当点击注册时，访问具体的方法，在该方法中实现对数据的收集，然后发送ajax 请求

4：单选框v-model的值如果没有在data中初始化的话，因为没有name，那就不是单选框了，value必须要有，如果需要有默认选中效果的话，直接在初始化时写上value的值即可；

5：下拉框的v-model应该写在select上，真正提交的是option中的value的值，初始化时在data中创建数组，使用循环指令遍历即可。

不管是v-model 的值还是下拉框中的数组都要在data中进行初始化。注意value要想识别表达式的话需要在前面加冒号：。

红色部分是外面的事件，蓝色部分是里面的事件，点击红色时发现外面的事件执行，这样是正常的，当点击蓝色背景时，里面的事件执行，同时外面的事件也执行了，

这样的现象就是事件冒泡，显然这样是不合理的，我们希望点击蓝色的背景时，仅仅执行蓝色部分的事件，现在就需要阻止事件冒泡。

Vue对这样的事件冒泡给出了很好的解决方案：@click.stop ="functionname"

在绑定事件的时候，加.stop 就很友好的解决了事件的冒泡

2：阻止事件默认行为

场景： 有一个a链接，href属性指向一个有效的地址，同时这个标签也有一个事件，此时点击的话会先执行事件，然后跳转到指定的地址。

阻止事件的默认行为：a链接不管什么事件都会执行跳转，这个就是默认行为，如果仅仅想执行事件的方法，不希望跳转的话，则需要阻止事件的默认行为。

Vue给出了很好的解决方法，在绑定事件时，这样写：@click.prevent="functionname"

5: 表单数据的收集

开发的时候经常会遇到表单，设计表单的话就需要收集数据。Vue使用v-model会自动完成对表单数据的收集。

案例：注册时，收集输入框，单选框，多选框，下拉框，文本框的内容。

注意：

1：一般出现input时，都会使用v-model指令，实现数据的双向绑定，有了v-model则不需要name的属性了，可以理解v-model就是name的属性。

2：v-model的属性值，一定要在vue实例的data中进行声明才能使用；

3：案例中不希望提交表单，表单的submit属性会自动提交表单到指定的地址，不希望提交的话，则需要阻止事件的默认行为，

当点击注册时，访问具体的方法，在该方法中实现对数据的收集，然后发送ajax 请求

4：单选框v-model的值如果没有在data中初始化的话，因为没有name，那就不是单选框了，value必须要有，如果需要有默认选中效果的话，直接在初始化时写上value的值即可；

5：下拉框的v-model应该写在select上，真正提交的是option中的value的值，初始化时在data中创建数组，使用循环指令遍历即可。

不管是v-model 的值还是下拉框中的数组都要在data中进行初始化。注意value要想识别表达式的话需要在前面加冒号：。

 

作业 ： 计算属性，指令 写2遍，

预习：事件行为，表单数据的收集， 脚手架内容（安装得，你不要安装）

拓展作业：

作业：不让表单直接提交，点击提交的时候，访问具体的方法add()，在方法内部 ，实现数据的收据, 弹出一个框，框内的数据就是表单中的数据

表单中有：   username, pwd, sex（单选框）, 民族（下拉框），hobby(多选框)