前端入職學習筆記-第二週第一天（Vue基礎）

阿新 • • 發佈：2020-07-20

學習路徑

Vue

1、Vue基礎

1.1 安裝Vue

一般vue的安裝以及其開發過程需要用到的一些包的安裝使用的都是npm命令，但是 npm 安裝速度慢，可以使用淘寶的映象及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 映象。

# 檢視版本
$ npm -v
2.3.0

#升級 npm
cnpm install npm -g


# 升級或安裝 cnpm
npm install cnpm -g

# 最新穩定版
$ cnpm install vue

Vue.js 提供一個官方命令列工具，可用於快速搭建大型單頁應用。

# 全域性安裝 vue-cli
$ cnpm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 這裡需要進行一些配置，預設回車即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

進入專案，安裝並執行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功執行以上命令後訪問 http://localhost:8080/。

1.2 插值表示式

格式：{{表示式}}

　　物件（不連續3個{{ {name: 'jack'} }}）

　　字串 {{'xxx'}}

　　判斷後的布林值 {{true}}

　　三元表示式 {{true？'是正確': '錯誤'}}

可以應用於頁面中簡單粗暴的除錯

注意：必須在data這個函式的返回物件中宣告

1.2 常用基礎指令

v-text

　　將一個變數的值渲染到指定的元素當中

v-html

　　可以給出真正輸出html元素

v-bind（或者使用":"）

　　繫結頁面中元素的屬性

v-if和v-show

　　v-if：

　　作用：判斷是否載入固定的內容，如果是真就載入，如果是假就不載入

　　語法：v-if="判斷表示式"

　　v-show

　　作用：判斷是否顯示內容

　　語法：v-show="判斷表示式"

v-on（或者使用"@"）

　　作用：對頁面中事件進行繫結

　　語法：v-on:時間型別="監聽器"

指令使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <div id="app"></div>
    <script src="vue-2.4.0.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:`
            <div>
                <span v-text="myText"></span>
                <hr/>
                <span v-html="myHtml"></span>
                
                <button v-if="num == 1">測試v-if</button>    
                <button v-else-if="num == 2">測試v-else-if</button>    
                <button v-else>測試v-else</button>
                <hr/>
                <button v-show="isShow">測試v-show</button>    
                <hr/>
                <input type="text" v-bind:value="myValue">
                <!-- 常量需要加'' -->                
                <input type="text" v-bind:value="'常量'">
                <hr/>
                <button v-on:click="myValue='abc'">點我改變myValue的值</button>
                <button @click="myValue='bcd'">點我改變myValue的值</button>
            </div>
            `,
            data:function(){
                return {
                    myText:'我是text的值！',
                    myHtml:'<h1>我是html的值！</h1>',
                    isExit:true,
                    num:23,
                    isShow:false,
                    myValue:12345,
                }
            }
        })
    </script>
</body>
</html>

1.3 雙向資料繫結

v-model

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--v-bind可以給任何屬性賦值，是從vue到頁面的單向資料流 -->
    <!--v-model只能給具備value屬性的元素進行雙向資料繫結（必須使用的是有value的元素） -->
    <div id="app"></div>
    <!--  -->
    <script src="vue-2.4.0.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:
            `
            <div>
                <!--利用v-model雙向流 實現當用戶輸入xxxx的時候，顯示下面的button -->
                <input type="text" v-model="myValue" />
                <button v-show="myValue == 'xxxx'">使用者輸入的是xxxx</button>    
            </div>
            `,
            data:function(){
                return{
                    myValue:123,
                }
            }
        })
    </script>
</body>
</html>

1.4 遍歷列表的輸出

v-for

　　作用：控制html元素中的迴圈

　　語法：v-for="item in 集合"

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .A{
            background-color: red
        }
        .B{
            background-color: green
        }
    </style>
</head>
<body>
    <!-- 補充知識點 -->
    <!-- 1：v-for的使用中，除了item屬性，還有一些輔助屬性
            stus：陣列： (item,index) in stus 奇偶數的不同樣式
                ：class="index%2==0?'red':'green'"
                
            stus:物件 (value,key,index) in stus
    -->
    <div id="app"></div>
    <script src="vue-2.4.0.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:
            `
            <div>
                <button>{{myValue}}</button>
                <ul>
                    <li v-for="item in stu" :class="item.score">
                        {{item.name}}
                    </li>    
                </ul>
                <hr/>
                <ul>
                    <li v-for="(val,key,index) in stu2">
                        val:{{val}}
                        key:{{key}}
                        index:{{index}}
                    </li>
                </ul>
            </div>
            `,
            data:function(){
                return {
                    myValue:'example',
                    stu:[
                        {name:'張三',score:'A'},
                        {name:'李四',score:'B'},
                        {name:'王五',score:'A'}
                    ],
                    stu2:{
                        'a':'張三',
                        'b':'李四',
                        'c':'王五'
                    }
                }
            }
        })
    </script>
</body>
</html>

1.5 methods

new Vue({
  el:'#app',
  template:
  `
  <div>
    <h1 v-show="isShow" >1</h1>
    <h1 v-show="isShow" >2</h1>
    <h1 v-show="isShow" >3</h1>
    <h1 v-if="isShow" >4</h1>
    <button @click="changeIsShow">點我</button>
  </div>
  `,
  data:function(){
    return {
      isShow:true
    } 
  },
  //在根屬性中宣告methods
  methods:{
    //key是函式名，value是函式體
    changeIsShow:function(e){
    //this就是data函式return出去的物件
    //vue幫我們處理的this指向，不是事件物件了
    console.log(e.target)
    console.log(this)

    this.isShow = !this.isShow 
    }
  }
})

1.6 filter

將資料進行再次修飾的操作

過濾器分兩種:

　　1）元件內的過濾器（元件內有效）

　　2）全域性過濾器（所有元件共享）

先註冊後使用

元件內 filters: { 過濾器: 過濾器fn } 最終fn內通過return產出最終的資料

使用方法 {{ 原有資料 | 過濾器名 }}

需求

　　頁面input框輸入字串，反轉字串輸出，按引數顯示label（中英文）

過濾器fn：

　　宣告function (data, argv1, argv2...) {}

使用{{ 資料 | 過濾器名(引數1，引數2) }}

        //過濾器可以給資料顯示進行添油加醋
        //需求：原本顯示的資料是abc，反轉成cba
        //需求實現：1、為了互動更好，用Input + v-model來獲取資料到vue中
        //2、輸出 ：{{內容 | 使用過濾器輸出}}
        
        var App = {
            template:`
                <div>
                    <input type="text" v-model="myText" />
                    {{myText | reverse('英文版','!:')}}
                </div>
            `,
            data:function(){
                return {
                    myText:''
                }
            },
            //元件內的過濾器
            filters:{
                reverse:function(dataStr,lang,arg2){ //引數1就是傳遞的原資料
                    return lang + arg2 + dataStr.split('').reverse().join('') //顯示的內容
                }
            }
        }

        //全域性過濾器
        Vue.filter('myreverse',function(data,arg1){
            return data + arg1
        })

1.7 變數監視

watch 監視單個

        var App = {
            template:`
                <div>
                    <input type="text" v-model="myText" />
                    {{myText}}
                    <button @click="stus[0].name = 'rose'">改變stus[0].name屬性</button>
                </div>
            `,
            data:function(){
                return {
                    myText:'111',
                    stus:[
                        {name:'jack',}
                    ]
                }
            },
            watch:{
                //監視複雜型別,無法監視的原因是因為監視的是物件的地址，地址沒改
                //改的是同地址屬性的值
                // stus:function(){
                //     console.log('監視成功，不可能！')

                // },
                //深度監視：object || array
                stus:{
                    deep:true, //深度
                    handler:function(newV,oldV){
                         console.log('監視複雜資料型別成功')
                    }

                },

                //key是屬於data屬性的屬性名，value是監視後的行為
                myText:function(newV,oldV){
                    console.log(newV,oldV)
                    if(newV === 'iloveyou'){
                        alert('我不愛你！')
                    }
                }

            }
        }

computed 監視多個

        var App = {
            template:`
                <div>
                    <input type="text" v-model="n1" />    
                    +
                    <input type="text" v-model="n2" />
                    *
                    <input type="text" v-model="rate" />
                    = {{result}}       
                </div>
            `,
            data:function(){
                return {
                   n1:'',
                   n2:'',
                   rate:'', 
                }
            },
            computed:{
                //包含原值不變，快取不調函式的優化機制
                result:function(){
                    //監視物件，寫在了函式內部，
                    //凡是函式內部有this.相關屬性，改變都會觸發當前函式
                    //this.n1 this.n2 this.rate
                    console.log('監視到了')
                    return (+this.n1 + +this.n2)*this.rate 
                }
            }
            
        }<body> <div id="app"></div> <script src="vue-2.4.0.js"></script> <script> //slot是留坑 var MyLi = { template:`<li> <slot></slot> </li>`  } Vue.component('my-li',MyLi) //slot其實就是父元件傳遞的DOM結構 //vue提供的內建元件<slot></slot> var App = { template:` <div> <ul> <my-li> <button>111</button> </my-li> <my-li> <h1>222</h1> </my-li> <my-li>3</my-li> <my-li>4</my-li> <my-li>5</my-li> <my-li>6</my-li> <my-li>7</my-li> <my-li> <h1>888</h1> </my-li> <my-li> <button>999</button> </my-li> </ul> </div>  `, }

1.8 元件插槽

slot留坑插槽

        //slot是留坑
        var MyLi = {
            template:`<li>
                <slot></slot>
            </li>`
        }
        Vue.component('my-li',MyLi)

        //slot其實就是父元件傳遞的DOM結構
        //vue提供的內建元件<slot></slot>
        var App = {
            template:`
                <div>
                    <ul>
                        <my-li>
                            <button>111</button>
                        </my-li>
                        <my-li>
                            <h1>222</h1>
                        </my-li>
                        <my-li>3</my-li>
                        <my-li>4</my-li>
                        <my-li>5</my-li>
                        <my-li>6</my-li>
                        <my-li>7</my-li>
                        <my-li>
                            <h1>888</h1>
                        </my-li>
                        <my-li>
                            <button>999</button>
                        </my-li>
                    </ul>
                </div>
            `,
        }

具名插槽

 //slot是留坑,外部填入html內容
        var MySlot = {
            template:`<li>
                以下預留第一個坑
                <slot name="one"></slot>
                <hr/>
                以下預留第二個坑
                <slot name="two"></slot>
            </li>`
        }
        Vue.component('my-slot',MySlot)

        //slot其實就是父元件傳遞的DOM結構
        //vue提供的內建元件<slot></slot>
        var App = {
            template:`
                <div>
                    <my-slot>
                        <h1 slot="one">我是1，對應第一個slot</h1>
                        <h1 slot="two">我是2，對應第二個slot</h1>
                    </my-slot>
                </div>
            `,
        }

1.9 生命週期及鉤子函式

        var Test = {
            template:`<div>
                我是test元件{{text}}
                <button @click="text=text+1">更改</button>
            </div>`,
            data:function(){
                return {
                    text:'hello world'
                }
            },
            //-----------------------------------------------
            beforeCreate:function(){
                //元件建立之前
                // console.log(this.test)
                console.log('beforeCreate')
            },
            created:function(){
                //元件建立之後
                // console.log(this.test)
                console.log('created')
            },
            //使用該元件，就會觸發以上的事件函式（鉤子函式）
            //created中可以操作資料。並且可以實現vue到頁面的影響，
            //應用：發起ajax請求

            //-----------------------------------------------
            beforeMount:function(){
                //vue起作用，裝載資料到DOM之前
                // console.log(document.body.innerHTML)
                console.log('beforeMount')
            },
            mounted:function(){
                //vue起作用，裝載資料到DOM之後
                // console.log(document.body.innerHTML)
                console.log('mounted')
            },
            //////////

            //-----------------------------------------------
            //基於資料改變，影響頁面
            beforeUpdate:function(){
                // console.log(document.body.innerHTML) 
                console.log('beforeUpdate') 

            },
            updated:function(){
                // console.log(document.body.innerHTML)
                console.log('updated') 
            },
            //以上兩個是當有更改資料才會觸發
            //應用：beforeUpdate 可以獲取原DOM
            //updated 可以獲取新DOM
            //----------------------------------
            // beforeMount vue啟動前的DOM
            // mounted vue啟動後的DOM 只執行一次

            //-----------------------------------------------
            //對應父元件v-if false 就銷燬當前元件
            beforeDestroy:function(){ //銷燬之前
                // console.log(document.body.innerHTML) 
                console.log('beforeDestroy')
            },
            destroyed:function(){ //銷燬之後
                // console.log(document.body.innerHTML) 
                console.log('destroyed')
            },
            //銷燬，最終都是做一些其他功能的釋放，儲存資料到localstrorage

            //-----------------------------------------------
            activated:function(){
                console.log('元件被激活了')
            },
            deactivated:function(){
                console.log('元件被停用了')
            },           
            //created 和 actived 都是v-if="true" 子元件的狀態
            //created 沒有被keep-alive內建元件包裹，actived被包裹了
            //銷燬和停用同上
        }

前端入職學習筆記-第二週第一天（Vue基礎）

學習路徑 Vue 1、Vue基礎 1.1 安裝Vue 一般vue的安裝以及其開發過程需要用到的一些包的安裝使用的都是npm命令，但是 npm 安裝速度慢，可以使用淘寶的映象及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 映象。

前端入職學習筆記-第四周第一天（python學習）

學習地址：python學習-廖雪峰在正式編寫第一個Python程式前，我們先複習一下什麼是命令列模式和Python互動模式。

前端入職學習筆記-第二週第三天（vue元件傳值：Bus傳值、路由傳值、Vuex傳值）

Bus匯流排 1 定義Bus匯流排　　在main.js中定義Bus匯流排　　　　constBus=newVue() 　　然後將Bus新增到new Vue中的data裡面　　

前端入職學習筆記-第一週第四天

學習路徑 Node.js· 1、Node.js入門 1.1 構建基礎的HTTP伺服器讓我們先從伺服器模組開始。在你的專案的根目錄下建立一個叫server.js的檔案，並寫入以下程式碼：

前端入職學習筆記-第三週第一天

一、使用vue-cli建立模板專案 1、什麼是vue-cli 　　是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將專案需要的環境、依賴等資訊都配置好。

前端入職學習筆記-第三週第二天

Vue跨域問題的解決 (1).什麼是跨域跨域：由於瀏覽器同源策略，凡是傳送請求url的協議、域名、埠三者之間任意一個與當前頁面地址不同即為跨域。存在跨域的情況：

新工作入職學習筆記

今天是來到v公司的第一天，領導下發了學習任務，列表如下： What is Virtualization?, what is VM? What is different and advantage between Virtual VM and physical VM

學習筆記_學習Android開發的第一天（草稿待完善）

計算機領域的概念計算機程式語言（computer programming language）開發一款軟體（software）的過程：

演算法學習筆記：最近公共祖先（LCA問題）

當我們處理樹上點與點關係的問題時（例如，最簡單的，樹上兩點的距離），常常需要獲知樹上兩點的最近公共祖先（Lowest Common Ancestor，LCA）。如下圖所示：

MySQL學習筆記十六：事件（定時任務）

一、事件概述 1.1、事件簡介事件（Event）是MySQL在相應的時刻呼叫的過程式資料庫物件。一個事件可呼叫一次，也可週期性的啟動，它由一個特定的執行緒來管理的，也就是所謂的\"事件排程器\"。

【MyBatis】學習筆記13：延遲載入（懶載入）

目錄 Mybatis13：延遲載入（懶載入）測試測試1 測試2 部分特殊情況處理 Mybatis13：延遲載入（懶載入）

滄小海的《xilinx的A7系列晶片資源學習筆記》之第一部分：I/O BANK(二)

2.2.2 IDELAYE2 每個引腳都有對應的IDELAY2模組，如下圖所示，它的作用就是對輸入資料進行延遲指定時間。

滄小海的《xilinx的A7系列晶片資源學習筆記》之第一部分：I/O BANK(一)

目錄 2 I/O BANK 2.2 IB的邏輯資源 2.2.1 ILOGIC 2 I/O BANK部分這部分內容主要參考是《ug471》，該使用者指南主要有三章內容，其中第二章闡述IOB的電氣特性及相關標準，第三章闡述常規的輸入輸出暫存器

《高效能MySQL》學習筆記——第二章 MySQL基準測試

第二章 MySQL基準測試基準測試：是針對系統設計的一種壓力測試。 2.1 為什麼需要基準測試

QT學習筆記和踩坑記錄（第一天）

技術標籤：QTqt 文章目錄 QT學習筆記：0001 註釋的快捷鍵0002 檢視幫助文件0003 Q_UNUSED0004 Q_OBJECT0005 setParent()0006 QPainter繪圖0007 qDebug0008 connect函式詳解**QT4的connect函式**詳解：**QT5的c