小博
V1
2022/07/07阅读：15主题：姹紫
vue 二
跟着官网学Vue（仗剑走天涯）
Class 与 Style 绑定
绑定 HTML Class
-
对象语法
-
数组语法
-
在组件上使用
绑定内联样式
-
对象语法
-
数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-template</title>
<script src="https://unpkg.com/vue@next"></script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
}
.active{
background-color: red;
}
.error{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<div :class="{ active: isActive,error: isError}" class="box">
Hello Vue
</div>
<div :class="[active2,error2]">
Hello xiaobo
</div>
<button @click="jihuo">激活</button>
<my-component></my-component>
<div :style="{ color:activeColor,fontSize: FontSize + 'px' }">
Hello wangyibo
</div>
<div :style="styleObject">
Hello 对象语法
</div>
<div :style="[styleObject2,styleObject3]">
Hello 数组语法
</div>
</div>
<script>
const myComponent = {
template: `<p class="foo bar">Hi!</p>`,
data() {
return {
}
},
}
const Root = {
data() {
return {
isActive: false,
isError:false,
active2:"active",
error2:"error",
activeColor: "red",
FontSize: 50,
styleObject: {
color:"blue",
fontSize: "100px",
},
styleObject2: {
color:"blue",
},
styleObject3: {
fontSize: "20px",
}
}
},
methods: {
jihuo(){
this.isActive = !this.isActive;
this.isError = !this.isError;
}
},
};
//创建一个vue应用
const app = Vue.createApp(Root);
//全局挂载组件
app.component("my-component",myComponent);
//挂载
const mv = app.mount("#app");
</script>
</body>
</html>
条件渲染
-
v-if
-
v-else
-
v-else-if
-
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-template</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h1 v-show="ok">Hello!</h1>
</div>
<script>
const Root = {
data() {
return {
type: "D",
ok: true,
}
},
};
//创建一个vue应用
const app = Vue.createApp(Root);
//挂载
const mv = app.mount("#app");
</script>
</body>
</html>
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-template</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 数组遍历 -->
<div>
<ul id="array-rendering">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
<!-- 参数index -->
<div>
<ul id="array-with-index">
<li v-for="(item, index) of items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</div>
<!-- 对象 -->
<div>
<ul id="v-for-object" class="demo">
<li v-for="(value,name,index) in myObject">
{{ index + 1 }} - {{ name }} - {{ value }}
</li>
</ul>
</div>
<!-- 整数 -->
<div id="range" class="demo">
<span v-for="(n,index) in 10" :key="n">{{ n }}{{ index }} </span>
</div>
<!-- 绑定一个key key一般不使用index 一般使用id或者唯一的 都没有情况下使用index -->
<template v-for="todo in todos" :key="todo.name">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
</div>
<script>
const Root = {
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }],
parentMessage: 'Parent',
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
todos:[{
name:"电脑",
isComplete: false,
},
{
name:"手机",
isComplete:true,
}]
}
},
};
//创建一个vue应用
const app = Vue.createApp(Root);
//挂载
const mv = app.mount("#app");
</script>
</body>
</html>
v-for 与 v-if 一同使用时，当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量：
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-template</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 监听事件 -->
<div id="basic-event">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<!-- 事件处理方法 -->
<div id="event-with-method">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">Greet</button>
</div>
<!-- 内联处理器中的方法 -->
<div id="inline-handler">
<button @click="say('hi',$event)">Say hi</button>
<button @click="say('what',$event)">Say what</button>
</div>
<!-- 多事件处理器 -->
<div>
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
Submit
</button>
</div>
<!-- 事件修饰符 -->
<div>
<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit">
<input type="text" v-model="username" name="username" placeholder="请输入用户名" />
<input type="password" v-model="password" name="password" placeholder="请输入密码" />
<input type="submit" value="提交" />
</form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>
</div>
<!-- 按键修饰符 -->
<div>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
</div>
</div>
<script>
const Root = {
data() {
return {
counter: 0,
name: 'Vue.js',
username: "",
password: ""
}
},
methods: {
greet(event) {
// `methods` 内部的 `this` 指向当前活动实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
},
say(message,event) {
alert(message);
alert(event.target.tagName);
},
one(evnt){
alert("one")
},
two(){
alert("two")
},
onSubmit(){
console.log(this.username);
console.log(this.password);
}
}
};
//创建一个vue应用
const app = Vue.createApp(Root);
//挂载
const mv = app.mount("#app");
</script>
</body>
</html>
按键修饰符
按键别名
-
.enter
-
.tab
-
.delete (捕获“删除”和“退格”键)
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
系统修饰键
-
.ctrl
-
.alt
-
.shift
-
.meta
鼠标按钮修饰符
-
.left
-
.right
-
.middle
表单输入绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-template</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 文本 -->
<div>
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div>
<!-- 多行文本 -->
<div>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<!-- 复选框 -->
<div>
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
</div>
<!-- 多个复选框绑定一个数组上 -->
<div id="v-model-multiple-checkboxes">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
<!-- 单选框 绑定的是value -->
<div id="v-model-radiobutton">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
<!-- 选择框 绑定的是value -->
<div id="v-model-select" class="demo">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<div id="v-model-select" class="demo">
<select v-model="selected" multiple>
<option disabled value="">Please select one</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<!-- 动态for渲染 -->
<div id="v-model-select-dynamic" class="demo">
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<!-- 修饰符 -->
<div>
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />{{ msg }}<br>
<input v-model.number="age" type="text" />{{ age }}<br>
<input v-model.trim="msg" />{{ msg }}<br>
</div>
</div>
<script>
const Root = {
data() {
return {
message: "",
checked: true,
checkedNames:[],
picked:"",
selected:"",
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
age: "" ,
msg:""
}
},
};
//创建一个vue应用
const app = Vue.createApp(Root);
//挂载
const mv = app.mount("#app");
</script>
</body>
</html>
修饰符
-
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步
-
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
-
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
你知道的越多 你不知道的越多 嘿 我是小博 带你一起看我目之所及的世界......
作者介绍
小博
V1