Vue3

1.Vue簡介

1.Vue的特點

采用組件化模式，提高代碼復用率、且讓代碼更好維護，
宣告式編碼，讓編碼人員無需直接操作Dom,提高開發效率，
使用虛擬Dom+優秀的Diff演算法，盡量復用Dom節點，

2.入門案例

<!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>Document</title>
    <script src="https://www.cnblogs.com/yin-jihu/archive/2022/03/js/vue3.js"></script>
</head>
<body>
    <div id="counter">
        <h1> counter:{{ num }}</h1>
    </div>

    <script>
        // const Counter={
        //     data(){
        //         return{
        //             num:0
        //         }
        //     }
        // }

        const Counter={
            data:function(){
                return {
                    num:0
                }
            }
        }
        //創建一個應用，將配置的物件counter的內容渲染到選擇器#counter的元素上
        let app = Vue.createApp(Counter).mount("#counter")
        console.log(app)
    </script>
</body>
</html>

可以用 app.num = 10修改值

2.用 Vite來創建一個vue專案

使用 npm：

npm init vite-app vue3demo03  //vue3demo03 專案名稱
cd vue3demo03
npm install
npm run dev

創建好后生成：

3.Vue宣告式語法與資料雙向系結（v-model）

App.vue

<template>
  <img alt="Vue logo" src="https://img.uj5u.com/2022/03/16/304133160721093.png" />
  <!-- <HelloWorld msg="Hello Vue 3.0 + Vite" /> -->
  <h2 @click="changeMsg"> {{msg}}</h2>
  <!-- v-model來進行系結 -->
  <input type="text" v-model="msg"  />  
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

//命令式
//document.querySelector("h1").innerHTML="helloworld"

//宣告式
export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
  data(){
    return{
      msg:"helloword"
    }
  },
  methods:{
    changeMsg(){
    this.msg = "jihu,真帥"
    }
  }

}
</script>

運行結果：

改變輸入框的值，上面的值就會改變，這就是雙向系結

單擊后，會改變值

4.模板語法常用指令

插值

1.文本（v-once指令）

資料系結最常見的形式就是使用“Mustache” (雙大括號) 語法的文本插值：

<span>Message: {{ msg }}</span>

Mustache 標簽將會被替代為對應組件實體中 msg property 的值，無論何時，系結的組件實體上 msgproperty 發生了改變，插值處的內容都會更新，

通過使用 v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新，但請留心這會影響到該節點上的其它資料系結：

<span v-once>這個將不會改變: {{ msg }}</span>

<template>
  <img alt="Vue logo" src="https://img.uj5u.com/2022/03/16/304133160721093.png" />
  <!--雙括號語法 Mustache -->
  <h2 >{{msg}}</h2>
  <!-- v-once指令，使得內容只渲染一次 -->
  <h2 @click="changeMsg" v-once> {{msg}}</h2>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'

//宣告式
export default {
  name: 'App',
  data(){
    return{
      msg:"helloword"
    }
  },
  methods:{
    changeMsg(){
    this.msg = "jihu,真帥"
    }
  }

}
</script>

2.原始 HTML Attribute （v-html指令、v-bind指令）

<template>
  <img alt="Vue logo" src="https://img.uj5u.com/2022/03/16/304133160721093.png" />
  <!-- <HelloWorld msg="Hello Vue 3.0 + Vite" /> -->
  <!--雙括號語法 Mustache -->
  <h2 >{{msg}}</h2>
  <!-- v-once指令，使得內容只渲染一次 -->
  <h2 @click="changeMsg" v-once> {{msg}}</h2>

  <!-- v-html指令，使得內容插入html的代碼 -->
<div>{{content}}</div>
<div v-html="content"></div>

<!-- v-bind指令，系結屬性的內容 -->
<div :id="id" :></div>
<div v-bind:id="id" v-bind:></div>

</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
//宣告式
export default {
  name: 'App',
  data(){
    return{
      msg:"helloword",
      content:"<h1>標題1</h1><h2 style='color:red'>標題2</h2>",
      id:"d1"
    }
  },
  methods:{
    changeMsg(){
    this.msg = "jihu,真帥",
    this.id= "d2"

    }
  }

}
</script>

<style >
  #d1{
    width: 100px;
    height: 100px;
    background: red;
  }
  #d2{
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

展示結果：

點擊helloword后：

3.使用 JavaScript 運算式

<template>
  <img alt="Vue logo" src="https://img.uj5u.com/2022/03/16/304133160721093.png" />
  <h2 >{{msg}}</h2>
  <!-- javascript運算式可以在模板語法里使用 -->
<h1>{{msg.split('')}}</h1>
<h1> {{ msg.split('').reverse() }}</h1>
<h1>{{msg.split('').reverse().join('')}}</h1>
<div v-bind:id="msg.split('').reverse().join('')" v-bind:></div>
<div>{{color=='綠色'?'開心':'難過'}}</div>

<div v-html="content" ></div>
<div :id="color1">{{msg}}</div>

</template>

<script>  
//宣告式
export default {
  name: 'App',
  data(){
    return{
      msg:"helloword",
      color:'綠色',
      color1:'color',
      content:"<h1 style='color:red'>紅黑樹</h1>"
    }
  }

}
</script>

<style >
#color{
color: orange;
}
</style>

展示結果：

動態指令

<template>
  <!-- 動態指令  -->
<div v-bind:[attributeName]="d1"></div>
<button @click="changeName">點擊 切換顏色</button>
<button @[eventName]="changeName">點擊切換顏色</button>

</template>

<script>  
//宣告式
export default {
  name: 'App',
  data(){
    return{
      attributeName:'class',
      d1:'color',
      eventName:'click'
    }
  },
 methods:{
   changeName:function(){
     this.attributeName='id'
   }
  
 }

}
</script>

<style >
#color{
  width: 100px;
  height:100px;
  background: yellow;
}
.color{
 width: 100px;
  height:100px;
  background: blue;
}
</style>

5.計算屬性和監聽器

1.計算屬性

<template>
  <!-- 計算屬性  -->
<div  >{{msg.split('').reverse().join('')}}</div>
<div  >{{reverseMsg}}</div>

</template>

<script>  
//宣告式
export default {
  name: 'App',
  data(){
    return{
      msg:'helloworld'
      
    }
  },
  computed:{
    reverseMsg:function(){
     return  this.msg.split('').reverse().join('')
    }
  }
 
 }
}
</script>

<style >
.d1{
 width: 100px;
  height:100px;
  background: blue;
}
</style>

展示結果：

2.監聽器 (監聽資料的變化)

<template>
  <!-- 計算屬性  -->
<div  >{{msg.split('').reverse().join('')}}</div>
<div  >{{reverseMsg}}</div>

<!-- 監聽 -->
<input type="text" v-model="msg" />
<h1>{{msg}}</h1>

</template>

<script>  
//宣告式
export default {
  name: 'App',
  data(){
    return{
      msg:'helloworld'
    }
  },
  computed:{
    reverseMsg:function(){
     return  this.msg.split('').reverse().join('')
    }
  },
  watch:{
    //監聽值的變化
    msg:function(newValue,oldValue){
      console.log('newValue',newValue)
      console.log('oldValue',oldValue)
      if(newValue.length<10){
        alert("輸入的值太少了！")
      }

    }
  }
  

}
</script>

<style >
#id{
  width: 100px;
  height:100px;
  background: yellow;
}
.d1{
 width: 100px;
  height:100px;
  background: blue;
}
</style>

展示結果

6.Class與Style系結

1.Class類名的多種操作方式

<template>
  <!-- 類class  -->
  <!-- 第一種寫法，放置字串 -->
<h1 :>hello</h1>
<!-- 第二種寫法，放置物件 -->
<h1 : >hello2</h1>
<button @click="tochangeActive">切換Active</button>
<!-- 第三種寫法， 放置陣列 -->
<h1 :> hello3</h1>
<!-- 第四種寫法， 陣列和物件的結合 -->
<h1 :>hello4</h1>
<h1 :>hello5</h1>

</template>

<script>  
//宣告式
export default {
  name: 'App',
  data(){
    return{
      msg:'helloworld',
      isActive:true,
      attr:['swiper','active'],
      classname:'abc'
    }
  },
methods:{
  tochangeActive:function(){
    this.isActive = !this.isActive,
    this.attr.pop(), //pop() 用來洗掉attr:['swiper','active']中的值，一次刪一個，從后往前刪
    this.classname='cba'
  }
}  
}
</script>

<style >
.active{
  background: blue;
}
</style>

輸出結果：

2.Style樣式的多種操作方式

<template>
  <!-- style  -->
  <!-- 第一種寫法，放置字串 -->
<h1 :style="msg">hello</h1>
<!-- 第二種寫法，放置物件 -->
<h1 :style="{background:'purple'}" >hello2</h1>
<button @click="tochangeActive">切換Active</button>
<!-- 第三種寫法， 放置陣列 -->
<h1 :style="styleObj"> hello3</h1>
<!-- 第四種寫法， 陣列和物件的結合 -->
<h1 :style="[styleObj,{width:'500px'}]">hello4</h1>

</template>
<script>  
//宣告式
export default {
  name: 'App',
  data(){
    return{
      msg:"background:yellow;",
      isActive:true,
      styleObj:{
        //如果遇到需要多個單詞組成的樣式，可以使用引號   例如：'background-color':'pink'
        //也可以使用駝峰命名法  例如： backgroundColor:'pink',
       
        background:'pink',
        border:'1px solid orange',
        boxSizing:"border-box"
      }
    }
  },
methods:{
  tochangeActive:function(){
    this.styleObj.backgroundColor='skyBlue'
   
  }
}  
}
</script>
<style >
.active{
  background: blue;
}
</style>

展示效果

點擊后

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/444439.html

標籤：其他

上一篇：egg-jwt的使用

下一篇：MacM12021上Docker內的Xdebug無法正常作業

Vue3

Vue3

1.Vue簡介

1.Vue的特點

2.入門案例

2.用 Vite來創建一個vue專案

3.Vue宣告式語法與資料雙向系結（v-model）

4.模板語法常用指令

插值

1.文本 （v-once指令）

2.原始 HTML Attribute （v-html指令 、v-bind指令）

3.使用 JavaScript 運算式

動態指令

5.計算屬性和監聽器

1.計算屬性

2.監聽器 (監聽資料的變化)

6.Class與Style系結

1.Class類名的多種操作方式

2.Style樣式的多種操作方式

1.文本（v-once指令）

2.原始 HTML Attribute （v-html指令、v-bind指令）