VUE基本写法
qsdnet我想学编程 2019-10-24
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>// jsnew Vue({ el: ‘#app‘, data: { flag: false }})```
> 数组写法```// css.bgactive { background-color: #00f }.fontactive { color: #fff }
// html<div :class="[bg, font]">数组显示样式</div>
// jsnew 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
相关推荐
yuzhu 0喜欢 / 0评论 2020-11-16
85477104 0喜欢 / 0评论 2020-11-17
KANSYOUKYOU 0喜欢 / 0评论 2020-11-16
sjcheck 0喜欢 / 0评论 2020-11-03
怪我瞎 0喜欢 / 0评论 2020-10-28
源码zanqunet 0喜欢 / 0评论 2020-10-28
gloria0 0喜欢 / 0评论 2020-10-26
王军强 0喜欢 / 0评论 2020-10-21
学习web前端 0喜欢 / 0评论 2020-09-28
QiaoranC 0喜欢 / 0评论 2020-09-25
anchongnanzi 0喜欢 / 0评论 2020-09-21
安卓猴 0喜欢 / 0评论 2020-09-12
Macuroon 0喜欢 / 0评论 2020-09-11
kiven 0喜欢 / 0评论 2020-09-11
LittleCoder 0喜欢 / 0评论 2020-09-11
Cheetahcubs 0喜欢 / 0评论 2020-09-13
小焊猪web前端 0喜欢 / 0评论 2020-09-10
颤抖吧腿子 0喜欢 / 0评论 2020-09-04
softwear 0喜欢 / 0评论 2020-08-21
无缘公子 0喜欢 / 0评论 2020-08-18
anaction 0喜欢 / 0评论 2020-08-17
Luckyunyun 0喜欢 / 0评论 2020-08-15
Tplinkly 0喜欢 / 0评论 2020-08-15
zdj 0喜欢 / 0评论 2020-08-15
CRMCRMCRMDS 0喜欢 / 0评论 2020-08-12
breakpoints 0喜欢 / 0评论 2020-08-09
gloria0 0喜欢 / 0评论 2020-08-09
Cheetahcubs 0喜欢 / 0评论 2020-08-07
wetyu 0喜欢 / 0评论 2020-08-02
hline 0喜欢 / 0评论 2020-07-29
84901334 0喜欢 / 0评论 2020-07-28
Cricket 0喜欢 / 0评论 2020-07-27
julien 0喜欢 / 0评论 2020-07-26
yezitoo 0喜欢 / 0评论 2020-07-26
koko0c 0喜欢 / 0评论 2020-07-23
XuDanT 0喜欢 / 0评论 2020-07-24
malonely 0喜欢 / 0评论 2020-07-20
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 0喜欢 / 0评论 2020-07-19
不知道该写啥QAQ 0喜欢 / 0评论 2020-07-18
selectY 0喜欢 / 0评论 2020-07-18
81264454 0喜欢 / 0评论 2020-07-17
书虫媛 0喜欢 / 0评论 2020-07-08
bowean 0喜欢 / 0评论 2020-07-05
sanallen 0喜欢 / 0评论 2020-07-05
Symiac 0喜欢 / 0评论 2020-07-04
Symiac 0喜欢 / 0评论 2020-07-04