Vue使用指南(一)

時間 2019-12-09

標籤 vue 使用指南简体版

原文原文鏈接

Vue

 Vue:前臺框架
 漸進式JavaScript框架
 漸進式：vue能夠控制頁面的一個局部，vue也能夠控制整個頁面，vue也能控制整個前端項目
     -- 根據項目需求，來決定vue控制項目的程度

使用

 1.下載：https://vuejs.org/js/vue.min.js
 2.導入vue.js
 3.在自定義的script標籤中建立vue對象
 4.用vue對象來控制頁面內容

vue的優勢

'''
單頁面web應用
數據驅動
數據的雙向綁定
虛擬DOM
'''

掛載點與數據的渲染

<body>
    <div id="app">
        <!-- 插值表達式：插值表達式中出現的名字表明vue變量 -->
        <div class="root">{{ abc }}</div>
        <div class="main">{{ xyz }}</div>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({ // 掛載點：vue對象經過el參數(掛載點)與頁面結構創建聯繫，vue對象與頁面控制的結構應該是一對一關係，因此掛載點選擇id做爲惟一標識
        el: '#app', // 在掛載點插值表達式中出現的名字是變量，須要vue對象經過data提供
 data: { abc: '內容', xyz: 3.14 } }) </script>

vue實例

<body>
    <div id="app"> {{ msg }} </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    // vue實例(對象)
    var app = new Vue({ el: '#app', data: { msg: "message" } }); </script>
<script>
    // 如何訪問 "message"
 console.log(app); console.log(app.$el); // vue的變量都是以$開頭
 console.log(app.$data.msg); // vue實例(對象)就是掛載點
    // app找到new Vue()實例再找到頁面結構id=app，而後直接訪問實例中的變量
 console.log(app.msg) </script>

實例的methods

<div id="app">
    <!-- v-on來爲事件綁定方法，事件用 :事件名 標註 -->
    <!-- 語法：v-on:事件名 = "事件變量" -->
    <!-- 事件變量：由vue實例的methods提供 -->
    <button v-on:click="btnClick">{{ msg }}</button>
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({ el: '#app', data: { msg: "按鈕" }, methods: { btnClick: function () { alert('點擊事件') } } }); </script>

案例：經過事件修改標籤樣式

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 經過不一樣的類名控制着一套css樣式 */ .btn { width: 100px; height: 40px; background: orange; } .botton { width: 200px; height: 80px; background-color: yellowgreen; } </style>
</head>
<body>
    <div id="app">
        <!-- v-bind來爲屬性綁定變量，屬性用 :屬性名 標註  eg:  :style  :class  :id -->
        <!-- 語法：v-bind:屬性名 = "屬性變量" -->
        <!-- 事件變量：由vue實例的data提供 -->
        <button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({ el: '#app', data: { msg: "按鈕", my_style: { // background: 'transparent'
 }, my_cls: 'btn' }, methods: { btnClick: function () { // console.log(this.my_style.background)
                // this.my_style.background = 'yellow';
                // 修改類名就能直接對應一套css樣式
                if (this.my_cls == 'btn') { this.my_cls = 'botton' } else { this.my_cls = 'btn' } } } }); </script>
</html>

實例的computed

# computed功能：將function封裝給一個變量，經過該變量就能夠獲得該function的返回值 # 應用場景：一個變量(name)依賴於 多個變量(first_name + last_name)的值 <div id="app">
    <!-- v-model就是爲表單元素 value屬性 綁定變量 -->
    <p> 姓：<input type="text" placeholder="姓" v-model="first_name">
    </p>
    <p> 名：<input type="text" placeholder="名" v-model="last_name">
    </p>
    <p>
        <!-- 插值表達式中能夠書寫  變量表達式 --> 姓名：<span class="span">{{ name }}</span>
    </p>
</div>
<script src="js/vue.min.js"></script>
<script>
    // vue實例(對象)
    var app = new Vue({ el: '#app', data: { first_name: '', last_name: '', }, computed: { name: function () { if (this.first_name == '' && this.last_name == '') { return '姓名' } return this.first_name + this.last_name } } }); </script>

實例的watch方法

# watch是用來監聽變量的，當監聽的變量的值一旦發生變化，就會觸發監聽的函數
# 應用場景：多個變量(first_name、last_name)依賴於一個變量(name)

<div id="app">
    <p> 姓名：<input type="text" placeholder="姓名" v-model="name">
    </p>
    <p>姓: {{ first_name }}</p>
    <p>名: {{ last_name }}</p>
</div>
<script>
    var app = new Vue({ el: '#app', data: { name: "", first_name: "姓", last_name: "名", }, watch: { name: function () { // eg: name = 「張三」
                this.first_name = this.name[0];  // 張
                this.last_name = this.name[1];  // 三
 } } }); </script>

實例的delimiters

<body>
    <div id="main">
        <!-- 查找表達式 {{ }} 符號與其餘語言衝突，能夠自定義表達式的符號 -->
        <!-- 實例的 delimiters: ['左側符號', '右側符號'] --> {{ msg }}{{{ msg }}}${ msg } </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    // vue實例(對象)
    new Vue({ el: '#main', data: { msg: "信息" }, // delimiters: ['{{{', '}}}'],
        delimiters: ['${', '}'], }); </script>

實例的生命週期鉤子

# 學習目的：
# 鉤子：知足某種條件被（系統）調用的方法
# 在一個vue實例，從建立到銷燬，整個過程當中或產生一些時間節點，這些時間節點都會回調一些指定名字綁定的方法，在這些函數中去完成特色時間點的業務功能

new Vue({ el: '#app', data: { msg: "message" }, methods: { fn: function () { return '123' } }, beforeCreate: function () { console.log('實例要被建立了'); console.log(this.msg) }, created: function () { console.log('實例已經建立了'); console.log(this.msg); console.log(this.$el) }, mounted: function () { console.log('實例已經渲染到頁面'); console.log(this.msg); console.log(this.$el); console.log(this.fn) }, '生命週期鉤子名': function () { console.log('該時間點須要完成的業務邏輯'); }, });

1. vue-property-decorator使用指南
2. vue-cli的使用指南
3. vue-cli 3.0使用指南
4. Vue使用指南(二)
5. Vue使用指南(三)
6. Vue-CLI使用指南
7. Git submodule使用指南（一）
8. vuejs使用指南（一）
9. XMemcached使用指南【一】
10. BurpSuite使用指南（Intruder）（一）
更多相關文章...
• SQL 指南 - 網站建設指南
• HTML 指南 - 網站建設指南
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Composer 安裝與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。