Vue语法

最新推荐文章于 2024-09-02 10:27:11 发布

原创最新推荐文章于 2024-09-02 10:27:11 发布 · 646 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Vue语法

本文详细介绍了Vue语法，包括数据类型分类、指令等内容。指令涵盖v-html、v-text、v-show、v-if等，还探讨了v-for循环、v-bind绑定key等操作。同时给出了指令的面试题，如v-if和v-show的区别，并针对使用中遇到的数组变动检测、事件对象传递等问题提供了解决方法。

Vue语法

1、数据类型分类

第一种划分

基础数据类型：number string boolean
复杂数据类型：object ( array function)
特殊数据类型：null undefined

第二种划分

初始数据类型：number string boolean null undefined
引用数据类型：object ( array function)

注意：mustache支持上述数据类型，但是不支持console.log和alert

2、指令

指令是绑定在dom元素的属性上的

Vue 1.0 中叫属性指令（借鉴Angular）

Vue 2.0 中统称为指令

指令用 v-xxx 表示

3、示例

var vm = new Vue () {
	el:'#app',
	data:{
		name:'zhangsan'
	}
}
Vue是MVVM框架，因此上述代码中的data就是MVVM中的M；el就是MVVM中的视图，vm就是MVVM中的VM

4、指令的具体操作

v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（相当于使用了 innerHTML ）)
v-text：可以将一个数据展示在一个dom的内容中（相当于使用了 innerHTML ）
条件渲染的指令
- v-show：可以控制一个dom的显示隐藏（这个指令操作的是dom的display属性）
- v-if：可以控制一个dom的存在与否（创建和销毁）
- v-else
- v-else-if

5、指令的面试题

面试题（实用题）【钻石】

v-if vs v-show 区别
- v-if 操作的是dom元素（组件）的创建或是销毁
- v-show 操作的是dom元素的display属性
- v-if可以有多种使用形式：单路分支，多路分支，双路分支
- v-show 只能写一个单路形式
实用：项目中如何选择这两个使用
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、指令之for循环：v-for

v-for

数组 v-for = " (item,index) in arr " item是arr中每一个元素
对象 v-for = "(item,key,index) in obj " item是obj的属性值
json类型数据 v-for = “(item,index) in json”

嵌套类型数据

<ul>
    <li v-for = "item in lists">
        <p>id: {{item.id}}</p>
        <ul>
            <li v-for = "task in item.task">
            <p>task : {{ task}}</p>
            </li>
        </ul>
    </li>
</ul>

7、指令之v-bind绑定 key:

给没一个循环的列表添加一个唯一的标识

使用指令 v-bind 来绑定 key

<div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>
注意： 如果有id，那么我们就使用id，如果没有，我们才会选择index

v-bind: 单项数据绑定：将一个数据绑定在一个dom的属性上

简写：
<div v-for = " (item,index) in lists" :key = " item.id "></div>

8、指令之添加类名：class

vue中如何给dom添加类名：

直接在dom上绑定类名
```
<p class="size bg_color"></p>
```

vue中类名绑定 - 对象形式

格式： v-bind:class = "{ 属性： boolean }"
格式： v-bind:class = "{ [data]： boolean }"

<p :class = "{ size: true,bg_color: false }"></p>
<p :class = "{ size: true, bg_color: true }"></p>
<p :class = "{ [s]: true, [bg_color]: true }"></p>
<p :class = "{ [s]: 5>3?true: false, [bg_color]: true }"></p>

目的： dom身上属性class 要和数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

<p :class = "{ size,bg_color }"></p>
size是自定义的属性， 它的属性值是undefined， 相当于是false

<p :class = "{ size: true, bg_color: true }"></p>
size也是自定义属性，他的属性是true,那么就会加上去

<p :class = "{ [s]: true, [bg_color]: true }"></p>

vue中类名绑定的形式 - 数组的形式【推荐】

格式： v-bind:class = "[ 数据 ]"

例：
 <p :class = "['size','bg_color']"></p>
 <p :class = "[ s, bg_color ]"></p>
 <p :class = "[ flag? s:'box', bg_color]"></p>
 <p :class = "[ flag? s:'box', bg_color]"  class = "yyb"></p>

类名绑定不会覆盖原先的类名
为什么要绑定类名
1、指令是用来操作dom
2、目的：为了将来通过数据来操作类名，类名操作dom

9、指令之添加样式：style

样式的绑定： v-bind: style = “”

对象的形式

<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>

数组的形式

<p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>
<p :style = "[ size,bg ]"></p>

10、指令之事件添加

事件

问题：javascript事件添加有几种形式
- 事件绑定
  
  dom.onclick = function () {}
  
  dom: 事件源
  
  on: 绑定事件的形式
  
  click: 事件类型
  
  function（）{} 事件处理函数
- 事件监听： addeventListener
- 直接在标签中绑定事件
```
<div onclick = "事件处理函数名称"></div>              
```

vue采用了第三种，也是通过属性的形式绑定在dom身上

<div v-on:click = "事件处理函数名称"></div>

简写：
@eventType = " handlerName "

问题：函数调用有哪些方法？

直接调用 ()

事件

问题：如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现

分析：我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined

解决：在函数执行时，传入一个实际参数 $event 来代表事件对象

问题：下标是不能检测变动的，但是我们现在看到了它检测到了
问题：如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动

解决方法：使用splice
问题：我们直接修改一个数组下的一个数据时，发现下标不能检测变动了

解决方法：使用 Vue.set / this.$set

11、指令之v-model

v-model
- 双向数据绑定
- 默认绑定value值
- v-model应用于表单元素

问题汇总

问题1：我们直接修改一个数组下的一个数据时，发现下标不能检测变动了

解决方法：使用 Vue.set / this.$set

问题2：如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动

解决方法：使用splice

问题3：如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现

分析：我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined

解决：在函数执行时，传入一个实际参数 $event 来代表事件对象

问题4：函数调用有哪些方法？

直接调用 ()

事件

问题5：javascript事件添加有几种形式

事件绑定

dom.onclick = function () {}

dom: 事件源

on: 绑定事件的形式

click: 事件类型

function（）{} 事件处理函数
事件监听： addeventListener
直接在标签中绑定事件

面试题（实用题）【钻石】

v-if vs v-show 区别
- v-if 操作的是dom元素（组件）的创建或是销毁
- v-show 操作的是dom元素的display属性
- v-if可以有多种使用形式：单路分支，多路分支，双路分支
- v-show 只能写一个单路形式
实用：项目中如何选择这两个使用
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。