vue01-上

時間 2019-11-20

標籤 vue01 vue 简体版

原文原文鏈接

------------------------VUE-------------------------------------------------php

官網：https://cn.vuejs.org
    API：https://cn.vuejs.org/v2/api/

    小 -> 大
    封裝(函數)->多個封裝(文件)==庫||框架
                    ↓               ↓
                   插件               插件

                   模塊(文件)  分類（目錄)->包
    框架：改變了編碼思想   VUE: 數據驅動，一切都是數據,面向數據
        面向  事件
        面向  對象
        面向  數據
    庫:  工具自己不改變編碼的方式
        jquery -> dom       事件驅動

    MVC：html頁面裏面會出現<%=後臺屬性%>  {$後臺屬性$} {{後臺屬性}} mustache
        一個思想、是後端產物,是爲了先後端分離
        1. 後臺 java(jsp+html)  php(php+html+js)  nodejs(nodejs+ejs)
        2. 前臺 (html+css+js)
        3. 編輯 (拿着後臺給他開發的後臺管理頁面xxx.com:8008/admin.php)
        4. 設計

    前端MVC(分離js)：   數據、表現、業務分離
        model       M  數據  ajax/jsonp/數據解析  能夠複用
            | xx.js
            ...
        view        V  視圖表現層 展現數據、建立元素，變色，運動 能夠複用
            ...
        control     C  控制層(串業務,事件驅動)  通常不復用
            ...

        function readBaidu(str,callback){..拿着需求str,求數據，調用回調帶數據出去.}
        function writeLi(data,callback){...拿着數據寫頁面}
        window.onload=function(){
            oBtn.onclick=function(){
                readBaidu('xxx',function(res){
                    writeLi(res);
                    winObj.close()
                })
            }
        }
    VUE: 是個M V VM框架
        MVC:衍生出不少變體  MVP MVVM MV*
        mv  vm~C
        MVVM M  <-> VM <-> V

    基本使用：
        new出來一個Vue的實例，傳一堆配置參數，控制一片html

        VM:     響應系統 - > vDOM作標記 ->一個循環週期結束後->操做DOM
            new Vue   返回  VM
            new Vue({
                el:'選擇器'  要控制的那片html代碼
                data:{key:value}數據
                methods:{fnName:fn} 方法
            })
        M:  初始化數據
            data 選項   number/string/boolean/array/json/undefined/null
        V:  數據綁定
            {{數據名}} 模板 mustche  插值表達式
            v-text="數據名"        vue特有的屬性(指令)
            v-html="strong"     非轉義輸出
            v-for="(val,index) in 數據"       val值  index索引   變量數組、對象
                key="bmw"  指定key 是個bmw字符 vue是認得 修改VDom的key值
                :key="item.id"  指定key 是數據id（惟一性） 修改VDom的key值
            v-bind:html屬性="數據"  普通的html屬性綁定數據
                :html屬性="數據"  簡寫   title/src/url/.....
            事件：
                v-on:事件名="方法"

>vue基本使用
一、data專門放數據（M）
實例經過控制el元素來控制body頁面其中$叫實例系統屬性或方法，不帶的是自定義的實例屬性。
this指向實例，便可以經過this找到實例內的內容。
響應式渲染，但是實時更改內容
（在控制檯打印vm.title=''）

<script src="./js/vue.js"></script>
或者 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<body>
  <!-- V -->
  <div id="app">
    <!-- mustach語法 -->
    <h3>{{ title }}</h3>
    <p>{{ dp }}</p>
    <p>{{title}}</p>
  </div>

  <script>
    let vm = new Vue({
      // 選項
      // el:'選擇器',
      el:'#app',
      data:{//M
        title:'標題',
        dp:'段落'
      }
    });
  </script>
  
</body>

m層的數據類型css

二、m層數據類型在渲染時有什麼影響
①undefined到了頁面不顯示
    ②arr和json都轉字符串
    ③布爾仍然是布爾值
    ④數值仍爲數值

<body>

  <!-- V -->
  <div id="app">
    <!-- mustach語法 -->

    <div>{{ num }}</div>
    <div>{{ arr }}</div>
    <div>{{ json }}</div>
    <div>{{ un }}</div>
    <div>{{ nu }}</div>
    <div>/{{ str }}/</div>
    <div>{{ bl }}</div>

    <hr>

    <div>/{{str2}}/</div>

  </div>

  <script>
    let vm = new Vue({
      // 選項
      // el:'選擇器',
      el:'#app',
      data:{//M   初始化數據的地方
        title:'標題',
        num:110,
        arr:['aa','bb','cc'], //[ "aa", "bb", "cc" ]
        json:{a:1,b:2},       //{「a」：1，「b」：2}
        un:undefined,
        nu:null,
        str:'',
        bl:true,
        str2:'   '            //  /  /
      }
    });
    
  </script>
  
</body>

數據綁定html

三、數據綁定的形式
①指令：特殊的html自定義屬性
<div v-text='txt'></div>
②mustach
{{ }}
③屬性綁定1：html的屬性值動態化
例子：<img :src="src">
④屬性綁定2屬性名動態化
  <!-- V -->
  <div id="app">
    
    <h3>數據綁定的形式</h3>

    <h4>mustach:出如今開始和接受標籤之間</h4>
    <div>{{ title }}</div>

    <hr>

    <h4>指令: 特殊的html自定義屬性</h4>
    <!-- <div v-text="數據/實例屬性"></div> -->
    <div v-text="txt"></div>

    <hr>

    <h4>屬性綁定: html的屬性值動態化</h4>
    <img :src="src" alt="">

    <h4>屬性綁定2: 屬性名動態化</h4>
    <img src="https://cn.vuejs.org/images/logo.png" v-bind:[propimg]="val1">



  </div>

  <script>
    let vm = new Vue({
      // 選項
      // el:'選擇器',
      el:'#app',
      data:{//M   初始化數據的地方
        title:'標題',
        txt:'沙發斯蒂芬',
        src: 'https://cn.vuejs.org/images/logo.png',
        propimg: 'title',
        val1:'呵呵噠'
      }
    });
    
  </script>
  
</body>

列表渲染前端

<body>

  <!-- V -->
  <div id="app">
    
    <h3>列表渲染</h3>
    <!-- 指令：裏面能夠給語句 -->
    <ul>
      <!-- <li v-for="val in arr">{{ val }}</li> -->
      <li v-for="val of arr">{{ val }}</li>
    </ul>

    <hr>
    
    <ul>
      <li v-for="item of arr2">
        <!-- 插值表達式 -->
        <p>姓名: {{ item.name }}</p>
        <p>地址: {{ item.address}}</p>
      </li>
    </ul>

    <hr>

    <ul>
      <li v-for="item of arr3">
        {{item.name}}/{{item.address}}
        <ul>
          <li v-for="item of item.children">
            {{item.name}}/{{item.address}}
          </li>
        </ul>
      </li>
    </ul>

  </div>

  <script>
    let vm = new Vue({
      // 選項
      // el:'選擇器',
      el:'#app',
      data:{//M   初始化數據的地方
        arr:['aa','bb','cc'],
        arr2:[
          {id:1,name:'alex',address:'外灘18號'},
          {id:2,name:'alex2',address:'外灘1號'},
          {id:4,name:'alex3'},
        ],
        arr3:[
          {id:1,name:'alex',address:'外灘18號',children:[
            {id:1,name:'ooo',address:'霞飛路1號'},
            {id:1,name:'ooo2',address:'霞飛路11號'},
          ]},
          {id:2,name:'alex2',address:'外灘1號'},
          {id:4,name:'alex3'},
        ]
      
      }
    });
    
  </script>
  
</body>

綁定事件
```vue

<h4>事件綁定</h4>

<div>{{num}}</div>
<div v-show="bl">box</div>

<!-- <input type="button" value="按鈕" v-on:原生js事件名="函數"> -->
<!-- <input type="button" value="按鈕" v-on:touchstart="函數"> -->
<!-- <input type="button" value="按鈕" v-on:click="show1"> -->

<!-- 簡寫 -->
<!-- <input type="button" value="按鈕" @原生js事件名="函數"> -->
<input type="button" value="按鈕" @click="show1">

```java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。