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
长风破浪会有时,直挂云帆济沧海