240913vue1

1 使用Vue框架

<body>
    <div id="app">
        
    </div>
    <!-- 使用vue 框架 引入vue -->
    <script src="./vue.js"></script>
    <script>
        // new 創(chuàng)建 Vue框架 也可以理解為將vue框架實(shí)例化 V必須大寫
        //對象 object 是鍵值對存值
        new Vue({
            el: '#app',//必須要寫el掛載點(diǎn)將vue框架給誰用
            data: {//數(shù)據(jù)源 存數(shù)據(jù)用的對象
                //將數(shù)據(jù)渲染到頁面上
                name: "我叫景明", //字符串類型
                age: 18
            }
        })
    </script>
</body>

2 內(nèi)容渲染指令 {{}}

<body>
    <div id="app">
        <!-- 在綁定的el掛載點(diǎn) #標(biāo)簽里 寫上2個(gè) {{}}  -->
         <!-- 這個(gè)2個(gè){{}}中間 寫渲染的對象 -->
        {{name}}
        {{age}}
        我是{{name}},我今年{{age}}歲
    </div>
    <!-- 使用vue 框架 引入vue -->
    <script src="./vue.js"></script>
    <script>
        // new 創(chuàng)建 Vue框架 也可以理解為將vue框架實(shí)例化 V必須大寫
        //對象 object 是鍵值對存值
        new Vue({
            el: '#app',//必須要寫el掛載點(diǎn)將vue框架給誰用
            data: {//數(shù)據(jù)源 存數(shù)據(jù)用的對象
                //將數(shù)據(jù)渲染到頁面上
                name: "景明", //字符串類型
                age: 18
            }
        })
    </script>
</body>

3 雙向綁定指令--作用：表單綁定v-model

# <!-- 語法 -->
<div id="app">
    <input type="text" v-model="value">
    <div>{{value}}</div>
</div>
<!-- js data: { value:"" //綁定數(shù)據(jù)源 } -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fun {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 想獲取輸入框的內(nèi)容 就需要用雙向數(shù)據(jù)綁定 -->
        <!-- 將輸入的內(nèi)容 通過v-model 存到數(shù)據(jù)源value中去 -->
        <input type="text" v-model="value">
        <!-- 證明 -->
        {{value}}
    </div>
    <!-- 1.引入vue框架 只有引入成功了  才能繼續(xù) -->
    <script src="vue.js"></script>
    <!-- 使用vue框架 -->
    <script>
        // 創(chuàng)建vue框架
        new Vue({
            el: "#app",//掛載點(diǎn)
            data: {//數(shù)據(jù)源
                message: "hello Vue!",
                value: ""
            }
        })
    </script>
</body>

</html>

4.事件綁定指令 @click綁定

<!-- 語法 -->
<!-- <div id="app">
    <button @click="clickMoney">點(diǎn)擊+1</button>
    <h2>我的money：{{money}}</h2>
</div> -->
<!-- methods：定義屬于Vue實(shí)例的自定義方法, 專門寫事件的地方。 -->
<!-- <script>
    let app = new Vue({
        el: "#app",
        data: {
            money: 0
        }, methods: {
            clickMoney() {
                // 需要用this來從data數(shù)據(jù)源中找到這個(gè)數(shù)據(jù)
                this.money++
            }
        },
    })
</script> -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fun {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        {{message}}
        <!-- @click 點(diǎn)擊事件 -->
        <button @click="a">按鈕</button>
        <button @click="b">點(diǎn)擊改變內(nèi)容</button>
    </div>
    <!-- 1.引入vue框架 只有引入成功了  才能繼續(xù) -->
    <script src="vue.js"></script>
    <!-- 使用vue框架 -->
    <script>
        // 創(chuàng)建vue框架
        new Vue({
            el: "#app",//掛載點(diǎn)
            data: {//數(shù)據(jù)源
                message: "hello Vue!",
                value: ""
            },
            methods: {//事件源
                // 寫第一個(gè)事件
                a() {
                    // 在事件a里面寫上你要做什么事情
                    alert("這是第一個(gè)事件")
                },
                b() {//方法b 我想改變的是數(shù)據(jù)源message的內(nèi)容
                    // 通過this.message 數(shù)據(jù)源的message
                    this.message = "床前明月光，疑是地上霜"
                }
            }
        })
    </script>
</body>

</html>

我們需要多少個(gè)事件就可以在methods中寫多少個(gè)函數(shù) 如果需要使用就使用@click進(jìn)行一個(gè)綁定

5.條件渲染指令 可以讓內(nèi)容進(jìn)行一個(gè)顯示和隱藏

<!-- 語法   可以讓內(nèi)容進(jìn)行一個(gè)顯示和隱藏-->
<!-- v-if  根據(jù)條件動(dòng)態(tài)的插入或移除元素，元素的存在與否取決于條件的真假。當(dāng)條件為真時(shí)，元素將
被渲染到DOM中，當(dāng)條件為假時(shí)，元素將從DOM中移除 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="clickFlag">點(diǎn)擊可以顯示和隱藏</button>
        <h2 v-if="flag">我綁定了v-if 可以通過點(diǎn)擊按鈕讓我顯示或掩藏</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                flag: true
            }, methods: {
                clickFlag() {  //事件叫clickFlag
                    this.flag = !this.flag
                }
            },
        })
    </script>
</body>

</html>
<!-- v-show  用于根據(jù)條件來顯示或隱藏元素。它基于CSS的display屬性進(jìn)行切換，元素仍然存在于
DOM中，只是通過設(shè)置display屬性開控制其可見性。如果條件為真，元素將顯示，如果條件為
假，元素將隱藏 -->
<div id="app">
    <button @click="clickFlag">點(diǎn)擊可以顯示和隱藏</button>
    <h2 v-show="flag">我綁定了v-show 可以通過點(diǎn)擊按鈕讓我顯示或掩藏</h2>
</div>
<script>
    let app1 = new Vue({
        el: "#app",
        data: {
            flag: true
        }, methods: {
            clickFlag() {  //事件叫clickFlag
                this.flag = !this.flag
            }
        },
    })
</script>
<!-- v-show和v-if的區(qū)別：
v-show是通過css diaplay：none來顯示和隱藏
v-if是通過刪除和添加dom元素 來顯示和隱藏 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fun {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 你要讓誰隱藏那就把指令給誰  當(dāng)條件不成立就會(huì)隱藏-->
        <!-- 這個(gè)值不靈活 如何讓值變得更靈活-->
        <!-- 同胞兄弟 叫v-show -->
        <!-- v-if 和 v-show 效果沒有區(qū)別-->
        <!-- v-if 刪除標(biāo)簽 添加標(biāo)簽-->
        <!-- v-show 通過css style="display: none;的屬性來控制刪除和隱藏-->
        <!-- 什么時(shí)候用 v-show 什么時(shí)候用 v-if-->
        <!-- v-if更耗性能 用的少的時(shí)候用v-if -->
        <!-- v-show 用的多的時(shí)候 用v-show -->
        <div class="fun" v-show="flag"></div>
        <button @click="a">點(diǎn)擊顯示和隱藏</button>
    </div>
    <!-- 1.引入vue框架 只有引入成功了  才能繼續(xù) -->
    <script src="vue.js"></script>
    <!-- 使用vue框架 -->
    <script>
        // 創(chuàng)建vue框架
        new Vue({
            el: "#app",//掛載點(diǎn)
            data: {//數(shù)據(jù)源
                flag: true//只要改變flag這個(gè)變量就能讓盒子顯示和隱藏
            },
            methods: {//事件源
                a() {
                    // this.flag = false
                    // 我想點(diǎn)了隱藏 再點(diǎn)就顯示這個(gè)怎么做？
                    // 能不能一行搞定
                    // if(this.flag == true){//如果數(shù)據(jù)源flag等于true
                    //   this.flag = false//那我就讓值變成false
                    // }else{
                    //   this.flag = true
                    // }
                    // 只有兩個(gè)值
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>

</html>

6列表渲染指令 v-for

<!-- v-for   key：唯一標(biāo)識符 不加上不會(huì)報(bào)錯(cuò) 加上會(huì)提升性能 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue框架 只有引入成功了  才能繼續(xù) -->
    <script src="./vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <!-- {{list}} -->
        <!-- v-for列表渲染語句 -->
        <!-- :key 唯一標(biāo)識符 不加上不會(huì)報(bào)錯(cuò) 加上會(huì)提升性能 -->
        <!-- 通常最好使用唯一的，不會(huì)變的標(biāo)識符，如item.id -->
        <div class="fun" v-for="item in list" :key="item.id">
            {{item.name}}
            {{item.age}}
        </div>
    </div>
    <!-- 使用vue框架 -->
    <script>
        // 創(chuàng)建vue框架
        new Vue({
            el: "#app",//掛載點(diǎn)
            data: {//數(shù)據(jù)源
                list: [//這個(gè)格式的值非常常見 數(shù)組對象
                    {
                        id: 1,
                        name: "景明",
                        age: 18
                    },
                    {
                        id: 2,
                        name: "景明1",
                        age: 20
                    },
                    {
                        id: 3,
                        name: "景明3",
                        age: 21
                    },
                ]
            },
            methods: {//事件源

            }
        })
    </script>
</body>

</html>

7 案例練習(xí)

設(shè)計(jì)一個(gè)按鈕
在數(shù)據(jù)源定義一個(gè)數(shù)據(jù)value，并將value渲染到頁面
并給按鈕一個(gè)事件，每次點(diǎn)擊按鈕都讓value的值加10
當(dāng)value的值等于30我們就讓value的值隱藏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <div v-if="flag">{{value}}</div>
        <button @click="a">按鈕</button>
    </div>
    <!-- 1.引入vue框架 只有引入成功了  才能繼續(xù) -->
    <script src="vue.js"></script>
    <!-- 使用vue框架 -->
    <script>
        // 創(chuàng)建vue框架
        new Vue({
            el: "#app",//掛載點(diǎn)
            data: {//數(shù)據(jù)源
                value: 0,
                flag: true
            },
            methods: {//事件源
                a() {
                    this.value += 10 // 讓這個(gè)值累加10
                    if (this.value == 30) {//如果value等于30那就讓this.flag = false
                        this.flag = false
                    } else {
                        this.flag = true // 不等于30就顯示
                    }
                }
            }
        })
    </script>
</body>

</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容