VUE基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {{ msg }} <div id="app"> {{ msg }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 说明当前文件的哪一个节点的内部使用vue的语法 - element data: { // 当前实例的初始化的数据 msg: 'hello world' } }) </script> </html>
模板语法文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {{ msg }} <div id="app"> {{ msg }} - {{ count }} - {{ obj.num }} --- {{ arr[1] }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 说明当前文件的哪一个节点的内部使用vue的语法 - element data: { // 当前实例的初始化的数据 msg: 'hello world', count: 1000, obj: { num: 30 }, arr: ['a', 'b', 'c'] } }) </script> </html>
模板语法纯html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{ msg }} <div v-html="msg"></div> <div v-text="msg"></div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 说明当前文件的哪一个节点的内部使用vue的语法 - element data: { // 当前实例的初始化的数据 msg: '<h1>hello world</h1>' } }) </script> </html>
{{}} --- 原样输出变量的值
v-html -- 解析输出变量的值 ---- 指令
v-text -- 原样输出变量的值 ---- 等同于 {{ }} ---- 指令
**防止XSS,CSRF**
> XSS 跨站的脚本攻击 --- 输入框 提交的是一段 javascript 代码
---- 过滤关键词/转义关键词 --- <script> --- <script>
> CSRF 跨站请求伪造 --- 用户访问可靠的网站A，登陆之后登陆信息存入了cookie，但是在没有退出的情况下，请求了不可靠的网站B，B就像用户发起一个请求，用户响应请求时，就把自己的登陆信息泄露给了B
表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{ sex === 1 ? '男' : '女' }} - {{ lesson === 1 ? '一阶段' : lesson === 2 ? '二阶段' : '三阶段'}} - {{ msg.split('').reverse().join('') }} --- {{ sex | sexFilter }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello world', sex: 1, lesson: 1 }, filters: { // 体验过滤器，使用用 | 分割 -- 变量 | 过滤器名称 sexFilter (val) { if (val === 1) { return '男' } else { return '女' } } } }) </script> </html>
赞成使用三元（目）运算符，不赞成写其余的业务逻辑
指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{ msg }} <div v-if="flag"> 如果为真我就显示 </div> <div v-else> 如果为假我就显示 </div> <div v-show="flag"> 真真真 </div> <div v-show="!flag"> 假假假 </div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello world', flag: true } }) </script> </html>
> 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 的区别**
绑定属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .activea { color: #f66 } .activeb { color: bisque } </style> </head> <body> <div id="app"> <div mymsg="msg">没有使用绑定属性</div> <div v-bind:mymsg="msg">使用绑定属性</div> <div :mymsg="msg">绑定属性的缩写形式</div> <div :class="activeVal">aaaaaaaaaa</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello world', activeVal: 'activeb' } }) </script> </html>
# 3、class与style绑定 --- 如果后端传递的数据有单独的样式需要设计，则可用
```
{
title: '华为笔记本',
className: 'active'
}
<div :class="item.className"></div>
{
title: '华为笔记本',
active: true
}
<div :class="{active: item.active}"></div>
```
## 3.1 class绑定 --- 07class绑定.html
> 对象写法
```
// css
.active { color: #f66 }
// html
<div id="app">
<div class="active">HTML + css设置字体颜色</div>
<input type="checkbox" v-model="flag"> 选中为真，不选中为假
<div :class="{ active: flag }">根据选中的样式来设定颜色</div>
</div>
// js
new Vue({
el: '#app',
data: {
flag: false
}
})
```
> 数组写法
```
// css
.bgactive { background-color: #00f }
.fontactive { color: #fff }
// html
<div :class="[bg, font]">数组显示样式</div>
// js
new Vue({
el: '#app',
data: {
flag: false,
bg: 'bgactive', // ++++++++++++++++++
font: 'fontactive' // ++++++++++++++++++
}
})
```
CLASS绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active { color: #f66 } .bgactive { background-color: #00f } .fontactive { color: #fff } </style> </head> <body> <div id="app"> <div class="active">HTML + css设置字体颜色</div> <input type="checkbox" v-model="flag"> 选中为真，不选中为假 <div :class="{ active: flag }">根据选中的样式来设定颜色</div> <div :class="[bg, font]">数组显示样式</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { flag: false, bg: 'bgactive', font: 'fontactive' } }) </script> </html>
条件判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="radio" v-model="sex" value="1">男 <input type="radio" v-model="sex" value="0">女 <div v-if="sex == 1">男</div> <div v-else>女</div> <select v-model="lesson"> <option value="1">一阶段</option> <option value="2">二阶段</option> <option value="3">三阶段</option> </select> {{ lesson }} <div v-if = "lesson == 1">一阶段</div> <div v-else-if = "lesson == 2">二阶段</div> <div v-else>三阶段</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { sex: 1, lesson: 3 } }) </script> </html>
v-if 可以和 key属性同时使用，可以避免 代码的重用
v-show css 显示和隐藏的转换
循环渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- 不加key，末位添加 之前的会复用，如果首位删除，全部都修改了 --> <!-- <ul> <li v-for="item of list">{{ item }}</li> </ul> --> <!-- 如果添加key值，不管添加还是删除，都会复用 --> <!-- <ul> <li v-for="(item, index) of list" :key="index">{{ item }}</li> </ul> --> <ul> <li v-for="item of list1" :key="item.id">{{ item.title }}</li> </ul> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el: '#app', data: { list: ['a', 'b', 'c', 'd'], list1: [ { id: 'a', title: 'aa' }, { id: 'b', title: 'bb' }, { id: 'c', title: 'cc' } ] } }) </script> </html>
**列表渲染要加 key 属性，如果不知道拿什么作为key值，可以使用索引值,最好是使用唯一的值作为key值**
> v-for = "item of list"
> v-for = "(item, index) of list"
事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <mark>原生js onclick 必须得写函数的(),vue中可以不写</mark> <button onclick="jsBtnClick()">js原生按钮绑定点击事件</button> <button v-on:click="vueBtnClick()">vue按钮绑定点击事件</button> <mark>原生js需要事件对象必须传递事件对象,vue中不需要传递事件对象</mark> <button onclick="jsBtnClickEvent(event)">原生js事件对象</button> <button v-on:click="vueBtnClickEvent">vue按钮绑定点击事件</button> <mark>如果vue中需要传递参数和事件对象时，必须传入事件对象 $event</mark> <button v-on:click="vueClickParams($event, 1)">vue+事件对象+参数</button> <button @click="count += 1">{{ count }}</button> </div> </body> <script src="vue.js"></script> <script> function jsBtnClick () { console.log('js原生事件') } function jsBtnClickEvent (event) { console.log(event) } new Vue({ el: '#app', data: { count: 0 }, methods: { // vue中自定义事件的聚集地 vueBtnClick () { console.log('vue点击事件') }, vueBtnClickEvent (event) { console.log('vue', event) }, vueClickParams (event, id) { console.log(id, event) } } }) </script> </html>
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为变量
修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 200px;height: 200px; background-color: #f66 } </style> </head> <body> <div id="app"> <input type="text" onkeyup="getData(event)" id="val"> <!-- <input type="text" @keyup="getDataVue" v-model='vl'> --> <h1>.enter 按键修饰符</h1> <input type="text" @keyup.enter="getDataVue" v-model='vl'> <h1> .stop .prevent 事件修饰符</h1> <div class="box" onclick="clickjsbox()"> <button onclick="clickjs(event)">js按钮</button> </div> <div class="box" @click="clickvuebox()"> <button @click.stop.prevent="clickvue">vue按钮</button> </div> </div> </body> <script src="vue.js"></script> <script> // 当按下 enter 键时。输出输入框中的值 ---- js function getData (event) { if (event.keyCode === 13) { console.log(document.getElementById('val').value) } } function clickjsbox () { console.log('box') } function clickjs (event) { event.stopPropagation() console.log('js') } new Vue({ el: '#app', data: { vl: '' }, methods: { // getDataVue (event) { // if (event.keyCode === 13) { // console.log(this.vl) // } // } getDataVue () { console.log(this.vl) }, clickvuebox () { console.log('box') }, clickvue() { console.log('vue') } } }) </script> </html>
事件修饰符号：
阻止冒泡 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 将会被忽略，同时浏览器可能会向你展示一个警告
按键修饰符：
以前如果有一个表单输入框，当你输入之后敲回车想要打印值
<input onchange="fn(event)" id="name" />
if (event.keyCode === 13) {name.value}
vue
<input @change.enter="fn()" id="name" />
.tab
.delete
.esc
.space
.up
.down
.left
.right
系统修饰符
.ctrl
.alt
.shift
.meta