Vue快速使用

雪山飛豬發表於2020-12-22
Vue

目錄

Vue是啥

Vue.js是一個用來開發Web介面的前端庫，非常輕量級，只需要關注於data的變化，使程式碼變得更加容易維護。
說人話就是，從此不再有所謂的jQuery的html程式碼拼接，讓渲染html像德芙一樣縱享絲滑，比rain還潤！

其實前後端渲染各有各的好處

  • 前端渲染優點
  1. 業務分離，後端只需要提供資料介面，前端在開發時也不需要部署對應的後端環境，通過一些代理伺服器工具就能獲取後端資料進行開發，提升開發效率
  2. 計算量轉移，原本後端渲染的任務轉移到了前端
  • 後端渲染優點
  1. 對搜尋引擎友好
  2. 首頁載入時間短，後端渲染載入完成直接顯示HTML，前端載入完成後還有段js的渲染

一、安裝

直接下載像引用jQuery一樣引入即可

我是這樣引入 的

<script src="./vue.js"></script>

helloworld示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../vue.js"></script>
    <title>第一個vue程式</title>
</head>
<body>

<div id="app">
    <h1>{{cqh}}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hello world',
        }
    })
</script>

執行輸出

就是這麼簡單！

二、基本功能

渲染文字-{{var}}

用{{}}輸出變數即可

<div id="app">
    <h1>{{cqh}}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe'
        }
    })
</script>

這裡直接把data.cqh的資訊顯示出來了

渲染表示式-{{expr}}

放在{{}}內的文字為表示式，除了直接輸出屬性值外，還可以寫簡單的js表示式

<div id="app">
    <p>{{id+1}}</p>
    <p>{{id==123? 'a' : 'b'}} </p>
    <p>{{cqh.split('').join('--')}} </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            id: 123,
        }
    })
</script>

渲染屬性-:attr="expr"

使用-:attr="expr"形式

<div id="app">
    <h1 :id="'123'+id" :style="style" >{{cqh}}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            id: 123,
            color: 'red',
            style:{
                'color':'red'
            }
        }
    })
</script>

這裡:屬性後邊是一個js表示式，可以直接使用data的變數

過濾器-filters

過濾器在vue的filters中定義，類似管道的方式使用

<div id="app">
    <p>{{cqh|uppercase}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
        },
        filters: {
            uppercase: function (value) {
                if (!value) return '';
                value = value.toString();
                return value.toUpperCase()
            }
        }
    })
</script>

執行結果如下

過濾器本質是一個函式，還可以傳引數，v

{{ message | filterA('arg1', arg2) }}

事件監聽-methods

兩種方式，@或v-on後邊跟事件名，引號裡邊放methods裡呼叫的方法

<div id="app">
    <button @click="a">a事件</button>
    <button v-on:click="b">b事件</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            id: 123,
            color: 'red',
        },
        methods: {
            a() {
                alert(this.cqh)
            },
            b() {
                alert(this.id)
            }
        }
    })
</script>

執行如下

計算屬性-computed

為了避免在模板中加入過重的業務邏輯，比如拼接字串，計算價格等
vue還提供了計算屬性的方法computed

<div id="app">
    <p>{{fullName}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
        },
        computed: {
            fullName() {
                return this.cqh + "-雪山飛豬"
            }
        }
    })
</script>

執行如下

三、控制邏輯

v-if/v-else

<div v-if="yes">
    <div v-if="inner">inner</div>
    <div v-else>not inner</div>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            yes:true,
            inner:false,
        }
    })
</script>

輸出

v-for

<div id="app">
    <ul>
        <li v-for="v in list">
            <h3>{{v.title}}-{{v.description}}</h3>
        </li>
    </ul>
    <ul>
        <li v-for="(v,k) in list">
            <h3>{{k}}-{{v.title}}-{{v.description}}</h3>
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            list: [
                {title: "php", description:"指令碼語言"},
                {title: "java", description:"編譯語言"},
                {title: "golang", description:"編譯語言"},
            ],
        }
    })

輸出

template

v-if指定都包含在一個根元素中，如果想應用到多個兄弟節點上不想重複寫，就用template，最後渲染結果不會有它！

<div id="app">
    <template v-if="yes">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </template>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            yes: true,
            inner: false,
        }
    })
</script>

最後渲染如下

四、表單控制元件

Text文字框

<div id="app">
    <input type="text" v-model="cqh">
    <span>你的名字是：{{cqh}}</span>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
        }
    })
</script>

當我們修改表單元素的同時，v-model中的值也是實時更新的

Radio單選框

<div id="app">
    <label><input type="radio" value="male" v-model="gender">男</label>
    <label><input type="radio" value="female" v-model="gender">女</label>
    <p>你的性別是：{{gender}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            gender:"",
        }
    })
</script>

輸出

Checkbox核取方塊

<div id="app">
    <label><input type="checkbox" value="1" v-model="list">1</label>
    <label><input type="checkbox" value="2" v-model="list">2</label>
    <label><input type="checkbox" value="3" v-model="list">3</label>
    <p>你的選擇是：{{list.join('|')}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            list:[],
        }
    })
</script>

輸出

Select選擇框

<div id="app">
    <select v-model="list">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <p>你的選擇是：{{list}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            cqh: 'chenqionghe',
            list: "",
        }
    })
</script>

輸出

相關文章