1. Grundlegende Anwendung
Fall: Adresse dynamisch an eine Verbindung binden, einfaches Beispiel: dynamischer Attributwert, fortgeschrittenerer Fall: Klicken Sie auf die Schaltfläche, um die Linkadresse zu wechseln
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本应用</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="link" target="_blank">大力出奇迹</a>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
link:
'https://www.baidu.com'
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
Operationsergebnis:
2. Syntaktischer Zucker
Syntaktischer Zucker ist die von Vue bereitgestellte vereinfachte Schreibmethode. Für V-Bind kann es direkt sein: Attribut
<a v-bind:href="link" target="_blank">大力出奇迹</a>
3. Bindungsklasse
In der Praxis wird es auch viele CSS-Klassen geben, die Skriptoperationen zum Markieren verwenden. Ähnlich wie .addclass( in jQuery, das jeder zuvor gelernt hat, gibt es auch Klassenoperationen in Vue. Fall: einzelne CSS-Klasse, die durch V-Bind gebunden ist,
mehrere CSS-Klassen
4. Bindungsstil
Wir können auch v-bind: style verwenden, um einige CSS-Inline-Stile zu binden
. Objektformsyntax: styler {Attributname: Attributwert, Attributname
: Attributwert}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定class类</title>
<style>
.xx {
width: 100px;
height: 100px;
background-color: darkcyan;
}
.ww {
border-radius: 10px;
}
</style>
</head>
<body>
<div id="app">
<!-- 单个css-->
<div :class="xxclass"></div>
<div :class="{xx:true}"></div>
<!-- 多个-->
<div :class="{xx:true,ww:true}"></div>
<!-- 定义成方法-->
<div :class="classMethodTest()"></div>
</div>
</body>
</html>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
xxclass: 'xx',
wwclass: 'ww'
})
const classMethodTest = () =>{
return {
xx:true,ww:true}
}
//定义的数据和方法都需要return返回
return {
...toRefs(data).classMethodTest}
}
}).mount('#app')
</script>
5. Berechnete Eigenschaften
1. Was ist ein berechnetes Attribut?
Berechnetes Attribut: Es kann als Attribut verstanden werden, in das eine Berechnungslogik geschrieben werden kann.
Funktion: 1. Reduzieren Sie die Berechnungslogik in der Vorlage.
2. Daten-Caching. Wenn sich unsere Daten nicht geändert haben, wird der Berechnungsprozess nicht mehr durchgeführt.
3. Verlassen Sie sich auf einen festen Datentyp (responsive Daten) und können keine globalen Daten sein, die normalerweise übergeben werden. 2.
Berechnete Attribute und Methodenwerte
werden nicht direkt auf der Seite gerendert, sondern auch in Suanran berechnet Seite nach der Berechnung. Sie können das Berechnungsattribut
1 verwenden. Die Methode in Methoden wird in der Vorlage aufgerufen. Wenn diese Methode von Daten abhängt und sich der Wert der Daten ändert, wird diese Methode erneut ausgeführt; berechnete Attribute verfügen ebenfalls über diese Funktion . Stellen Sie sicher, dass die Daten in data mit den auf der Seite angezeigten Daten übereinstimmen!
2. Das durch das berechnete Attribut berechnete Ergebnis wird beim nächsten Mal zwischengespeichert und ohne Berechnung direkt angezeigt, die Methode jedoch nicht und wird bei jedem Aufruf erneut ausgeführt.
3. Ändern Sie den Wert der berechneten Eigenschaft.
Ändern Sie direkt den Wert der berechneten Eigenschaft und melden Sie einen Fehler. Die berechnete Eigenschaft „num2“ wurde zugewiesen, hat aber keinen Setter. Definieren Sie die Get- und Set-Methoden in „Computed“ und ändern Sie den Wert in die berechnete Eigenschaft 4.
Konfiguration der berechneten Eigenschaft
1.get(): Muss geschrieben werden, diese Funktion akzeptiert keine Parameter
2. Wann wird get() aufgerufen?: Wenn die berechnete Eigenschaft zum ersten Mal gelesen wird oder die Daten, auf denen die Die berechnete Eigenschaft hängt von Änderungen ab. Die Getter-Funktion hat einen Rückgabewert. Der Rückgabewert ist der Wert der berechneten Eigenschaft.
3.set(): optional, akzeptiert einen optionalen Parameter (den Wert, nachdem die berechnete Eigenschaft geändert wurde).
4. Wann wird festgelegt () aufgerufen?: Wenn die berechnete Eigenschaft geändert wird
. 5. Das in get() und set() angezeigte This wird aufgerufen,
<template>
<div class="compute">
<p>修改计算属性的值</p>
<h4>num: <span v-text="num"></span></h4>
<h4>计算属性num2: <span v-text="num2"></span> </h4>
<button class="btn" @click="change">改变计算属性的值</button>
</div>
</template>
<script>
export default {
name:'compute',
data(){
return{
num:100
}
},
computed:{
// num2不是函数
num2:{
// 当计算属性要修改时先触发set方法
// 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法
get:function(){
return this.num*2-10
},
set:function(val){
this.num = val;
console.log('val',val)
}
}
},
methods:{
change(){
// 直接修改计算属性的值报错，Computed property "num2" was assigned to but it has no setter.
this.num2=60;
}
}
}
</script>
<style lang="less" scoped>
.compute{
.btn{
width: 130px;
height: 37px;
background: #fff;
border-style: none;
border: 1px solid #333;
border-radius: 4px;
&:hover{
background: #42c5e6;
color: #fff;
}
}
}
</style>
<!-- <ul>
<li v-for="item in users.filter(u=>u.gender=='male')">
{
{item}}
</li>
</ul> -->
<button @click="gender='male'">男生</button>
<button @click="gender='female'">女生</button>
<ul>
<li v-for="item in userFilter">
{
{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello world",
users:[
{id:1,name:"terry",gender:"male"},
{id:2,name:"larry",gender:"male"},
{id:3,name:"vicky",gender:"female"},
{id:4,name:"lucy",gender:"female"},
{id:5,name:"tom",gender:"male"},
],
//默认值，默认情况显示男生
gender:"male"
},
//computed是一个计算属性，调用里面的方法不用加过好，直接用reverseMessage
computed:{
reverseMessage(){
console.log("computed-reverseMessage"+Math.random())
return this.message.split("").reverse().join("")
},
//过滤
//u=>u.gender===this.gender 箭头函数
userFilter(){
//当this.users以及this.gender发生变化的时候，计算属性会重新执行计算出新的结果然后渲染到页面中。
return this.users.filter(u=>u.gender===this.gender)
}
},
created(){
setTimeout(()=>{
this.message += "hello world"
},2000)
},
methods:{
reverseMsg(){
console.log("methods-reverseMsg"+Math.random())
return this.message.split("").reverse().join("")
}
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{
{chineseName.length > 0 ? "有中文名":"没有"}}
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
chineseName:["李小屁","小鬼"]
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
Beispiel-Screenshot:
Wenn jedoch zu viel Logik in die Vorlage geschrieben wird, wird die Vorlage aufgebläht und schwer zu pflegen, sodass wir die Methode „computed()“ des berechneten Attributs verwenden können, um komplexe Logik zu beschreiben, die vom Reaktionszustand abhängt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{
{c}}
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs,computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
chineseName: ["李小屁", "小鬼"]
})
const c = computed(() =>
data.chineseName.length > 0 ? '有名字' : '没名字');
//定义的数据和方法都需要return返回
return {
...toRefs(data), c}
}
}).mount('#app');
</script>
Beispiel:
Beim Schreiben sind die meisten Entwickler also eher mit dem vertrauten Schreiben von Methoden vertraut. Was ist also der Unterschied zwischen dem Schreiben von Methoden und berechneten Eigenschaften?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{
{c}}
{
{m()}}
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs,computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
chineseName: ["李小屁", "小鬼"]
})
const c = computed(() =>
data.chineseName.length > 0 ? '有名字' : '没名字');
//普通方法
const m = () => {
return data.chineseName.length > 0 ?'有名字':'没名字'
}
//定义的数据和方法都需要return返回
return {
...toRefs(data), c,m}
}
}).mount('#app');
</script>
Der Unterschied zwischen berechneten Eigenschaften und Methoden
1: Berechnete Eigenschaften sind im Wesentlichen Methoden, die Getter und Setter enthalten.
Wenn Sie eine berechnete Eigenschaft abrufen, rufen Sie tatsächlich die Getter-Methode der berechneten Eigenschaft auf. Vue sammelt die Abhängigkeiten der berechneten Eigenschaft und speichert das Rückgabeergebnis der berechneten Eigenschaft zwischen. Nur wenn sich die Abhängigkeit ändert, wird eine Neuberechnung durchgeführt.
2. Die Methode wird nicht zwischengespeichert und jeder Methodenaufruf führt zu einer erneuten Ausführung.
3. Die Getter- und Setter-Parameter der berechneten Eigenschaft sind fest, der Getter hat keine Parameter, der Setter hat nur einen Parameter und die Parameter der Methode sind nicht begrenzt.
4. Aufgrund der oben genannten Unterschiede werden berechnete Attribute normalerweise verwendet, um andere Daten basierend auf vorhandenen Daten abzurufen. Es wird nicht empfohlen, beim Abrufen von Daten asynchrone, aktuelle Zeit-, Zufallszahlen- und andere Nebeneffektoperationen zu verwenden.
5. Tatsächlich ist der wichtigste Unterschied zwischen ihnen der Unterschied in der Bedeutung. Ein berechnetes Attribut ist auch ein Datenwert, der gelesen oder einem Wert zugewiesen werden kann. Eine Methode ist eine Operation in der Bedeutung, um einige Dinge zu verarbeiten.
6. Verwendung von v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<button v-on:click="sub">-</button>
{
{i}}
<button v-on:click="add">+</button>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
i:0
})
const add = () => {
data.i++
}
const sub = () => {
data.i--
}
//定义的数据和方法都需要return返回
return {
...toRefs(data),add,sub}
}
}).mount('#app')
</script>
Beispiel:
7. Parameterübergabe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>参数传递</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<button v-on:click="sub(10)">-</button>
{
{i}}
<button v-on:click="add(10,$event)">+</button>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
i:0
})
const add = (num,e) => {
console.log(e)
data.i += num
}
const sub = (num) => {
data.i -= num
}
//定义的数据和方法都需要return返回
return {
...toRefs(data),add,sub}
}
}).mount('#app')
</script>
Beispiel:
8. Die Verwendung von v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<div>
<h2 v-if="score>90">优秀</h2>
<h2 v-else-if="score>70">及格</h2>
<h2 v-else>不及格</h2>
</div>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
score: 91
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
Beispiel:
10.v-show
v-show hat auch die Funktion der Beurteilung, aber v-if ist eine echte Beurteilung. Wenn die Bedingung fehlschlägt, wird die Beschriftung beim Rendern nicht angezeigt. v-show beurteilt, ob sie anhand des Stils angezeigt werden soll. Wenn die Beurteilung fehlschlägt, fügt CSS display:none zur Beschriftung hinzu
<h2 v-show="score>80">{
{message}}</h2>
11. Verwendung von v-for
Objekte durchqueren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<!-- 普通获取-->
<span>{
{student.name}}</span>
<!-- 循环-->
<span v-for="(item,key) in student">{
{key}}-{
{item}}</span><br>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
student:{
name:'张三',
age: 23,
hobbies:'抽烟喝酒烫头'
}
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
Beispiel:
Objekte durchqueren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for遍历数组</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<!-- 循环-->
<span v-for="(item,key) in student">{
{key}}-{
{item}}</span><br>
</div>
</body>
</html>
<script type="text/javascript">
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs, computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
student:['jack','tom','李小屁']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
Beispiel:
Beispiel für eine 12-V-Bindung
Die Rolle von v-bind besteht darin, Daten und Elementattribute zu binden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind示例</title>
<style>
.checkDiv {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: aqua;
}
</style>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<div class="checkDiv" v-bind:style="{width:w+'px',height:h+'px'}" v-on:click="checkDiv()"></div>
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
const data = reactive({
w: 50,
h: 50
})
//方法
const checkDiv = () => {
data.w += 10,
data.h += 10
}
const getStyle = () => {
return{
width:data.w+'px',height:data.h+'px'}
}
//定义的数据和方法都需要return返回
return {
...toRefs(data),checkDiv,getStyle}
}
}).mount('#app')
</script>
Hinweis:
Auf v-bind folgt: Attributname =. Mein Verständnis besteht darin, dieses Attribut zu binden. Nach der Bindung sollte der entsprechende Wert in den Daten von vue gefunden werden. Natürlich kann er auch einer Konstante entsprechen Es besteht keine Notwendigkeit, zu den Daten zu gehen. gefunden.
Wenn wir die URL in der Konsole ändern, ändert sich auch die entsprechende.
Ebenso können wir auch das Attribut image src und die Klasse des Hyperlinks binden
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
class:"btn btn-default"
}
});
<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
13 Ein-Tasten-Radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<!-- 男<input name="sex" type="radio" value="男" checked="sex=='男">-->
<!-- 女<input name="sex" type="radio" value="女" checked="sex=='女">-->
<!-- 男<input name="sex" type="radio" value="男" v-model="sex">-->
<!-- 女<input name="sex" type="radio" value="女" v-model="sex">-->
男<input name="sex" type="radio" value="0" v-model="sex">
女<input name="sex" type="radio" value="1" v-model="sex">
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
sex:1
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
14 Kontrollkästchen-Stile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<!-- 单选框-->
<lable for="argee">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</lable>
<button :disabled="!isAgree">下一步</button>
<br>
<!-- 复选框-->
<input name="hobbies" type="checkbox" value="抽烟" v-model="hobbies">抽烟
<input name="hobbies" type="checkbox" value="喝酒" v-model="hobbies">喝酒
<input name="hobbies" type="checkbox" value="烫头" v-model="hobbies">烫头
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
isAgree : false,
hobbies: ['抽烟','烫头']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
15 Dropdown-Liste
Dropdown-Liste: Tag auswählen
Verwendungsszenario: Wenn Benutzer auf einer Seite mehrere Optionen zur Auswahl haben, kann die Verwendung der durch das Select-Tag definierten Dropdown-Liste effektiv Platz sparen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<select name="f" v-model="fruit" multiple="multiple">
<option value="苹果">苹果</option>
<option value="哈密瓜">哈密瓜</option>
<option value="草莓">草莓</option>
<option value="车厘子">车厘子</option>
<option value="榴莲">榴莲</option>
</select>
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
fruit:['车厘子']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
Beispiel:
16 Dropdown-Liste mit Mehrfachauswahl
1. Dropdown-Liste für Mehrfachauswahl
1. Framework: ?
2. multiple="multiple" wird verwendet, um: Mehrfachauswahlen zu unterstützen.
Größe wird verwendet, um: die Anzahl der Elemente festzulegen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<span v-for="(item,index) in allFruits">
{
{item}}<input type="checkbox" :value="item" v-model="selectFruit">
</span>
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup(){
//定义的数据
const data = reactive({
allFruits:['香蕉','车厘子','榴莲','芒果','黄桃','荔枝'],
selectFruit:['榴莲','车厘子']
})
//定义的数据和方法都需要return返回
return {
...toRefs(data)}
}
}).mount('#app')
</script>
Beispiel:
Kontrollen
1. Dateisteuerung: speziell für das Hochladen von Dateien
2. versteckte Steuerung: verstecktes Feld, unsichtbar auf der Webseite, aber die Daten werden automatisch an den Server übermittelt, wenn das Formular übermittelt wird
3. schreibgeschützt und deaktiviert:
(1) Ähnlichkeiten: beides sind nur lesbar und können nicht geändert werden
(2) Unterschiede: schreibgeschützte Daten können an den Server übermittelt werden, deaktivierte Daten werden nicht übermittelt, auch wenn ein Namensattribut vorhanden ist, werden sie nicht übermittelt
4. Die maximale Länge des Eingabesteuerelements: Legen Sie die Anzahl der Zeichen fest, die in das Textfeld eingegeben werden können