Vue基礎語法

七格格永不服輸 發表於2019-08-14
Vue

一、掛載點,模版和例項

二、Vue例項中的資料,事件和方法

1、v-html指令和v-text指令

v-html :不轉義

v-text :轉義過後的內容

    <div id="root">
        <div v-html="content"></div>
        <div v-text="content"></div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"<h1>hello</h1>"
        }
    })
    </script>
View Code

2、v-on指令

<div v-on:click="()=>{alert(123)}">
{{content}}
</div>

正確做法:

        <div v-on:click="handleClick">
            {{content}}
        </div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"hello",
        },
        methods:{
            handleClick:function(){
                alert(123);
            }
        }
    })
    </script>
View Code
<div id="root">
        <div v-on:click="handleClick">
            {{content}}
        </div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"hello",
        },
        methods:{
            handleClick:function(){
                this.content="world" //面向資料程式設計
            }
        }
    })
    </script>
View Code
<div v-on:click="handleClick">簡寫<div @click="handleClick">

三、Vue中的屬性繫結和雙向資料繫結 

1、屬性繫結v-bind:title簡寫:bind

    <div id="root">
        <div v-bind:title="title">helloworld</div>
        <div :title="title">縮寫</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            title:"this is hello world"
        }
    })
    </script>
View Code

2、雙向資料繫結v-model

<div id="root">
        <div>{{content}}</div>
        <input type="text" v-model="content">
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"this is content"
        }
    })
    </script>
View Code

四、Vue中的計算屬性和偵聽器

1、計算屬性 computed

和react中的reselect特別像

好處:firstName,lastName都沒改變,fullName會取上一次的快取值,效能高。

<div id="root">
        姓:<input type="text" v-model="lastName">
        名:<input type="text" v-model="firstName">
        <div>{{firstName}}{{lastName}}</div>
        <div>{{fullName}}</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu'
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        }
    })
    </script>
View Code

2、偵聽器 watch

監聽資料的變化

監聽fistName和lastName,每次變化加一。

<div id="root">
        姓:<input type="text" v-model="lastName">
        名:<input type="text" v-model="firstName">
        <div>{{firstName}}{{lastName}}</div>
        FullName: <span>{{fullName}}</span>
        <div>{{count}}</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu',
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        },
        watch:{
            firstName:function(){
                this.count++
            },
            lastName:function(){
                this.count++
            }
        }
    })
    </script>
View Code

監聽計算屬性的改變

new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu',
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        },
        watch:{
            fullName:function(){
                this.count++
            }
        }
    })
View Code

五、v-if、v-show和v-for指令 

1、v-if

值為false直接從DOM中移除。

<div id="root">
        <div v-if="showHello">hello world</div>
        <button @click="handleToogle">toogle</button>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            showHello:true
        },
        methods:{
            handleToogle:function(){
                this.showHello=!this.showHello;
            }
        }
    })
    </script>
View Code

2、v-show 

處理上例這種頻繁顯示隱藏使用v-show更好。

<div id="root">
        <div v-show="showHello">hello world</div>
        <button @click="handleToogle">toogle</button>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            showHello:true
        },
        methods:{
            handleToogle:function(){
                this.showHello=!this.showHello;
            }
        }
    })
    </script>
View Code

3、v-for

<div id="root">
        <ul>
            <li v-for="item of list">{{item}}</li>
        </ul>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            list:[1,2,3]
        }
    })
    </script>
View Code

迴圈時候使用:key可以提高效率。key值不能重複。

 <li v-for="item of list" :key="item">{{item}}</li>

可以這麼寫:

<div id="root">
        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            list:[1,2,2,3]
        }
    })
    </script>
View Code

但是頻繁對列表進行變更,排序等操作時,index作為key值是有問題的。

 

 

本文作者starof,因知識本身在變化,作者也在不斷學習成長,文章內容也不定時更新,為避免誤導讀者,方便追根溯源,請諸位轉載註明出處:http://www.cnblogs.com/starof/p/9061617.html 有問題歡迎與我討論,共同進步。 


相關文章

Vue

Vue 3 原始碼開放,今天你學習了嗎?

正在海邊浪的思否小姐姐一覺睡醒發現,國慶假期都不休息的尤雨溪大大在昨天凌晨釋出了 Vue 3 原始碼,原始碼地址:https://github.com/vuejs/vue-... ——作者表示,目前
Vue|PHP

可以生成 Vue 自定義元件的 PHP 表單生成器,支援 IView 和 ElementUI

FormBuilder 是一個開源的PHP表單生成器,可以快速生成現代化的form表單。還可以配合開源專案 xaboy/form-create 生成任何 Vue 元件環境需求PHP &gt;= 5.4
Vue

記錄一次開發中遇到的問題:Vue 重新整理頁面後,頁面空白

因為剛開始學習vue前端技術,在實踐過程中遇到一個路由相關問題,記錄一下處理過程環境: windows10系統 vue-cli3 3.X錯誤現象描述 在專案中可以使用`&lt;rou
Vue|Laravel

Laravel Vue 下拉框聯動小技巧

最近在做一個後臺管理相關的東西,有一個關於下拉框聯動的小技巧可以分享給大家,寫好後不用更改前端程式碼,只需更改後端相應的配置,即可增加相對應的聯動。比如有兩個下拉框一個省和一個市的下拉框,這裡只是拿省
Vue

vue 靜態檔案上傳到七牛

1.七牛官網申請賬號具體申請流程不詳細贅述了.最好申請一個自己的專屬檔案域名.去阿里雲配置CNAME2.修改專案index.jsvar path = require('path')module.exp
Vue

Nginx 服務部署 Vue 專案後重新整理頁面,出現 404 問題

1.vue-cli 3.x2.Nginx專案之前vue-router使用預設‘hash’模式,在本地與部署線上環境後都沒有問題,因為要去掉URL中的 ‘#’ 號,故使用‘history’路由模式,故再
Vue

Ant-design-vue 專案實戰筆記 (後繼將繼續補充)

安裝1.直接下載 / CDN https://unpkg.com/vue-router/dist/vue-router.js 你也可以像https://unpkg.com/vue-rout
Vue

vue 常量定義和使用

用的vue-cli 3.x構建的 vue專案,如何定義不同環境下的常量呢?一下已定義全域性BASE_URL舉例在config/dev.env.js 下'use strict'const merge =
Vue

Vue-Cli 3+tinymce 5 富文字編輯器整合

文章參考自 點選前往// 安裝 tinymce-vuenpm install @tinymce/tinymce-vue -S// 安裝 tinymcenpm install tinymce -Stin
Vue

記一次 vue 的非同步更新佇列導致記憶體洩漏

由於專案是需要連續傳輸圖片形成一個偽視訊(沒辦法,客戶錢給的不夠)來觀看。後端採用傳輸base64的圖片到前端展示。php: 7.2workerman: 3.Xvue: 2.Xworkerman與樹