天天看點
傳回

後端天天學Vue【一基本結構】

前言：

👏作者簡介：我是笑霸final，一名熱愛技術的在校學生。

📝個人首頁：​笑霸final的首頁​ 📕系列專欄：前端 📧如果文章知識點有錯誤的地方，請指正！和大家一起學習，一起進步👀

🔥如果感覺部落客的文章還不錯的話，👍點贊👍 + 👀關注👀 + 🤏收藏🤏

後端天天學Vue【一基本結構】

  • ​​零 準備工作​​
  • ​​一 模闆文法​​
  • ​​二 資料綁定​​
  • ​​三 el和data的其他寫法​​
  • ​​四 Vue(一)總結​​

零 準備工作

先去官網下載下傳Vue：​​官網位址​​

然後引入Vue 
<script type="text/javascript" src="../vue.js"></script>

然後開始寫代碼 ，需要先建立一個容易 讓它綁定Vue

然後再 script标簽下就可以寫Vue代碼了

1.想讓Vue工作，就必須建立一個Vue執行個體，且要傳入一個配置對象；

2.root容器裡的代碼依然符合html規範，隻不過混入了一些特殊的Vue文法；

3.root容器裡的代碼被稱為【Vue模闆】；

4.Vue執行個體和容器是一一對應的；

5.真實開發中隻有一個Vue執行個體，并且會配合着元件一起使用；

6.{{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性；

7.一旦data中的資料發生改變，那麼頁面中用到該資料的地方也會自動更新；

注意區分：js表達式 和 js代碼(語句)
          1.表達式：一個表達式會産生一個值，可以放在任何一個需要值的地方：
                (1). a
                (2). a+b
                (3). demo(1)
                (4). x === y ? 'a' : 'b'

          2.js代碼(語句)
                (1). if(){}
                (2). for(){}
後端天天學Vue【一基本結構】
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>初識Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../vue.js"></script>
  </head>
  <body>
    <!-- 準備好一個容器 -->
    <div class="root">
            <h1>Hello,姓名：{{name}},位址：{{address}},年齡：{{age}}</h1>
    </div> 

    <script type="text/javascript" >.config.productionTip = false //阻止 vue 在啟動時生成生産提示。
      new Vue({
        el:'.root', //el用于指定目前Vue執行個體為哪個容器服務，值通常為css選擇器字元串。
        data:{ //data中用于存儲資料，資料供el所指定的容器去使用，值我們暫時先寫成一個對象。
          name:'笑霸final',
          address:'成都',
          age: 18
        }
      })</script>
  </body>
</html>
可以複制上面代碼 運作一下試一試效果

一 模闆文法

這裡我們學習兩種模闆文法

1.插值文法（雙大括号表達式） 2. 指令文法（以 v-開頭）

插值文法 1. 功能: 用于解析标簽體内容 2. 文法: {{xxx}} ，xxxx 會作為 js 表達式解析
後端天天學Vue【一基本結構】
<h1>插值文法</h1>
        <h3>你好，{{name}}</h3>
指令文法 ：v-bind:href=“xxx” 簡寫為 :href=“xxx”
功能：用于解析标簽（包括：标簽屬性、标簽體内容、綁定事件…）。
舉例：v-bind:href=“xxx” 或 ，xxx同樣要寫js表達式，且可以直接讀取到data中的所有屬性。
備注：Vue中有很多的指令，且形式都是：v-???，此處我們隻是拿v-bind舉個例子。
後端天天學Vue【一基本結構】
<a v-bind:href="Blog.url">我去{{Blog.name}}</a>      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <title>Document</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <!-- 準備一個容器 -->
    <div id="root">
        <h1>插值文法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        
        <h1>指令文法</h1>
        <a v-bind:href="Blog.url">我去{{Blog.name}}</a>
        <!-- v-band：可以簡寫成===》   ： -->
        <a :href="Blog.url">我去{{Blog.name}}</a>
    </div>
    
    <script type="text/javascript" >.config.productionTip = false //阻止 vue 在啟動時生成生産提示。
        new Vue({//Vue注意V要大寫
            el:'#root',
            data:{
                name: "笑霸fianl",
                
                Blog:{
                    name:'csdn',
                    url:'https://blog.***.net/weixin_52062043?spm=1000.2115.3001.5343',
                }
            }
          
        })</script>
</body>
</html>      
插值文法 ：用于标簽體
指令文法 ：用于解析标簽

二 資料綁定

上面我已經學過​

​v-bind​

​了 這其實式一種單項資料綁定

單項資料綁定特點：​​

​資料隻能從 data 流向頁面​

 ​​ 那我們就直接看雙向綁定​

​ v-model​

​：

​

​ 雙向資料綁定特點：資料不僅能從 data 流向頁面，還能從頁面流向 data​

 ​
後端天天學Vue【一基本結構】
由于v-model預設收集的就是value值可以簡寫為 v-model
後端天天學Vue【一基本結構】
== 注意== ​
​

​v-model:隻能用在表單 類元素上（如：input、select等）​

 ​

​

​

​複制下面代碼看看效果​

 ​ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script  type="text/javascript" src="../vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 準備一個容器 -->
    <div id="root">
        單項資料綁定：<input type="text"    :value="name"><br/>      -->
        雙向資料綁定：<input type="text" v-model:value="name"><br/>
        雙向資料綁定(簡寫)：<input type="text" v-model="name"><br/>
    </div>

    <script  type="text/javascript">.config.productionTip=false;

        new Vue({
            el:'#root', 
            data:{
                name: '笑霸fianl'
            }
        })</script>

</body>
</html>

三 el和data的其他寫法

1.el有2種寫法

(1).new Vue時候配置el屬性。

(2).先建立Vue執行個體，随後再通過vm.$mount(‘#root’)指定el的值。

2.data有2種寫法

(1).對象式

(2).函數式

如何選擇：目前哪種寫法都可以，以後學習到元件時，data必須使用函數式，否則會報錯。

3.一個重要的原則：

由Vue管理的函數，一定不要寫箭頭函數，一旦寫了箭頭函數，this就不再是Vue執行個體了。

​​

​由于我們已經使用了一種 我們就直接開始另一種寫法​

 ​
​

​$mount('#root')替代 el:'#root', 更加靈活​

 ​
後端天天學Vue【一基本結構】
(2).
​

​data函數式寫法​

 ​
後端天天學Vue【一基本結構】
​

​當然也能簡寫​

 ​
後端天天學Vue【一基本結構】
data第二種寫法 寫元件就必須寫函數式 、 代碼預覽 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script  type="text/javascript" src="../vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 準備一個容器 -->
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>


    <script  type="text/javascript">.config.productionTip=false;
        
        var v=new Vue({
            //el:'#root',
            // data:{
            //     name:'笑霸fianl'
            // }

//data第二種寫法 寫元件就必須寫函數式
        // data:function(){
        //     return{
        //         name:'笑霸fianl'
        //     }
        // }
        // })
        // //替代 el:'#root', 更加靈活
        // v.$mount('#root')
//還能簡寫
        data(){
            return{
                name:'笑霸fianl'
            }
        }
        })
        //替代 el:'#root', 更加靈活
        v.$mount('#root')</script>
    
</body>
</html>

四 Vue(一)總結

​

​Vue模闆文法有2大類：​

​​ 1.插值文法：

功能：用于解析标簽體内容。

寫法：{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性。

2.指令文法：

功能：用于解析标簽（包括：标簽屬性、标簽體内容、綁定事件…）。

舉例：v-bind:href=“xxx” 或 簡寫為 :href=“xxx”，xxx同樣要寫js表達式，

且可以直接讀取到data中的所有屬性。

備注：Vue中有很多的指令，且形式都是：v-???，此處我們隻是拿v-bind舉個例子。

vue.js 前端 javascript html 資料綁定
上一篇: 2. koa開發環境搭建
下一篇: Vue2學習筆記 | 基礎篇

繼續閱讀