js框架：vue3

一個前端網頁有：HTML，js，css三個部分主組成，高級一點的動態頁就外加后臺代碼。
vue：是JavaScript封裝起來的框架【js---》jQuery---》vue框架】，js就JavaScript的簡寫，其框架作用就是控制html標簽，給他數據獲取數據。

一、指令的使用和數據的綁定

首先vue需要先引入包服務

<script src="https://unpkg.com/vue@3"></script>

創建時需要一個實例：vue.createApp({ }) 并且這個實例一直存在。演示數據的單向和雙向綁定

<div id="app"><img v-bind:src="photoUrl" width="50">
    {{list.name}}----{{list.photoUrl}}
<p><input v-model = "text1"> {{text1}}</p>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          photoUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.171e8fe1aa1544a1868ab710eed82d82?rik=FLPxvVVL9C9bnQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f200710%2f14-200G00Z321.jpg&ehk=Lb0IHCCZIdqYQOi28m%2borU8c1ARGbTEC%2f8WYzfwRuHo%3d&risl=&pid=ImgRaw&r=0",
          list:{name : "張三","photoUrl":"單向綁定數據用v-bind:src,簡寫【:src】"},
          text1:"雙向綁定v-model,可以動態改變數據"
        }
      }
    }).mount('#app')
</script>

事件綁定v-on:事件名="方法名"，【v-on：可以簡寫為@】如：v-on:click = "update" -----》@click = "update"

<div id="app">
<p><input v-model = "text1"> {{text1}}</p>
<button v-on:click = "update">單擊事件修改</button>
<button @click.once = "update">可以在事件后面點修飾符，once表示只能單擊一次</button>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          text1:"雙向綁定v-model,可以動態改變數據"
        }
      },
      methods:{
        update(){
          this.text1 ="這里是給單擊事件添加的方法"
          debugger //是斷點f12調試，這里用來測試單擊事件的修飾符once
        }
      }
    }).mount('#app')
</script>

指令：v-for循環和v-if條件判斷

<div id="app">
  <table border="1"><!--邊框為1-->
    <tbody>
      <div v-if="students.length==0">
        <h1 style="color: red;">沒有數據！</h1>
      </div>
      <div v-else><!--for循環里有個排序屬性:key是排序，一般根據數據庫id排序如，:key="students.id"-->
        <tr v-for="(list,index) in students" :key="index"><!--根據索引下標排序-->
          <td>{{list.name}}</td>
          <td>{{list.sex}}</td>
          <td>{{list.age}}</td>
        </tr>
      </div> 
    </tbody>
  </table>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          students:[{
            name : "張三",
            sex:"男",
            age:20  
          },{
            name:"李四",
            sex:"女",
            age:18         
          }]
        }
      }
    }).mount('#app')
</script>

計算屬性computed和方法methods的區別

<div id="app">
  <p>a+b={{a+b}}</p> <!--不提倡用表達式-->
  <p>a+b={{count}}</p> <!--計算屬性的調用-->
  <p>a+b={{count2()}}</p> <!--方法的調用-->
</div>
<script>
    Vue.createApp({ //代碼里叫組件，標簽調用叫指令如：v-if判斷等等
      data() { //組件data選項：用于存放數據的。
        return {
          a:5,b:10
        }
      },
      methods:{//方法：無緩存，每次調用都會執行一邊方法體。
        count2(){//調用時需要帶括號：count2()
          return this.a + this.b
        }
      },
      computed:{//計算屬性：有緩存，不會反復調用
        count(){//調用時不需要括號，只需要方法名count
          return this.a + this.b
        }
      }
    }).mount('#app')
</script>

二、項目構建工具vue CLI（俗稱：腳手架）

1.轉譯（Babel）：因為現在瀏覽器無法支持這么高的語法，所以有了轉譯工具（高轉低）將（es6-es11）轉（es5）或者更靠前的低版本。
2.代碼質量（ESlint）：每個人都有自己的代碼風格，這個工具可以管理代碼風格。
3.單文件組件（SFC）：組件=模板+js+css
4.代碼壓縮和優化：作用是將模板轉為js代碼進行編譯。（模板就是指html的標簽代碼）
vue CLI 就是集成了上面4種工具一起的整合。需要下載安裝：Node.js 環境。node運行時面有個下載庫，叫npm，cnpm，npx，yarn等等，都是包管理器不必了解太多能用就行。
安裝命令：
因為node默認是國外環境，需要改回國內淘寶鏡像：npm config set registry https://registry.npm.taobao.org
安裝腳手架【vue cli】構建工具：npm install -g @vue/cli
創建項目：vue create projectname （注意：創建路徑不能有中文和特殊符號，projectname是自定義項目名）
注意計算機為了安全考慮，把腳本分四個策略：
1.Restricted（默認策略）：禁止運行任何腳本和配置文件。
2.AllSigned ：可以運行腳本，但要求所有腳本和配置文件由可信發布者簽名，包括在本地計算機上編寫的腳本。
3.RemoteSigned ：可以運行腳本，但要求從網絡上下載的腳本和配置文件由可信發布者簽名；不要求對已經運行和已在本地計算機編寫的腳本進行數字簽名。
4.Unrestricted ：可以運行未簽名腳本。（危險！）
當我們創建不了vue項目工具時，就需要查一下策略：Get-ExecutionPolicy 返回策略名
set-ExecutionPolicy RemoteSigned一定要把策略更改為RemoteSigned 策略才能創建vue構建工具
創建時選擇vue3默認就可以，確認后

創建完成后：進入項目cd projectname 運行項目：npm run serve 這里工具項目創建提示來執行，并非一定是這兩個命令

最后有這樣一搞地址就表示成功了

三、組件components

每個網頁都是通過組件劃分的，顧名思義組件如同母版頁和布局頁。
組件基礎：注冊的組件名以標簽顯示，注意中間要加【-】一杠。

<div id="app">
    <h1>{{text}}</h1>
    <button-Component></button-Component>
</div>
<script>
    const ButtonComponent={//創建組件，必須在注冊之前定義
        data(){
            return{msg:"我是子組件"}
        },//需要創建html標簽一起打包帶走
        template:`<button>{{msg}}</button>` //反引號是～線下面那個符號
    }
    Vue.createApp({
        data(){
            return{text:"我是父組件!"}
        },
        //組件范圍注冊（只在當前實例里使用）
        components:{
            ButtonComponent:ButtonComponent//頁面要使用的組件名：定義的組件名
        }
    }).mount('#app')
</script>

全局注冊組件

const APP = Vue.createApp({
    data(){
        return{text:"我是父組件!"}
    }
})//'頁面要使用的組件名',定義的組件名
APP.component('buttonComponent',ButtonComponent)
APP.mount('#app')

vue cli 腳手架：組件關聯

1.父組件向子組件參數傳遞，用標簽屬性傳

<HelloWorld msg="傳給子組件的值"/>

用【props】選項了接收。兩種寫法，變量在子組件上使用

<script>
export default { //default以整個文件導出，不加就是以單對象導出
  name: 'HelloWorld',//導出的名字，引入時需要用
  props: {//接收父組件向子組件傳遞過來的數據
    //msg: String //變量名：數據類型
    msg:{ //方法二
      type:String,
      required:true,//表示必須傳值過來
      default:"默認值"
    }
  }
}
</script>

2.子組件向父組件參數傳遞，用【$emit()】方法來傳遞數據。

<button @click="test()" >點擊按鈕</button>
<script>
export default { //default以整個文件導出，不加就是以單對象導出
  name: 'HelloWorld',//導出的名字，引入時需要用
  methods:{
    test(){//子組件需要調用方法才能執行數據保存，這里用單擊數據觸發方法
      this.$emit('search',"傳給父組件的數據")
    }
  }
}
</script>

簡寫

<button @click="$emit('search','傳給父組件的數據')" >點擊按鈕</button>

父組件接收用自定義標簽屬性，屬性名search是自定義的

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App" @search="onSearch"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue' //導入子組件

export default {//父組件導出
  name: 'App',//父組件名
  components: { //注冊子組件
    HelloWorld  //導入進來的子組件名
  },
  methods:{
    onSearch(info){//此時info就是子組件傳遞過來的數據了
      console.log(info);//打印到控制臺
    }
  }
}
</script>

插槽【slot】標簽，子組件用于封裝父組件傳過來的模板內容，父組件標簽內容會在子組件slot插槽中顯示出來。

命名插槽【v-slot】指令：用于封裝多個插槽

樣式scoped屬性表示只在單組件生效，其他組件無效。

四、選項式API和組合式API的語法

選項式API

<div id="app">
    <h1 @click="add">{{count}}*3={{three}}</h1>
</div>
<script>
    Vue.createApp({
        data(){//用于存放數據的選項
            return{ count:1}
        },
        methods:{//用于定義方法的選項
            add(){this.count++}
        },
        computed:{//計算屬性的選項
            three(){return this.count*3}
        }
    }).mount('#app')
</script>

組合式API--------代碼內容寫setup方法里

<div id="app">
    <h1 @click="add">{{count}}*3={{three}}</h1>
</div>
<script>
    //import {createApp} from 'vue' //以文件方式導入方法，我用的是vue網頁鏈接，所以這里不用導入
    const {ref,reactive,computed,createApp}=Vue //把Vue對象給這些方法，這些方法就有了等同于可創建對象的實例。
    createApp({//創建實例
        setup(){
            const count=ref(1)//ref用于包裝成變量，復雜的ref({const:1})
            const list=reactive({name:"張三",age:18})//和ref一樣，不過用于封裝復雜對象
            function add(){//這里不能用this，因為數據封裝在ref方法里了
                count.value++//ref需要點value，reactive不需要
            }
            const three = computed(()=>count.value*3)//計算屬性
            return{count,add,three}//這種寫法需要返回數據，頁面才能顯示
        }      
    }).mount('#app')
</script>

組合式API簡寫<script setup>語法糖------------不需要return返回值了；vue3語法新特性：只能用于組件vue文件，是給模板template去使用的，不能用于常規的<script>標簽。

<template>
<h1 @click="add">{{count}}*3={{three}}</h1>
</template>

<script setup>
    import {ref,computed} from 'vue' //引入對象
          
    const count=ref(1)//ref用于包裝成變量，復雜的ref({const:1})
    function add(){//這里不能用this，因為數據封裝在ref方法里了
        count.value++//ref需要點value，reactive不需要
    }
    const three = computed(()=>count.value*3)//計算屬性    
</script>

五、路由【vue-router】

安裝路由命令：npm install vue-router

在【src】目錄下創建路由文件夾【router】和【index.js】路由配置文件。這些手動配置的時候是可以自動創建的，學習所以手動創建配置

import { createRouter,createWebHistory } from "vue-router";//引入創建路由和路由模式兩個方法
import HelloWorld from '../components/HelloWorld.vue'//引入組件，靜態導入每次都會跟整個程序一起加載。
const routes=[//定義路由
    {
        path:'/hello',
        name:'hello',
        component:HelloWorld //組件
    },
    {
        path:'/home',
        name:'home',
        component:()=>import('../components/HomeCom.vue')//動態導入，建議使用
    }
]
const router =createRouter({ //創建路由
    history:createWebHistory(),//路由模式
    routes:routes//可以簡寫
    //routes //定義的路由
})

export default router //導出給入口main.js用

然后在【main.js】入口js文件中，通過use方法將路由掛載到項目中

import { createApp } from 'vue' //引入vue實例化方法
import App from './App.vue' //導入組件
import router from './router/index' //導入路由js文件

createApp(App).use(router).mount('#app') //use方法將路由router掛載到實例

隨便創建幾個組件充當需要跳轉的測試頁面【HomeCom.vue】等等

<template>
 <h1>Home 頁</h1>
</template>

<script>
    export default { //default以整個文件導出，不加就是以單對象導出
        name: 'HelloWorld'
    }
</script>

最后在【App.vue】父組件中添加需要跳轉的標簽【RouterLink】和顯示標簽<router-view />

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- <HelloWorld msg="Welcome to Your Vue.js App" @search="onSearch" /> -->

  <nav><!-- nav標簽用來定義導航連接的標識 -->
    <RouterLink to="/hello">hello</RouterLink> | <!-- 跳轉路由標簽，相當于a標簽 -->
    <RouterLink :to="{name:'home',query:{id:1}}">Home</RouterLink> | <!--冒號表示指令跳轉，query表示以連接形式傳遞參數，params以路由參數傳遞，跳轉用name或path -->
    <button @click="nav()">首頁</button> <!--根據方法跳轉，方法定義在js--></nav>
  <!-- 顯示路由內容標簽Router-View -->
  <RouterView></RouterView>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue' //導入子組件

import { useRouter } from 'vue-router';

export default {
  name: 'App',//父組件名
  components: { //注冊子組件
    //HelloWorld  
  },
  setup(){
    const router=useRouter()
    function nav(){
      //router.push('/')//跳轉到首頁,默認是路由的path
      //router.push({name:'home'})//路由name屬性跳轉
      //router.replace({name:'home'})//跳轉后不能返回上一層，push可以返回上一層
      router.go(-1)//-1表示返回上一頁，1表示跳轉下一頁，瀏覽器的<-和->
    }
    return{nav}
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

演示效果圖

六、狀態管理【vuex】----相當于全局變量

安裝命令：npm install vuex
在【src】目錄下創建【store】文件夾下新建【index.js】的配置文件

import { createStore } from "vuex"

export default createStore({
    state:{//定義狀態變量（可以是如何類型）
        strname:'張三',
        list:[{
            id:11,
            name:'李四'
        },{
            id:22,
            name:'王五'
        }]
    },
    mutations:{//需要通過方法來間接修改狀態，后臺全局變量可以直接修改數據，vuex不行
        setStrName(state,name){//第一個參數傳狀態變量
            state.strname = name
        }
    },
    getters:{//vuex的就是屬性，自帶緩存效果
        count:state=>state.list.length //計算出數組長度
    },
    actions:{//異步修改，也是做修改的
        //mutations是間接修改
    }
})

將配置文件掛載到【main.js】入口文件

import { createApp } from 'vue' //引入vue實例化方法
import App from './App.vue' //導入組件
import router from './router/index' //導入路由js文件

import store from './store/index' //導入狀態變量vuex---類似全局變量

createApp(App).use(router).use(store).mount('#app') //use方法掛載到實例，全局都可以用

頁面調用

<template>
    <h1>Home 頁:{{strName}}</h1>
    <input type="=text" @input="updateName" :value="strName">
    <h1>數組長度：{{count11}}</h1>
</template>

<script>
    import { computed } from 'vue'//計算屬性,獲取vuex的數據需要通過計算屬性來獲取。
    import { useStore } from 'vuex'//用來創建對象
    export default { //default以整個文件導出，不加就是以單對象導出
        name: 'HelloWorld',

        setup(){//組合式api
            let store=useStore()//定義變量，創建狀態管理變量的對象，let定義的變量出大括號不能使用此變量。
            const strName = computed(()=>store.state.strname)//通過計算屬性獲取數據
            
            function updateName(event){//修改方法：用commit()提交數據，參數1：配置文件定義的修改方法
                store.commit("setStrName",event.target.value)//參數2：獲取標簽的value值
            }
            //調用vuex的計算屬性，const定義的變量表示常量
            const count11=computed(()=>store.getters['count'])//.getters.count等價于.getters['count']

            return{
                strName,//將變量返回給頁面顯示
                updateName,//修改方法
                count11 //數組長度
            }
        }
    }
</script>