Inhaltsverzeichnis
1. Einführung in Vue2
1.1, was ist Vue?
Offizielles Konzept: Vue (ausgesprochen /vjuː/, ähnlich wie view) ist ein Front-End-Framework zum Erstellen von Benutzeroberflächen.
1.2, erste Sicht
- M: Modelldaten (Modelldaten), die den Daten entsprechen
- V: Ansicht (Ansicht) Vorlage==>Seite
- VM: ViewModel (Ansichtsmodell) Vue-Instanzobjekt
1.3. Erstellen Sie eine Vue-Umgebung
Es gibt viele Möglichkeiten, eine Vue-Umgebung aufzubauen:
- Verwenden Sie CDN
- Laden Sie die JavaScript-Datei herunter und hosten Sie sie selbst
- Mit npm installieren
- Verwenden Sie die offizielle CLI, um das Projekt zu erstellen
Für unser erstes Lernen verwenden wir die Methode, js selbst herunterzuladen.
1.4, die erste Hallo Welt
<!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>vue2</title>
</head>
<body>
<div id="app">
{
{message}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data: {
// 用于储存数据，数据供el指定的容器使用
message: 'Hello world!',
},
});
</script>
</html>
Beachten
- Eine Vue-Instanz kann nur einen Container übernehmen
- Interpolationssyntax: { {}} kann alle Attribute in Daten lesen
- Wenn sich die Daten in Daten ändern, werden die im Container verwendeten Daten automatisch aktualisiert.
- Wenn wir Daten schreiben, schreiben wir sie normalerweise als Funktion. Der Code lautet wie folgt:
data(){
return {
message: 'Hello world!',
}
}
Interviewfrage:
Warum sollten Daten als Funktion geschrieben werden?
Der Grund, warum das Datenattribut in Vue nicht im Format eines Objekts geschrieben werden kann, liegt darin, dass das Objekt eine Referenz auf die Adresse ist und nicht unabhängig existiert. Wenn eine .vue-Datei über mehrere Unterkomponenten verfügt, die gemeinsam eine Variable empfangen, wirkt sich die Änderung des Werts der Variablen in einer der Unterkomponenten auf die Werte der Variablen in anderen Komponenten aus. Wenn sie als Funktionen geschrieben sind, enthalten sie das Konzept des Gültigkeitsbereichs, sind voneinander getrennt und werden nicht beeinflusst.
2. Grundkenntnisse
2.1 Anleitung
Was ist eine Richtlinie?
Vue bietet einige praktischere Operationen für Seite + Daten. Diese Operationen werden als Anweisungen bezeichnet.
Verwenden Sie dies beispielsweise in einer HTML-Seite
<div v-xxx=''></div>
In Vue ist v-xxx die Anweisung von Vue. Die Anweisung verwendet Daten, um das DOM-Verhalten zu steuern und DOM-Operationen zu vereinfachen.
Was sind die am häufigsten verwendeten Befehle und wie werden sie verwendet?
- V-Text kann keine HTML-Tags analysieren
- v-html kann HTML-Tags analysieren
- v-if führt Operationen zum Einfügen (Anhängen) und Entfernen (Entfernen) von Elementen durch
- v-sonst-wenn
- v-sonst
- Umschalten zwischen v-show display:none und display:block
- v-für Array-Element, Indexobjektwert, Schlüssel, Index
2.2-1 Befehls-V-Text
<!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>vue2</title>
</head>
<body>
<div id="app">
<div v-text="showText"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
showText:'<h1>vue</h1>',
}
},
})
</script>
</html>
2.2-2 Befehl v-html
<!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>vue2</title>
</head>
<body>
<div id="app">
<div v-html="showHtml"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
showHtml:'<h1>vue</h1>',
}
},
})
</script>
</html>
2.2-3 Anweisung v-if
Die v-if-Direktive wird als bedingte Rendering-Direktive bezeichnet, die Elemente basierend darauf einfügt und löscht, ob ein Ausdruck wahr oder falsch ist.
<!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>vue2</title>
</head>
<body>
<div id="app">
<h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
isIf:true,
}
},
})
</script>
</html>
2.2-4 Befehl v-else
Die v-else-Direktive fügt der v-if-Direktive einen „else-Block“ hinzu. Das v-else-Element muss unmittelbar auf das v-if-Element folgen.
<!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>vue2</title>
</head>
<body>
<div id="app">
<h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
<h1 v-else="isIf">我是isIf为false时显示</h1>
<!-- v-if不成立时，才会显示 -->
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
isIf:false,
}
},
})
</script>
</html>
2.2-5 Befehl v-show
Der Befehl v-show steuert das Ein- und Ausblenden eines Elements
<!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>vue2</title>
</head>
<body>
<div id="app">
<h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
// 表达式为真元素显示
isShow:true,
}
},
})
</script>
</html>
2.2-6 Unterschiede zwischen dem Befehl v-if und dem Befehl v-show
Drücken Sie die Taste F12, um die Konsole zur Ansicht zu öffnen
- Wenn die v-if-Direktive die Bedingungen erfüllt, wird sie in HTML gerendert. Wenn die Bedingungen nicht erfüllt sind, wird sie nicht gerendert.
- Elemente, die die v-show-Direktive verwenden, werden immer in HTML gerendert
- Legen Sie einfach das CSS-Stilattribut für das Element fest. Wenn Elemente, die die Bedingungen nicht erfüllen, auf style="display:none" gesetzt werden
Der Unterschied zwischen Anwendungsszenarien
- Die V-IF-Anweisung hat einen höheren Wechselaufwand. Wenn die Bedingung der V-IF-Anweisung wahr ist, wird das Element hinzugefügt. Wenn sie nicht wahr ist, wird das DOM entfernt und die internen Anweisungen werden nicht ausgeführt.
- Der Befehl „v-show“ hat einen höheren anfänglichen Renderingaufwand, da „v-show“ nur ein einfaches Verstecken und Anzeigen ist
2.2-7 Befehl v-on
Die v-on-Direktive bindet Ereignis-Listener an HTML-Elemente
v-on：事件名称 ="函数名称() "
简写形式 @事件名称 ="函数名称()"
<!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>vue2</title>
</head>
<body>
<div id="app">
{
{message}}<br>
<button @click="fun1">点击1</button>
<button @dblclick="fun2">双击2</button>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
message: 'Hello world!',
}
},
methods:{
// 声明了一个叫fun1的方法
fun1(){
// 怎么在方法中使用data对象的变量,需要使用this
console.log("button1被点击了",this.message);
this.isShow=false
if(this.isIf){
this.isIf=false
}else{
this.isIf=true
}
},
fun2(){
console.log("button2被双击了");
},
}
})
</script>
</html>
2.2-8 Befehl v-bind
Die v-bind-Direktive kann nach ihrem Namen einen Parameter annehmen. Der Parameter ist normalerweise ein Attribut des HTML-Elements.
v-bind:属性名 ="表达式"
简写形式 :属性名 ="表达式"
<!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>vue2</title>
</head>
<body>
<div id="app">
<div>
<img v-bind:src="img1url" width="300px" height="100px" alt="">
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
img1url:'../img/banner1.jpg',
}
},
})
</script>
</html>
2.2-9 Befehls-V-Modell
Die V-Model-Direktive kann problemlos eine bidirektionale Bindung zwischen Formulareingabe und Anwendungsstatus implementieren.
<!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>vue2</title>
</head>
<body>
<div id="app">
<form action="">
<!-- 双向数据绑定是表单元素进行绑定 -->
<input type="text" name="personNmae" v-model="person.name">
<input type="text" name="age" v-model="person.age">
<select name="love" v-model="person.love">
<option value="eat">吃</option>
<option value="drick">喝</option>
</select>
<input type="radio" v-model="person.sex" name="sex" value="1">男
<input type="radio" v-model="person.sex" name="sex" value="2">女
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
person:{
name:'王琪',
age:18,
love:'eat',
sex:1,
},
}
},
})
</script>
</html>
2.2-10 Befehl v-for
Die v-for-Anweisung kann die Daten in Daten durchlaufen und die Daten auf der Seite anzeigen
<!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>vue2</title>
</head>
<body>
<div id="app">
<form action="">
<div>
<select v-model="shabi1" name="" id="">
<option v-for="(item, index) in shabi" >{
{item}}</option>
</select>
</div>
<div v-for="(attr,key) in person">
{
{key}}-{
{attr}}
</div>
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
person:{
name:'王导',
age:18,
love:'eat',
sex:1,
},
shabi:["小豪","王导","光头"],
shabi1:"小豪",
}
},
})
</script>
</html>
3. Ereignisbindung
Ereignisbindung v-on: Ereignisname = „Ausdruck || Funktionsname“ Abkürzung @Ereignisname = „Ausdruck || Funktionsname“ Der
Ereignisname kann nativ oder benutzerdefiniert sein. Beachten Sie, dass die Definition der Funktion ebenfalls in Vue unter Verwendung des Methodenattributs erfolgen muss.
3.1. Rufen Sie das Ereignisobjekt in der dem Ereignis entsprechenden Methode ab
Klammern hinzufügen. Das Hinzufügen von Klammern erfolgt normalerweise, wenn zusätzliche Parameter erforderlich sind.
<!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>vue2</title>
</head>
<body>
<div id="app">
<form action="">
<div>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr v-for="(stu,index) in person.studentArray">
<td>{
{index+1}}</td>
<td>{
{stu.name}}</td>
<td>{
{stu.age}}</td>
<td><button type="button" @click="fun1($event,stu.name)">修改</button></td>
</tr>
</table>
</div>
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
person:{
studentArray:[
{
name:"小豪",age:"18"},
{
name:"导哥",age:"20"}
],
},
}
},
methods:{
// 声明了一个叫fun1的方法
fun1(event,name){
console.log("事件对象",event);
console.log(name);
},
}
})
</script>
</html>
3.1, Ereignismodifikator – Blasenbildung verhindern
Szenario, in dem es zu Blasenbildung kommt: Das untergeordnete Element und das übergeordnete Element sind an dasselbe Ereignis gebunden, und dann wird auf das untergeordnete Element geklickt, und das übergeordnete Element löst ebenfalls das Ereignis aus.
Verwenden Sie natives JS, um Blasenbildung zu verhindern
<!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>vue2</title>
</head>
<body>
<div id="app">
<div @click="fun3">
外层div
<div @click="fun3">里层div</div>
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun3(event){
console.log("sss");
event.stopPropagation(); // 使用原生js阻止冒泡
},
}
})
</script>
</html>
Verwenden Sie Vue-Ereignismodifikatoren, um Blasenbildung zu verhindern
<!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>vue2</title>
</head>
<body>
<div id="app">
<div @click="fun3">
外层div
<div @click.stop="fun3">里层div</div>
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun3(event){
console.log("sss");
// event.stopPropagation(); // 使用原生js阻止冒泡
},
}
})
</script>
</html>
3.2, Ereignismodifikator verhindert Standardverhalten
Einige Tags verfügen über Standardverhalten, z. B. das Tag a, das über einen standardmäßigen Seitensprung verfügt.
Verhindern Sie Standardverhalten mit nativem JS
<!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>vue2</title>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun5">百度</a>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun5(event){
alert("不可跳转！")
event.preventDefault(); // 使用原生js阻止默认行为
},
}
})
</script>
</html>
Verwenden Sie den Ereignismodifikator von vue, um Standardverhalten zu verhindern
<!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>vue2</title>
</head>
<body>
<div id="app">
<a href.prevent="http://www.baidu.com" @click="fun5">百度</a>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun5(event){
alert("不可跳转！")
// event.preventDefault(); // 使用原生js阻止默认行为
},
}
})
</script>
</html>
3.3, ein Ereignis
Dieses Ereignis wird nur einmal ausgeführt und der zweite Klick ist ungültig.
<!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>vue2</title>
</head>
<body>
<div id="app">
<div @click.once="fun7">一次事件</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
fun7(event){
console.log("sss");
},
}
})
</script>
</html>
3.3, Tastaturereignismodifikator
Tastaturereignismodifizierer, hauptsächlich Filter, die bei der Eingabe bestimmter Zeichen ausgelöst werden.
<!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>vue2</title>
</head>
<body>
<div id="app">
<!-- 13表示是输入enter，起的keycode值可以查询 -->
<input type="text" @keyup.13="change">
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
methods:{
change(event){
console.log(event.key,event.keyCode);
}
}
})
</script>
</html>
4. Vue-Filter
Filter bedeutet, dass Vue.js das Hinzufügen eines Pipe-Zeichens „(|)“ am Ende der {{}}-Interpolation unterstützt, um die Daten zu filtern. Es wird häufig zum Formatieren von Text verwendet, z. B. zur Großschreibung von Buchstaben oder zur Verwendung von Tausenderstellen in Währungen , und Komma-Trennung. Warten
Beispiel
<!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>vue2</title>
</head>
<body>
<div id="app">
{
{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
times: 1690944730436,
}
},
// 2. 定义过滤器
filters: {
//3.定义一个处理函数，参数value为要处理数据,format为传入参数
conversion: function (value, format) {
//这个转换方法就不介绍了，看看就行，过滤器用法为主
var date = new Date(value);
function addZero(date) {
if (date < 10) {
return "0" + date;
}
return date;
}
let getTime = {
yyyy: date.getFullYear(),
yy: date.getFullYear() % 100,
MM: addZero(date.getMonth() + 1),
M: date.getMonth() + 1,
dd: addZero(date.getDate()),
d: date.getDate(),
HH: addZero(date.getHours()),
H: date.getHours(),
hh: addZero(date.getHours() % 12),
h: date.getHours() % 12,
mm: addZero(date.getMinutes()),
m: date.getMinutes(),
ss: addZero(date.getSeconds()),
s: date.getSeconds(),
w: (function () {
let a = ["日", "一", "二", "三", "四", "五", "六"];
return a[date.getDay()];
})(),
};
for (let i in getTime) {
format = format.replace(i, getTime[i]);
}
return format;
},
//4.再定义一个过滤器，给数据前加上"时间为："这几个字
againChange: function (value) {
return "时间为：" + value;
},
},
})
</script>
</html>
5. Dynamische Bindung des Klassenstils in Vue
5.1, String-Schreibmethode
- Szenen, die verwendet werden sollen
- Undefinierter Stiltyp
- Stiländerungen manuell auslösen
- Beachten Sie, dass
die Zeichenfolge die vorhandenen Attribute in den Vue-Instanzdaten verwendet
<!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>vue2</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
<div :class="myclass">你好vue</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
myclass:'yangshi yanse',
}
},
})
</script>
</html>
5.1, Objektschreibmethode
- Szenen, die verwendet werden sollen
- Die Anzahl der Stile und Klassennamen wird bestimmt und ob sie dynamisch über Boolean angezeigt werden
- Objekt im Inline-Stil geschrieben
<!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>vue2</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
<div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
isyangshi:true,
isyanse:true,
}
},
})
</script>
</html>
5.1, Array-Schreibmethode
- Szenen, die verwendet werden sollen
- Die Anzahl der Stile, die gebunden werden müssen, ist ungewiss, und auch der Klassenname ist ungewiss.
<!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>vue2</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
<div :class="myclassObject">你好</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
myclassObject:['yangshi','yanse']
}
},
})
</script>
</html>
6. Vollständiger Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.yangshi{
font-size: 50px;
}
.yanse{
color: aquamarine;
}
</style>
<body>
<div id="app">
{
{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}}
<div :class="myclass">你好</div>
<div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div>
<div :class="myclassObject">你好</div>
<div v-html="showHtml"></div>
<h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
<h1 v-else>我是isIf为false时显示</h1>
<h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1>
<button @click="fun1">点击1</button>
<button @dblclick="fun2">点击2</button>
<div>
<img v-bind:src="img1url" width="300px" height="100px" alt="">
</div>
<div>
<form action="">
<!-- 双向数据绑定是表单元素进行绑定 -->
<input type="text" name="personNmae" v-model="person.name">
<input type="text" name="age" v-model="person.age">
<select name="love" v-model="person.love">
<option value="eat">吃</option>
<option value="drick">喝</option>
</select>
<input type="radio" v-model="person.sex" name="sex" value="1">男
<input type="radio" v-model="person.sex" name="sex" value="2">女
<div>
<select v-model="shabi1" name="" id="">
<option v-for="(item, index) in shabi" >{
{item}}</option>
</select>
</div>
<div v-for="(attr,key) in person">
{
{key}}-{
{attr}}
</div>
<div>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr v-for="(stu,index) in studentArray">
<td>{
{index+1}}</td>
<td>{
{stu.name}}</td>
<td>{
{stu.age}}</td>
<td><button type="button" @click="fun3($event,stu.name)">修改</button></td>
</tr>
</table>
</div>
</form>
</div>
<div>
<div @click="fun4">
外层div
<div @click.stop="fun4">里层div</div>
</div>
</div>
<div>
<a href="http://www.baidu.com" @click.prevent="fun5">百度</a>
</div>
<div>
<div @click.once="fun6">一次事件</div>
</div>
<div>
<!-- 13表示是输入enter，起的keycode值可以查询 -->
<input type="text" @keyup.13="change">
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app = new Vue({
el:"#app", // 绑定一个元素
data(){
return {
name:'小豪老放屁！！',
isIf:true,
isShow:true,
img1url:'../img/banner1.jpg',
person:{
name:'王导',
age:18,
love:'eat',
sex:1,
},
showHtml:'<h1>王导</h1>',
shabi:["小豪","王导","光头"],
shabi1:"小豪",
studentArray:[
{
name:"光头",age:"18"},
{
name:"王导",age:"20"}
],
times: 1690944730436,
myclass:'yangshi yanse',
isyangshi:true,
isyanse:true,
myclassObject:['yangshi','yanse']
}
},
methods:{
// 声明了一个叫fun1的方法
fun1(){
// 怎么在方法中使用data对象的变量,需要使用this
console.log("button1被点击了",this.name);
this.isShow=false
if(this.isIf){
this.isIf=false
}else{
this.isIf=true
}
},
fun2(){
console.log("button2被双击了");
},
fun3(event,name){
console.log("事件对象",event);
console.log(name);
},
fun4(event){
console.log("111");
// elent.stopPropagation(); // 使用原生js阻止冒泡
},
fun5(event){
alert("111");
// elent.preventDefault(); // 使用原生js阻止默认行为
},
fun6(){
console.log("sss");
},
change(event){
console.log(event.key,event.keyCode);
}
},
// 2. 定义过滤器
filters: {
//3.定义一个处理函数，参数value为要处理数据,format为传入参数
conversion: function (value, format) {
//这个转换方法就不介绍了，看看就行，过滤器用法为主
var date = new Date(value);
function addZero(date) {
if (date < 10) {
return "0" + date;
}
return date;
}
let getTime = {
yyyy: date.getFullYear(),
yy: date.getFullYear() % 100,
MM: addZero(date.getMonth() + 1),
M: date.getMonth() + 1,
dd: addZero(date.getDate()),
d: date.getDate(),
HH: addZero(date.getHours()),
H: date.getHours(),
hh: addZero(date.getHours() % 12),
h: date.getHours() % 12,
mm: addZero(date.getMinutes()),
m: date.getMinutes(),
ss: addZero(date.getSeconds()),
s: date.getSeconds(),
w: (function () {
let a = ["日", "一", "二", "三", "四", "五", "六"];
return a[date.getDay()];
})(),
};
for (let i in getTime) {
format = format.replace(i, getTime[i]);
}
return format;
},
//4.再定义一个过滤器，给数据前加上"时间为："这几个字
againChange: function (value) {
return "时间为：" + value;
},
},
})
</script>
</html>
zu guter Letzt
送大家一句话：穷且益坚，不坠青云之志