vue學習

時間  2021-05-09
標籤 css html vue node ios vue-cli npm json axios 數組 欄目 CSS 简体版
原文   原文鏈接

  1. 介紹
    兼容性：ie8+
    特色：css

    1. 聲明式渲染     
    只須要將vue實例中的變量聲明在模塊中便可
    <p>{{message}}</p>
2. 使用指令完成條件渲染和列表渲染
3. 雙向數據綁定
    <input type="text" name="username">
4. 組件化（模塊化）

  2. 安裝
    1) scripthtml

    只適合學習使用

    2) npmvue

    $ npm install vue --save

    3) 腳手架node

    無需安裝只管使用

  3. vue實例對象
    1) 實例化ios

    let vm = new Vue({
    el,            // 用於表示模板
    data:{},    // 用於保存該vue實例的變量，用於頁面渲染或者雙向數據綁定 ,當vue實例建立後，data中的值就會放入到響應式系統中，只要data中的值發生了變化，頁面中也就相應的獲得響應。

})

    2) vue實例能夠直接訪問data中的變量vue-cli

    let vm = new Vue({
    data:{
        a:1,
        b:2
    }
})        
vm.a

  4. vue的生命週期
    vue實例對象由建立到頁面渲染到最後銷燬的整個過程
    1) 生命週期函數npm

    breforeCreate
created
    vue實例對象的建立完成，data中的變量也綁定在vue實例對象上
beforeMount
    在模塊轉換爲具體的虛擬dom以前的階段，這個階段完成mount的準備工做，好比將html轉換爲template,獲取data中變量
mounted
    已經mount完畢，也就是說已經將data中的變量設置到了template中
beforeUpdate
    當data中的值發生了變化，網頁準備從新更新以前
updated
    當網頁從新渲染完成
beforeDestory
destoryed

    2) 生命週期函數的應用json

    這些函數做爲Vue構造函數參數的屬性存在，可使用函數簡寫的語法，在生命週期鉤子函數中，this指向指向vue實例

let vm = new Vue({
    created(){
        this -> vm
    }
})
  5. 雙向數據綁定

  6. 模板語言
    1) 聲明式渲染axios

    {{message}}
{{表達式}}

    2) 指令數組

    v-on:事件類型
v-bind:屬性
v-if="條件"
v-show="條件"     
    當dom元素頻繁的顯示與隱藏相互切換使用v-show，由於在隱藏與顯示切換的時候不操做dom對象只改變dom對象的display屬性
v-for="item in list"
v-html="v"

    3) 指令簡寫

    v-on:click         => @click
v-bind:value    => :value

案例：
<form action="" @submit="submitHandler"></form>
<form action="" v-on:submit="submitHandler"></form>

<input type="checkbox" v-bind:value="ids">
<input type="checkbox" :value="ids">
    :屬性 動態綁定，表示ids爲變量，去data中匹配這個變量
<input type="checkbox" value="ids">
    屬性     靜態綁定，表示ids爲值，也就是value的值爲ids
<div v-bind:style="s"></div>

new Vue({
    data:{
        ids:[],
        s:{
            color:"red",
            background:"#ededed"
        }
    },
    methods:{
        submitHandler(){

        }
    }
})

  7. 事件機制
    1) 事件綁定

    v-on:eventType="handler"
@eventType="handler"
@eventType="js表達式"

    2) 事件對象

    1. 事件處理函數中沒有參數
    <button @click="add"></button>

    methods:{
        add(event){
            event就是事件對象
        }
    }
2. 事件處理函數中有參數
    <button @click="add(3,$event)"></button>

    methods:{
        add(num,event){
            num 爲3
            event就是事件對象
        }
    }
3) 事件類型修飾符
    1. 事件修飾符
        @eventType.prevent
        @eventType.stop
        @eventType.self
        @eventType.once
        @eventType.capture
        @scroll.passive
    2. 按鍵修飾符
        只適用於keyup、keydown、keypress
        @keyup.enter
        @keyup.tab
        @keyup.delete
        @keyup.esc
        @keyup.space
        @keyup.up
        @keyup.right
        @keyup.down
        @keyup.left
    3. 系統修飾鍵
        @eventType.ctrl
        @eventType.alt
        @eventType.shift
        @eventType.meta    
    4. 鼠標按鍵修飾符
        適用於mouseup、mousedown、mousepress
        @eventType.left
        @eventType.right
        @eventType.middle

  1. 動態綁定class與style
    1) class

    :class="表達式"
:class="{className:flag}"
    className存在與否取決於flag是否爲true
:class="['basic',a]">

    2) style

    style="backgrond:pink;color:#fff"
=>
:style="{background:'pink',color:'#fff'}"
=>
:style="{background:a,color:b}"
data:{
    a:"pink",
    b:"#fff"
}
=>
:style="[a,b]"
data:{
    a:{background:"pink"},
    b:{color:"#fff"}
}

  2. 條件渲染
    v-if
    v-else-if
    v-else

    案例分析：

    <div v-if='flag' :key="1">
    hello
</div>
<div v-else :key="2">
    world
</div>

    v-show

    <div v-show='flag'>
    hello
</div>

  3. 列表渲染
    <ul>

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

    </ul>

    data:{

    return {
    list:["國際新聞","國內新聞","體育新聞"]
}

    }

    list.pop()
    list.push()

  4. 深刻了解組件
    組件開發 （索菲亞傢俱設計與定製）
    組件調用 (索菲亞售後安裝)

    1) 組件註冊

    全局註冊
    全部的vue實例對象均可以調用的組件
    Vue.component(組件名,config)
    在組件中，data屬性不能爲對象了，而必須爲一個函數，這個函數返回一個對象
    config:{
        template:``,        //模板，相似於以前的el
        props:["title"],// 指望父組件傳遞給當前組件的參數title
        data(){                    //保證每一個組件都擁有一份獨立的data數據
            return {

            }
        },
        components:{},    //組件的局部註冊
        methods:{},
        beforeCreate(){

        },
        ...
    }
局部註冊
    當前的vue實例對象才能調用該組件
    new Vue({
        el,
        data:{

        },
        methods:{},
        components:{
            組件名:config
        }
    })

    2) 組件之間參數的傳遞 props【父->子】

    用於聲明當前組件指望接收父組件傳遞給它的參數，這些參數能夠經過this來直接訪問
1. 經過數組來聲明參數名稱
    props:["title","type"]
2. 經過對象來聲明參數的名稱以及數據類型
    props:{
        title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise 
    }
3. 靜態傳值、動態傳值
    靜態傳值只能傳遞字符串的值
    <my-test 
        a="hello world"     //靜態傳值
        :b="true"                  //動態傳值
        :c="12.3" 
        :d="{a:'terry'}"
        :e="()=>{alert(1)}"></my-test>

    let myTest = {
        template:`
            <div>
                <p>a:{{typeof a}} , {{a}}</p>
                <p>b:{{typeof b}} , {{b}}</p>
                <p>c:{{typeof c}} , {{c}}</p>
                <p>d:{{typeof d}} , {{d}}</p>
                <p>e:{{typeof e}} , {{e}}</p>
            </div>
        `,
        props:{
            a:String,
            b:Boolean,
            c:Number,
            d:Object,
            e:Function
        }
    }
4. 單向數據流
    全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，可是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而致使你的應用的數據流向難以理解。
3) 組件之間函數的傳遞 自定義事件【子->父】
    在子組件的方法調用的時候，須要修改父組件中的變量
    思路：
        1) 子組件直接修改父組件的值   X
        2) 當子組件中函數執行完畢後通知父組件的函數進行執行
            子組件的事件處理函數中
                this.$emit("foo")    經過父組件觸發foo函數
            父組件
                <son-component @foo="handler"> </son-component>
            當this.$emit("foo")，父組件中的handle就要執行了
4) 插槽
    1. 匿名插槽
        <my-component>
            hello world
        </my-component>

        let myComponent = {
            template:`
                <div>
                    <h2></h2>
                    <div>
                        <slot></slot>
                    </div>
                </div>
            `
        }

        slot會接受到my-component的內容
    2. 具名插槽
        <my-component>
            實參1
            <template v-slot:content>
                <div>content的內容</div>
            </template>
            實參2
            <template v-slot:footer>
                <div>footer的內容</div>
            </template>
        </my-component>

        let myComponent = {
            template:`
                <div>
                    <h2></h2>
                    <div>
                        形式參數1
                        <slot name="content"></slot>
                    </div>
                    <div>
                        形式參數2
                        <slot name="footer"></slot>
                    </div>
                </div>
            `
        }
    3. 做用域插槽
  1. 計算屬性
  2. 監聽器
  3. 表單
  4. 腳手架 vue-cli

1) 爲何使用腳手架

1. 模塊化機制
    2. vue-cli可以進行項目管理
        1. 建立而且初始化工程
            node_modules
            src
                components
                pages
                App.vue     根組件
                main.js     入口文件
            package.json
        2. 測試
            自帶靜態服務器
        3. 打包
            vue -> html/css/js

2) 安裝腳手架程序
    1. 本地安裝node
        > node -v
        v 10.16.0
    2. 全局安裝cnpm
        > npm install -g cnpm --registry=https://registry.npm.taobao.org

    3. 全局安裝@vue-cli
        > cnpm install -g @vue/cli
        > vue --version
        @vue.cli 4.0.3

    4. 建立app01
        > vue create app01
    5. 安裝依賴
        > cd app01
        // 安裝axios qs
        > cnpm install axios qs --save

        // 安裝element
        > vue add element
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程