目錄

1、講在前面

課程內容

實訓課內容

學習能力：
- 新技術的心態（平和，積極）
- 閱讀能力（提取知識點）
- 解決問題能力（思路、方法）
- 項目實戰能力（開發能力）

2、Vue.js介紹

Vue.js---漸進式JavaScript框架

JavaScript---網頁交互行爲---基於瀏覽器

什麼是JavaScript：是一門編程語言。客戶端腳本語言！負責交互、客戶端業務邏輯的開發。

什麼是框架：一個已經具有基本雛形的體系技術點，可以在這個的基礎上快速地開發自己的項目應用。

Vue.js 是一個JavaScript 框架。

框架 --> 簡化程序開發（代碼量較少）

2.1、安裝

開發環境

開發環境：項目研發階段，程序還在開發。

生產環境：項目已經研發結束，項目已經部署。

版本介紹

2.2、基礎使用

引入Vue.js---方式1

引入Vue.js---方式2

輸出Vue.js的構造函數

使用Vue.js的3個步驟

原生實現（不使用Vue.js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1></h1>
    <h3></h3>
</body>
<script>
    var h1 = document.getElementsByTagName("h1");
    h1.innerHTML = "hello,同學們！"

    var h3 = document.getElementsByTagName("h3")[0];
    h3.innerHTML = "hello,老師！"
</script>
</html>

2.3、數據的展示

var、let區別

var定義的變量：全局變量或者函數變量。
let定義的變量：塊級的變量。

插值表達式

el 是指定作用的範圍。

data是指定範圍內使用到的數據。
如何渲染數據呢？
在模板範圍標籤之內，通過 {{}} 實現數據展示。
 {{ data裏面的屬性 }}
上述這種數據展示的方法叫做 插值表達式。在元素標籤內使用，傳入變量，顯示Vue對象中的data值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01、vue.js基礎使用</title>

    <!-- 第1步： 安裝vue.js -->

    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->

    <script src="./vue.js"></script>
</head>

<body>
    <!-- 第2步： 書寫一個容器標籤 -->
    <div id="box">
        <h1>{{msg}}</h1> <!--展示變量需要用“{{ }}”-->
        <h3>{{str}}</h3>
        <h4>{{txt}}</h4>
    </div>
    <hr>
    <!-- 下面不會生效！ -->
    <h1>{{msg}}</h1>
    <h3>{{str}}</h3>
    <h4>{{txt}}</h4>
</body>
<script>
    console.log(Vue)
    // 第3步： 實例化一個Vue對象
    new Vue({ // Vue傳遞的是對象-->“{}”
            el: "#box",  // el 的意思就是將這個對象和上面的節點捆綁起來！---類似於CSS中的id選擇器
            data:{       // 所有el關聯的標籤範圍內的數據 都是在這個data對象裏存儲着！
               //    msg:"hello,vue.js!",
               msg:"<i>你好啊</i>", 
               str:"天王蓋地虎啊！",
               txt:"非常的棒！"
            }
        })
</script>
</html>

3、常用指令

3.1、指令介紹

3.2、常用指令

1、v-html（解析 HTML 代碼）

作用：渲染數據，功能和插值表達式渲染變量功能一致。

不同點：

v-html 渲染數據，在模板還沒有編譯完成時候，頁面上面是空白的；而插值表達式的方法，頁面上的數據是有 {{}} 這樣的內容存在，給用戶的體驗感不好。

v-html 可以編譯HTML字符串內容。【插值表達式--{{}}、v-text，均不會對字符串進行編譯。】

2、v-text（渲染普通文本）

作用：渲染數據，功能和插值表達式渲染變量功能一致。

不同點：

v-html 渲染數據，在模板還沒有編譯完成時候，頁面上面是空白的。而插值表達式的方法，頁面上的數據是有 {{}} 這樣的內容存在，給我用戶的體驗感不好。

3、v-bind（綁定數據）

屬性綁定。我們v-html,v-text,{{}} 只能實現給標籤之間設置內容。但是，標籤的屬性值是某個數據時，需要使用到 v-bind指令。
<標籤 v-bind:標籤屬性="變量/表達式"></標籤>
<標籤       :標籤屬性="變量/表達式"></標籤> // 縮寫

【{{插值表達式}}、v-html、v-text、v-bind】區別圖

v-html 可以編譯HTML字符串內容。【插值表達式--{{}}、v-text，均不會對字符串進行編譯。】

框架便利之處：data中的數據一旦發生變化，模板(HTML)中的數據自動發生變化。【數據綁定】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03、常用指令使用</title>
    <script src="./vue.js"></script>
    <style>
        img {
            max-width: 80%;/*設置最大寬度*/
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 v-html="msg"></h1>
        <h1 v-text="msg"></h1>
        <p>{{msg}}</p>
        
        <!-- <img v-bind:src="imgurl" alt=""> -->
        <img :src="imgurl" alt="">

        <a :href="link">跳轉</a>
    </div>
    <img src="" alt="" id="" class=""><!-- src/alt/id/class 這些都是標籤的原生屬性。 -->
</body>
<script>
    // 含義： vue.js 給標籤開發的屬性  就稱之爲 指令！
    // 本質： 指令就是標籤的屬性！
    new Vue({
        el: "#app",
        data: {
            // msg:"你好"
            msg: "<i>你好啊</i>",
            link: "http://www.taobao.com",
            imgurl: "http://zkres0.myzaker.com/201806/5b2cbabaa07aec900301e844_640.jpg"
        }
    })
</script>
</html>

4、v-if（條件渲染）

作用：顯示不同的模板內容。

<標籤 v-if="條件"></標籤>
<標籤 v-else-if="條件"></標籤>
<標籤 v-else></標籤>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>04、條件渲染</title>
    <script src="./vue.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 2px solid blue;
            overflow: hidden;
        }

        img {
            max-width: 80%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" v-if="state">有數據哦！ 是一個列表！</div>
        <div class="box" v-else>沒有的哦！。。。。
            <img
                src="http://aliyunzixunbucket.oss-cn-beijing.aliyuncs.com/jpg/65e50d4fd3bd91bdcfcbdb7281b8b3ab.jpg?x-oss-process=image/resize,p_100/auto-orient,1/quality,q_90/format,jpg/watermark,image_eXVuY2VzaGk=,t_100">
        </div>
        <hr>
        <div class="box" v-show="state">有數據哦！ 是一個列表！</div>
        <div class="box" v-show="!state">沒有的哦！。。。。
            <img src="http://aliyunzixunbucket.oss-cn-beijing.aliyuncs.com/jpg/65e50d4fd3bd91bdcfcbdb7281b8b3ab.jpg?x-oss-process=image/resize,p_100/auto-orient,1/quality,q_90/format,jpg/watermark,image_eXVuY2VzaGk=,t_100">
        </div>

        <h1>
            訂單狀態：
            <span v-if="status==1">未發貨</span>
            <span v-else-if="status==2">已發貨</span>
            <span v-else-if="status==3">已簽收</span>
            <span v-else-if="status==4">已評價</span>
            <span v-else-if="status==5">已結束</span>
            <span v-else>未知狀態！</span>
        </h1>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            // arr: ['新聞1', '新聞2', '新聞3', '新聞4'],
            // // arr:[],
            state: true,
            status: 1,   // 1 未發貨   2 已發貨  3 已簽收  4 已評價  5 已結束
        }
    })
    console.log(vm.state)
    setInterval(function () { // 計時器【可按照指定的週期（以毫秒計）來調用函數或計算表達式。】
        vm.state = !vm.state;
        vm.status++;
    }, 1000)

// data裏面的數據都是 Vue實例對象的屬性！

// <標籤 v-if="條件"></標籤>
// <標籤 v-else-if="條件"></標籤>
// <標籤 v-else></標籤>

</script>

</html>

5、v-for（列表渲染）

作用：渲染數據列表。

1、// 得到 數組/對象 中的每一個元素
<標籤 v-for="標識符  in  數組/對象"></標籤>

2、// 得到 數組/對象 中的每一個元素及其 下標/key值
<標籤 v-for="(標識符,下標標識符)  in  數組/對象"></標籤>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05、列表渲染</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>要做的事情：</h2>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>

        <hr>
        <ul>
            <li v-for="(val,key) in person"> {{key}} === {{val}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,idx) in list">{{item}}====={{idx}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in student">
                <h3>序號：{{index+1}} ===>
                    姓名：{{item.name}}===
                    年齡：{{item.age}}==
                    性別：{{item.sex ? '男':'女' }}
                </h3>
                <h4>他的朋友們：</h4>
                <ul>
                    <li v-for="(val,idx) in item.friend">
                        <h5>
                            編號：{{idx+1}}===>
                            姓名：{{val.name}}
                            年齡：{{val.age}}
                            性別：{{val.sex ? "先生":"女士"}}
                        </h5>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            list: ["1-看新聞", '2-吃午飯', '3-看電影', '4-LOL'],
            person: {
                name: "小喬",
                desc: "三國時期的美女",
                sex: "女",
                h: "165"
            },
            student: [
                {
                    name: "宋壹",
                    age: 10,
                    sex: 1,
                    friend: [
                        { name: '宋壹兒子', age: 10, sex: 0 },
                        { name: '宋壹女兒', age: 12, sex: 1 }
                    ]
                },
                {
                    name: "丁二",
                    age: 10,
                    sex: 1,
                    friend: [
                        { name: '丁二兒子', age: 30, sex: 1 },
                        { name: '丁二女兒', age: 22, sex: 1 }
                    ]
                },
                {
                    name: "張三",
                    age: 50,
                    sex: 1,
                    friend: [
                        { name: '張三兒子', age: 50, sex: 1 },
                        { name: '張三女兒', age: 62, sex: 1 }
                    ]
                }
            ]
        }
    })
    //  <標籤 v-for="標識符  in  數組/對象"></標籤>
    //  <標籤 v-for="(標識符,下標標識符)  in  數組/對象"></標籤>
</script>

</html>

點個贊、加個關注，再走啊，謝謝老闆~

Vue.js-Day01-AM【第一次學習-安裝、基礎使用(引入方式)、數據展示、指令介紹(v-html、v-text、v-bind、v-if、v-for】

1、講在前面

課程內容

實訓課內容

2、Vue.js介紹

2.1、安裝

開發環境

版本介紹

2.2、基礎使用

引入Vue.js---方式1

引入Vue.js---方式2

輸出Vue.js的構造函數

使用Vue.js的3個步驟

原生實現（不使用Vue.js）

2.3、數據的展示

var、let區別

插值表達式

3、常用指令

3.1、指令介紹

3.2、常用指令

1、v-html（解析 HTML 代碼）

2、v-text（渲染普通文本）

3、v-bind（綁定數據）

【{{插值表達式}}、v-html、v-text、v-bind】區別圖

4、v-if（條件渲染）

5、v-for（列表渲染）

致遠OA及相關OA系統集成與二次開發

System.Object未被引用的程序集中定義

Java 信號量（semaphore）搭配CountDownLatch 實現多線程處理循環內邏輯並限制創建線程數

【面試準備】項目經驗——接口自動化項目

微信小程序02【配置詳解（頁面、窗口、tabBar、網絡超時、debug）】

微信小程序01【目錄結構詳解、視圖與渲染、事件、input、scroll-view】

JavaScript基礎03【算數運算符、一元運算符、自增and自減】

微信小程序基礎4【互聯網軟件的開發流程】

數學建模【數據處理方法-一維、二維插值方法；數據擬合方法；插值and擬合的MATLAB實現】

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結