小滴課堂-學習筆記：全棧工程師必備之新版Vue2.6 急速掌握核心内容

願景："讓程式設計不再難學，讓技術與生活更加有趣"

更多架構課程請通路 xdclass.net

第1集新版VueCli 4.3建立vue項目

第2集新版Vue快速入門之Vue指令和參數

第3集新版Vue快速入門之v-if 和v-else條件指令

第4集新版Vue快速入門之v-for 循環指令

第5集新版Vue快速入門之v-model

第6集新版Vue快速入門之v-on監聽事件

第7集 Vue常見縮寫 v-bind和v-on講解

第8集新版Vue快速入門之component元件

第9集新版Vue快速入門之prop向子元件傳值

小滴課堂前端項目技術棧介紹和ES6知識點補充

第1集小滴課堂前端項目技術元件概述

第2集 ECMAScript 6常見文法快速入門《上》

第3集 ECMAScript 6常見文法快速入門《下》

幹貨文檔

第1集新版VueCli 4.3建立vue項目

簡介：使用vue cli 4.3建立vue項目

Vue模闆文法開發起步
- 基于 HTML 的模版文法，允許聲明式地将 DOM 綁定至底層 Vue 執行個體的資料。
- 用簡潔的模闆文法來聲明式的将資料渲染進 DOM 的系統。
- 結合響應系統，在應用狀态改變時， Vue 能夠智能地計算出重新渲染元件并應用到 DOM 操作上
建立測試vue項目
```
vue create my-project
           
```
vue-cli建立項目，目錄介紹
vscode打開項目
- 需要打開檔案夾，檔案夾裡面建立Html
原生Vue測試基礎文法
使用cdn引入vue

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>小滴課堂vue快速入門</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>

{{}}

文本插值

裡面JavaScript 表達式支援

{{5+5}}
{{ message.split('').reverse().join('') }}

Vscode裡面快速打開html
- 安裝 Live Server 插件

第2集新版Vue快速入門之Vue指令和參數

簡介：講解什麼是Vue指令

VUE的文檔 https://cn.vuejs.org/
指令 :帶有 v- 字首的特殊屬性。指令用于在表達式的值改變時，将某些行為應用到 DOM
- v-bind 指令
  - HTML 屬性中的值更新時使用
- v-if v-else 指令
  - 邏輯判斷
- v-model 指令
  - 實作雙向資料綁定，
  - 一般在 input、select、textarea、checkbox、radio等表單上使用
- v-on指令
  - 監聽事件，并對使用者的輸入進行響應
參數: 在指令後以冒号指明，例如 v-bind 指令被用來響應地更新 HTML 屬性
```
<p> <a v-bind:href = "url" > 小滴課堂 </a>  </p>
           
```

附加：指令表達式取值是不用加雙花括号

第3集新版Vue快速入門之v-if 和v-else條件指令

簡介：講解新版Vue條件指令

v-if v-else邏輯判斷

<div id="app">

        <div v-if="Math.random() > 0.5 "> 大于0.5  </div>

        <div v-else>小于0.5  </div>
        
</div>


<script>
        new Vue({
            //綁定到哪個元素
            el:'#app',

            //資料源
            data:{

            },

            //自定義方法
            methods: {
                
            }
        })
</script>

第4集新版Vue快速入門之v-for 循環指令

簡介：講解新版Vue的v-for 循環指令

v-for 循環指令

<div id="app">

        <ol>
            <li v-for=" user in users "> 
                {{user.name}}
            </li>
        </ol>
</div>
<script>
        new Vue({
            //綁定到哪個元素
            el:'#app',
            //資料源
            data:{
                users:[
                    {name: "Anna小姐姐"},
                    {name: "老王"},
                    {name: "二當家小D"},
                ]
            },
            //自定義方法
            methods: {
                
            }
        })
</script>

第5集新版Vue快速入門之v-model

簡介：講解新版Vue的v-model

v-model 實作雙向資料綁定

<div id="app">

       <p> {{phone}} </p>
       手機号 <input v-model="phone"  />
        
    </div>

    <script>
        new Vue({
            //綁定到哪個元素
            el:'#app',

            //資料源
            data:{
                phone : "000"
            },

            //自定義方法
            methods: {
                
            }
        })
    </script>

第6集新版Vue快速入門之v-on監聽事件

簡介：講解新版Vue的v-on指令監聽事件

v-on 監聽事件

<div id="app">


        <p> {{title}} </p>
       
        <button v-on:click="changeTitle"> 完善标題 </button>
        
    </div>


    <script>
        new Vue({
            //綁定到哪個元素
            el:'#app',

            //資料源
            data:{

              title: "面試專題課程"

            },

            //自定義方法
            methods: {
                changeTitle:function(){
                    this.title = "||小滴課堂 2020年 " + this.title;
                }

            }
        })
    </script>

第7集 Vue常見縮寫 v-bind和v-on講解

簡介：vue常見縮寫v-bind和v-on講解

v-bind縮寫

<!-- 完整文法 -->
<a v-bind:href="url" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >...</a>

<!-- 縮寫 -->
<a :href="url" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >...</a>

v-on縮寫

<!-- 完整文法 -->
<a v-on:click="changeTitle">...</a>

<!-- 縮寫 -->
<a @click="changeTitle">...</a>

課程代碼

<div id="app">


        <p> {{title}} </p>
       
        <button @click="changeTitle"> 完善标題 </button>
        <p/>
        <a :href="url" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  > 點選跳轉 </a>

    </div>


    <script>
        new Vue({
            //綁定到哪個元素
            el:'#app',

            //資料源
            data:{

              title: "面試專題課程",
              url : "https://xdclass.net"

            },

            //自定義方法
            methods: {
                changeTitle:function(){
                    this.title = "||小滴課堂 2020年 " + this.title;
                }

            }
        })
    </script>

第8集新版Vue快速入門之component元件

簡介：講解vue裡面的元件

vue的元件
- 擴充 HTML 元素，封裝可重用的代碼（就是通用的子產品）
注冊元件
- Vue.component(元件名, 選項)
元件可以拷貝多次，複用多次
- 每個元件都會各自獨立維護它的資料
- data 必須是一個函數，而不是前面講的json對象
  - 每個執行個體可以維護一份被傳回對象的獨立的拷貝, 否則資料就會共享出現問題

<div id="app">
       
        <xd_component></xd_component>
        <xd_component></xd_component>
        <xd_component></xd_component>
        <xd_component></xd_component>

    </div>
    <script>
    Vue.component('xd_component',{
        data:function(){
            return {
                count: 0
            }
        },
        template:' <button v-on:click="count++">  點選 {{count}}次  </button> '
    })
        new Vue({
            //綁定到哪個元素
            el:'#app',

            //資料源
            data:{
            },

            //自定義方法
            methods: {

            }
        })
    </script>

第9集新版Vue快速入門之prop向子元件傳值

簡介：講解vue裡面通過prop向子元件傳值

<div id="app">
       
        <xd_component message="小滴課堂 https://xdclass.net"></xd_component>

        <xd_component message="面試專題"></xd_component>

</div>



<script>

    Vue.component('xd_component',{
       
       props:{
           message:{
               type:String
           }
       },
       data:function(){
        return {
            count : 0
        }
       },
       //元件裡面的template隻能包含一個根節點
        template:'<div> <button v-on:click="count++"> {{message}}  點選 {{count}}次  </button> </p> </div> '

    })


   new Vue({
            //綁定到哪個元素
            el:'#app',

            //資料源
            data:{

            },

            //自定義方法
            methods: {

            }
        })
</script>

向子元件傳外部data的裡值,需要加 v-bind

<xd_component message="小滴課堂 https://xdclass.net" v-bind:XXXX></xd_component>
或縮寫
<xd_component message="小滴課堂 https://xdclass.net" :XXXX></xd_component>

小滴課堂-學習筆記：全棧工程師必備之新版Vue2.6 急速掌握核心内容

願景："讓程式設計不再難學，讓技術與生活更加有趣"

小滴課堂前端項目技術棧介紹和ES6知識點補充

第1集小滴課堂前端項目技術元件概述

簡介：常見的技術元件的作用

學前必備基礎： HTML、CSS 、JavaScript、Vue 基礎知識
Vue: 用于建構使用者界面的漸進式JavaScript架構
什麼是Cube-UI
- 基于 Vue.js 實作的精緻移動端元件庫
- 位址：https://didi.github.io/cube-ui/#/zh-CN
Vuex: 在Vue項目開發時使用的狀态管理工具
- state：存儲資料
- mutations：同步修改存儲資料
- actions: 異步修改存儲資料
- getters：擷取存儲資料前進行修改
Axios: 是一個基于Promise 用于浏覽器和 nodejs 的 HTTP 用戶端
- 從浏覽器中建立 XMLHttpRequest,也可以 node.js 發出 http 請求，
- 支援 Promise API
- 支援攔截請求和響應，并轉換資料

Vue-router：Vue官方的路由管理器，實作頁面前端路由 Hash模式（預設）： History模式：

第2集 ECMAScript 6常見文法快速入門《上》

簡介：講解ES6裡面常見的文法上集

什麼是ES6 ECMAScript 6（簡稱ES6）是于2015年6月正式釋出的JavaScript語言的标準，正式名為ECMAScript 2015（ES2015）。它的目标是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言
let、const 文法 let : 定義變量，推薦在函數中使用 let 定義變量，而非 var const：它可以聲明一個常量（如果是普通的變量一般大寫）

箭頭函數： ES6 中，箭頭函數就是函數的一種簡寫形式，使用括号包裹參數，跟一個 =>，緊接着是函數體

//以前js定義函數
var sum = function(num1,num2) {
   return num1 + num2;
};
  
// 使用箭頭函數
let sum = (num1,num2) => num1 + num2;

對象詞法擴充: 在對象字面量時使用簡寫文法，來初始化屬性變量和函數的定義方法

function getVideo(make, model, value) {
  return {
    // 簡寫變量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value
  };
}
 
let video = getVideo('java', 'java', 99);

 output: {
   make: 'java',
   model:'java',
   value: 99,
}

第3集 ECMAScript 6常見文法快速入門《下》

簡介：講解ES6裡面常見的文法下集

解構指派一種針對數組或者對象進行模式比對，然後對其中的變量進行指派

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'

在ES6中如何導入子產品 import 子產品名稱 from '子產品辨別符'

import axios from 'axios'

import { loginApi } from '@/api/getData.js'

在ES6中如何導出子產品

方式一： export default 向外暴露的成員可以使用任意的變量來接收注意：在一個子產品中隻能使用export default向外暴露一次

//user.js
export default {
    name: 'xdclass.net',
    age: 10
}

//main.js
import xd from './user'
//xd 為一個包含 name 和 age 屬性的對象

方式二： export 向外暴露的成員隻能使用 {} 接收，這叫做按需導出注意：一個子產品中可以同時使用 export default 和 export 暴露成員

// user.js
export default {
    name: 'xdclass.net',
    age: 10
}

export var teacher = "小滴課堂-二當家小D"
export var content = '全棧工程，和隔壁老王比較熟悉'
//main.js
import xd, { teacher,content } from './user'

幹貨文檔

小滴課堂-學習筆記：全棧工程師必備之新版Vue2.6 急速掌握核心内容

關注公衆号發送：“CSDN幹貨文檔” 即可領取

小滴課堂-學習筆記：全棧工程師必備之新版Vue2.6 急速掌握核心内容

小滴課堂-學習筆記：全棧工程師必備之新版Vue2.6 急速掌握核心内容

第1集新版VueCli 4.3建立vue項目

第2集新版Vue快速入門之Vue指令和參數

第3集新版Vue快速入門之v-if 和v-else條件指令

第4集新版Vue快速入門之v-for 循環指令

第5集新版Vue快速入門之v-model

第6集新版Vue快速入門之v-on監聽事件

第7集 Vue常見縮寫 v-bind和v-on講解

第8集新版Vue快速入門之component元件

第9集新版Vue快速入門之prop向子元件傳值

小滴課堂前端項目技術棧介紹和ES6知識點補充

第1集小滴課堂前端項目技術元件概述

第2集 ECMAScript 6常見文法快速入門《上》

第3集 ECMAScript 6常見文法快速入門《下》

幹貨文檔

繼續閱讀

Cloud Studio初體驗

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

使用 ctypes 進行 Python 和 C 的混合程式設計

【python】【資料處理】畫多元資料分布圖

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【python】netconf協定對接管理裝置

「Python 網絡自動化」NETCONF —— Python 使用 NETCONF 管理配置 H3C 網絡裝置

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目

scala (3) Function 和 Method

在python中建立excel并寫入

小滴課堂-學習筆記：全棧工程師必備之新版Vue2.6 急速掌握核心内容

第1集 新版VueCli 4.3建立vue項目

第2集 新版Vue快速入門之Vue指令和參數

第3集 新版Vue快速入門之v-if 和v-else條件指令

第4集 新版Vue快速入門之v-for 循環指令

第5集 新版Vue快速入門之v-model

第6集 新版Vue快速入門之v-on監聽事件

第7集 Vue常見縮寫 v-bind和v-on講解

第8集 新版Vue快速入門之component元件

第9集 新版Vue快速入門之prop向子元件傳值

小滴課堂前端項目技術棧介紹和ES6知識點補充

第1集小滴課堂前端項目技術元件概述

第2集 ECMAScript 6常見文法快速入門《上》

第3集 ECMAScript 6常見文法快速入門《下》

幹貨文檔

繼續閱讀

第1集新版VueCli 4.3建立vue項目

第2集新版Vue快速入門之Vue指令和參數

第3集新版Vue快速入門之v-if 和v-else條件指令

第4集新版Vue快速入門之v-for 循環指令

第5集新版Vue快速入門之v-model

第6集新版Vue快速入門之v-on監聽事件

第8集新版Vue快速入門之component元件

第9集新版Vue快速入門之prop向子元件傳值