vue基礎入門探討

簡單來說：Vue是當下很火的一個JS庫&框架

這裏談到的庫也就是一些屬性方法的集合，按需調用，框架也就是業務的一套解 決方案（N個庫的集合），它制定了統一的開發規範
真正意義上它解決了前後端分離便於開發和後期維護

學過vue跟JQ的都應該了接一下它們的優缺點

1-JQ有大量的DOM操作，vue有一個概念虛擬DOM 就是直接去內存中取 2-JQ沒有統一模型不方便後期維護，vue是基於mvvm思想
數據統一管理在模型彙總 3-JQ有語法可以提取公共的html或js嗎？vue有組件 vue可以減少代碼冗餘便於後期維護 等

小項目 jq 總共2、3個頁面 用vue大材小用，關鍵得不償失浪費時間 大項目 vue 後期方便維護
成本高，對技術要求也高（通過上述3點可以看到）

初體驗

模板語法

<div id="app">
        <p>你猜我叫什麼？	答： {{uname}}	</p>							
        <p>你猜我今年多少歲？答：  {{age}}	</p>							
        <p> 哥哥你年齡太大了，我要你回到18歲，實現age-870 代碼：{{age-870}}	 </p>
        <p>姓名反轉顯示，代碼：	{{uname.split('').reverse().join(',')}}	</p>				
        <p>
            姓名等於悟空超厲害，否則八戒還得努力呀！代碼：
            {{ uname == '悟空' ? '超厲害' : '八戒還得努力'}}
        </p>	
        <p> 聲明a標籤href中的值使用模型數據url</p>
        <p>
            <!-- <a href="{{url}}">點擊我，加薪</a> -->
            <a v-bind:href="url">點擊我，加薪</a>
            <a       :href="url">點擊我，加薪</a>
        </p>
        <p>聲明button按鈕，點擊彈出：hello</p>
        <input type="button" value="點我" v-on:click="fn1">
        <input type="button" value="點我" @click="fn1">
        <hr /><hr />
        <p>顯示模型中的html鍵（邏輯上）： {{html}}</p>
        <p v-html="html"></p>
        <!-- 注：用v-html數據會放到標籤裏面 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1創建VM
new Vue({
    //聲明監控訪問
    el: '#app',
    //2創建模型 
    data: {
        uname:'千爸爸',
        age: 888,
        url: 'http://www.mobiletrain.org/',
        html: '<b>你好呀</b>'
    },
    methods: {//這裏寫對象 因爲要寫多個方法
        // 鍵就是函數名
        // fn1:function(){}
        // fn1:()=>{}   es6  箭頭函數
        // fn1(){}      es6  對象 屬性和方法的簡寫
        fn1() {
            alert('hello，webopenfather')
        }
    }
})
</script>

列表渲染

<div id="app">
    <h1> v-for="數據 in data中鍵"</h1>
    <p v-for="item in goods">
        {{item.id}} __ {{item.title}}
    </p>

    <h1>v-for="(數據,  索引/下標) in data中鍵" </h1>
    <p v-for="(item, index) in goods">
        {{index}} __ {{item.id}} __ {{item.title}}
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 聲明監控範圍
    el: "#app",
    // 聲明模型數據
    data: {
        goods: [
            {id: 1, title:'a', price: 12},
            {id: 2, title:'b', price: 13},
            {id: 3, title:'c', price: 14},
            {id: 4, title:'d', price: 15}
        ]
    }
})
</script>

條件渲染v-if和v-show

<div id="app">
    <h1>v-show</h1>
    <div v-show="status">this is v-show</div>
    
    <h1>v-if</h1>
    <div v-if="status">this is v-if</div>
    <div v-if="score >= 90">優秀</div>
    <div v-else-if="score >= 80">一般</div>
    <div v-else-if="score >= 70">良好</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else-if="score >= 0">不及格</div>
    <div v-else>你有BUG</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 聲明監控範圍
    el: "#app",
    // 聲明模型數據
    data: {
        status: false,
        // 需求2：判斷成績>=90優秀>=80一般>=70良好>=60及格>=0不及格，其他不行
        score: 5
    }
})
</script>

這裏的show和if的區別是：v-if控制DOM 移除標籤，v-show控制css隱藏顯示，並且v-if語法更強 else if 和 else

<button @mousemove="eventAction"></button>
<button @mousemove="eventAction(0, $event)"></button>
methods: {
    eventAction(ev){

    }
    eventAction(num, ev){

    }
  }

如果@事件類型="函數名"中函數不傳參數的話會傳入一個內置的事件對象，如果函數中傳參的話就會傳入一個參數num，有需要獲得事件對象的話可以在後面加入$event傳入進來

事件修飾符

按鍵修飾符
@事件類型.修飾符=“函數名”
修飾符種類：delete、enter、space等 也可以寫數字

<div id="app">
    <input 
        type="text" 
        @keyup.enter="fn1"
        @keyup.space="fn2"
        @keyup.delete="fn3"
    />
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 聲明監控範圍
    el: "#app",
    // 聲明模型數據
    data: {
    },
    // 聲明普通方法
    methods: {
        fn1() {
            console.log('this is enter')
        },
        fn2() {
            console.log('this is space')
        },
        fn3() {
            console.log('this is delete')
        }
    }

})
</script>