VUE基本写法

时间：2022-05-08 23:18

VUE基本结构




  
  
  
  Document


  {{ msg }}
  
    {{ msg }}

模板语法文本




  
  
  
  Document


  {{ msg }}
  
    {{ msg }} - {{ count }} - {{ obj.num }} --- {{ arr[1] }}

模板语法纯html：




  
  
  
  Document


  
    {{ msg }}

{{}} --- 原样输出变量的值

v-html -- 解析输出变量的值 ---- 指令

v-text -- 原样输出变量的值 ---- 等同于 {{ }} ---- 指令

**防止XSS,CSRF**

> XSS 跨站的脚本攻击 --- 输入框提交的是一段 javascript 代码

---- 过滤关键词/转义关键词 ---
赞成使用三元（目）运算符，不赞成写其余的业务逻辑

指令




  
  
  
  Document


  
    {{ msg }}
    
      如果为真我就显示
    
    
      如果为假我就显示
    

    
      真真真
    
    
      假假假

> v-html
> v-text
> v-model 一般和表单元素一起使用，表示的就是表单元素的值
> v-if 条件判断的指令 v-if v-else-if v-else
> v-show 显示的依据 ---- css display:none/block
> v-for 循环遍历数据
> v-bind 绑定属性
> v-on 绑定事件
> v-once 只绑定一次
> v-slot
> v-pre
> v-cloak

**v-show 与 v-if 的区别**

绑定属性




  
  
  
  Document
  


  
    没有使用绑定属性
    使用绑定属性
    绑定属性的缩写形式
    aaaaaaaaaa

# 3、class与style绑定 --- 如果后端传递的数据有单独的样式需要设计，则可用

```
{
title: ‘华为笔记本‘,
className: ‘active‘
}

{
title: ‘华为笔记本‘,
active: true
}

```
## 3.1 class绑定 --- 07class绑定.html

> 对象写法
```
// css
.active { color: #f66 }
// html

HTML + css设置字体颜色

选中为真，不选中为假

根据选中的样式来设定颜色

// js
new Vue({
el: ‘#app‘,
data: {
flag: false
}
})
```

> 数组写法
```
// css
.bgactive { background-color: #00f }
.fontactive { color: #fff }

// html

数组显示样式

// js
new Vue({
el: ‘#app‘,
data: {
flag: false,
bg: ‘bgactive‘, // ++++++++++++++++++
font: ‘fontactive‘ // ++++++++++++++++++
}
})
```

CLASS绑定




  
  
  
  Document
  


  
    HTML + css设置字体颜色
     选中为真，不选中为假
    根据选中的样式来设定颜色
    数组显示样式

条件判断




  
  
  
  Document


  
    男
    女
    男
    女

     {{ lesson }}
    一阶段
    二阶段
    三阶段

v-if 可以和 key属性同时使用，可以避免代码的重用

v-show css 显示和隐藏的转换

循环渲染




  
  
  
  Document


  
    
    
    
    
    
      {{ item.title }}

**列表渲染要加 key 属性，如果不知道拿什么作为key值，可以使用索引值,最好是使用唯一的值作为key值**

> v-for = "item of list"
> v-for = "(item, index) of list"

事件处理




  
  
  
  Document


  
    原生js onclick 必须得写函数的(),vue中可以不写
    
    
    原生js需要事件对象必须传递事件对象,vue中不需要传递事件对象
    
    
    如果vue中需要传递参数和事件对象时，必须传入事件对象 $event

v-on:click @click

v-on:change @change
v-on:click="fn()"
v-on:click="fn($event)"
v-on:click="fn(‘params‘)
v-on:click="fn(msg)" msg为变量

修饰符




  
  
  
  Document
  


  
    

    
    .enter 按键修饰符
    

     .stop .prevent 事件修饰符
    
      
    
    
      
    
  





事件修饰符号：

阻止冒泡 v-on:click.stop="fn()"
阻止默认事件 v-on:click.prevent="fn"
阻止冒泡阻止默认事件 v-on:click.stop.prevent="fn"
.capture 添加事件监听器时使用事件捕获模式即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告

按键修饰符：

以前如果有一个表单输入框，当你输入之后敲回车想要打印值