0基礎菜鳥學前端之Vue.js

時間 2019-11-20

標籤基礎菜鳥前端 vue.js vue 欄目 JavaScript 简体版

原文原文鏈接

　　簡介：0基礎前端菜鳥，啃了將近半月前端VUE框架，對前端知識有了初步的瞭解。下面總結一下這段時間的學習心得。javascript

　　文章結構css

前端基礎
Vue.js簡介
Vue.js經常使用指令
Vue.js組件
Vue.js之vue-router插件
Vue.js實戰

1、前端基礎html

　　前端發展歷史和趨勢前端

什麼是前端？vue

前端：針對瀏覽器的開發，代碼在瀏覽器運行。java

後端：針對服務器的開發，代碼在服務器運行。git

發展歷程：es6

先後端不分>後端MVC開發模式（前端是V）>Ajax技術誕生（異步通訊，前端再也不是後端的模板，能夠獨立獲得各類數據。）>Web 2.0（動態網頁，富交互，前端數據處理，先後端分離）github

前端 MVC 框架

前端經過 Ajax 獲得數據，所以也有了處理數據的需求。web

前端代碼變得也須要保存數據、處理數據、生成視圖，這致使了前端 MVC 框架的誕生。

MVVM 模式

前端能夠作到：

讀寫數據
視圖切換
用戶交互

這意味這網頁實際上是一個應用程序（SPA： Single-page application）。

前端框架

Angular，核心是數據的 雙向綁定。

React， Facebook開發的一個前端框架。

Vue.js是近幾年一個很熱門的前端MVVM框架。它的基本思想與 Angular 相似，Vue 的核心庫只關注視圖層，可是用法更簡單，並且引入了響應式編程的概念。

2、Vue.js簡介

解耦視圖與數據
可複用組件
前端路由
狀態管理
虛擬DOM

Vue.js有什麼不一樣？

若是你學過JQuery，那麼你必定對操做DOM，綁定事件等原生Javascript能力很是熟悉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom | Test</title>
</head>
<body>
    <h1>How to buy</h1>
    <p title="reminder">Don't forget to buy this stuff.</p>
        <ul id="purchase">
            <li>Apple</li>
            <li class="sale">cheese</li>
            <li class="sale important">Milk</li>
        </ul>
    <div id= "test">

    </div>
<script>
        // DOM操做
    var pur = document.getElementById("purchase");
    var li=document.getElementsByTagName("li");
    var cls=document.getElementsByClassName('sale');
   // tit.setAttribute("id","hello");
    var newElement = document.createElement("p");
    // language=HTML
    var tit=document.getElementById("test");
    tit.appendChild(newElement);
    newElement.innerHTML='<h1>新建P元素</h1>';
</script>

</body>
</html>

　　而Vue.js提供MVVM模式拆分爲數據與視圖兩部分；咱們只需關係數據的操做便可。DOM的事情VuVue幫你自動搞定；以下例實現數據的綁定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue | Test</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg" placeholder="請輸入">
    <p>{{msg}}</p>
</div>
<script>
    // 實例Vue
    var vm = New Vue({ el: '#app', // 經過el將app屬性值所在元素掛載Vue實例 data: { msg: 'hello vue' } }) </script> </body> </html>

實現過濾器例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue | Test</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--<input type="text" v-model="msg" placeholder="請輸入">
    <p>{{msg}}</p>-->
    {{data | formatDate }}
</div>

<script>
    var padDate = function (value) { return value < 10 ? '0' + value :value; } // 實例Vue var vm = New Vue({ el: '#app', data: { msg: 'hello vue', date: new Date() }, filters: { formatDate: function () { var date = new Date(value); } }, moubted: { }, ... }) </script> </body> </html>

計算屬性實例：

<template>
  <div class="pageDetail">
    <h1>{{msg}}</h1>
    <p v-if="show">顯示這段文本</p>
    <!--綁定元素屬性，改變屬性值-->
    <a v-bind:href="url">點擊連接</a>
    <button type="button" v-on:click="show = false">點我隱藏文本</button>
    <!--綁定事件，監聽事件，方法能夠寫在methods，this指向vue實例自己-->
    <button type="button" v-on:click="showText()">點我顯示文本</button>
    <p>顯示價格{{prices}}</p>
  </div>
</template>

<script>
  export default{ data() { return { msg: 'pageDetail', show: true, url: 'http://www.hundsun.com', imgUrl: '', // prices: 10,  food: [ { name: 'apple', price: 200 }, { name: 'banana', price: 200 } ] } }, components: {}, methods: { showText: function () { return this.showf(); }, showf: function () { this.show = true; } }, computed: { prices: function () { var prices = 0; for (var i = 0; i < this.food.length; i++) { prices += this.food[i].price; } return prices; // console.log(this.food.length)  } } } </script> <style scoped> .pageDetail { background-color: #fff; } </style>

3、Vue經常使用指令

指令是vue.js最經常使用的一項功能，帶有v-的都是其指令。下面介紹一下經常使用指令

v-bind

該指令主要用法是動態更新HTML元素上的屬性；與class、style等進行綁定；

同時綁定多個樣式：

<div class="static" v-bind:class="{'active': isActive, 'error': isError}">
      <p>個人屬性class看能夠改變</p>
</div>
<script>
  export default{ data() { return { isActive: true, isError: true } </script>

數組語法綁定：也便是給class綁定一個數組。

<div class="static" v-bind:class="[activeCls, errorCls]">
      <p>個人屬性class看能夠改變</p>
    </div>
<script>
  export default{ data() { return { activeCls: 'active', errorCls: 'error' } } }

也能夠利用data, computed,methods方法來綁定。

一樣能夠在組將上應用。

<div class="pageDetail">   
 <date v-bind:class="[activeCls, errorCls]"></date>
</div>

import date from '@/components/date.vue';
  export default{
    data() {
　　　　return {
　　　　errorCls: 'error',
　　　　activeCls: 'active'
　　}
}
    components: {date}
  }
</script>

v-if　　v-else-if v-else

能夠根據表達式的值銷燬/渲染組件/元素，v-else-if 緊跟v-if ，v-else 緊跟v-if / v-else-if 。例如：

<div> 
<h1>Test v-if指令</h1>
    <p v-if="status === 1">顯示v-if</p>
    <p v-else-if="status === 2">顯示v-else-if</p>
    <p v-else="status === 1">顯示v-else</p>
  </div>

<script>

  export default{ data() { return { status: 2 } } }

能夠在內置的template標籤內使用改指令，例如

<div>
<template v-if="type === 'name'">
      <label>用戶名：</label>
      <input placeholder="用戶名" key = "name=input">
    </template>
    <template v-else>
      <label>郵箱：</label>
      <input placeholder="郵箱" key = "mail=input">
    </template>
    <button @click="handleclick()">切換輸入類型</button>
</div>

<script>
  export default{ data() { return { type: 'name', status: 2 } }， methods: { handleclick: function () { this.type = this.type === 'name' ? 'mail' : name; } } }

v-show

v-show改變元素的css屬性的display，不可用在template標籤內；

v-for

當須要將一個數組遍歷和枚舉一個對象循環顯示時，就會用到v-for，結合in 使用。例如

<ul>
        <template v-for="user in users">
          <li>{{user.name}}</li>
          <li>{{user.user_id}}</li>
        </template>
    </ul>

<script>
export default{ data() { return { user: { name: 'torre', user_id: '200' } } } </script>

v-on

監聽HTML事件，相似於原生JavaScript的onclick指令；例如

<div>
<button @click="getUserInfoFunc">commit</button>
</div>

<script>

  export default{ methods: { getUserInfoFunc() { server.getUserInfo().then((res) => { console.log(typeof res.data.list); this.users = res.data.list; }) } } }

v-model

表單控件在實際應用中比較常見，如單選，多選，下拉選擇，輸入框等，用它們能夠完成數據的錄入、校驗、提交，v-model指令就是用於表單類元素上雙向綁定數據。例如，

<template>
    <div id="testvue">
      <p>{{msg}}我是testvue組件</p>
      <p>測試互斥按鈕</p>
      <input type="radio" v-model="picked" value="html" id="html"/>
      <label for="html">html</label><br />
      <input type="radio" v-model="picked" value="vuejs" id="js"/>
      <label for="js">js</label><br />
      <input type="radio" v-model="picked" value="css" id="css"/>
      <label for="css">css</label><br />
      <p>{{picked}}</p>
    </div>
</template>

<script>
    export default { data() { return { msg: 'hello', picked: 'js' } }, methods: { handdle: function () { this.msg = 'hello vue' } }, components: {}, name: 'testvue' } </script> <style scoped> </style>

綁定選擇列表，例如

<div id="opt">

        <select v-model="selected">
          <option>html</option>
          <option value="js">javascript</option>
          <option >css</option>
        </select>
</div>

<script>
    export default {
      data() {
        return {
          msg: 'hello',
          picked: 'js',
          selected: 'html'
        }
      },
      
      components: {},
      name: 'testvue'
    }
</script>

3、Vue.js組件

對一些頁面中，對於固定不變的模塊，咱們能夠對它們進行做爲一個「母版」，而後能夠在其餘不一樣的頁面中來使用組件，這樣的好處是隻須要改變「母版」就能夠改變整個web的顯示，大大增長了代碼的複用。

建立組件於建立Vue實例相似，須要註冊後才能使用，其中包括全局註冊，局部註冊。

// 全局組件，在任何組件中均可以使用
Vue.component('global', {
  template: '<div>我是全局組件o</div>'
})

// 局部組件，須要建立在Vue實例中，只能本組件內使用
<script>
    export default {
      data() {
        return {
          msg: 'hello',
          picked: 'js',
          selected: 'html'
        }
      },
      methods: {
        handdle: function () {
          this.msg = 'hello vue'
        }
      },
// template的DOM結構必須被一個元素包含，不可直接寫文本。這種註冊方式也可使用嵌套。
      components: { 'my-component': { template: '<div>我是組件</div>' } },
      name: 'testvue'
    }
</script>

組件引用外部組件須要import引入

<script>
import date from '@/components/date.vue';

  export default{
    data() {
      return {
        msg: 'pageMain',
        name1: '',
        id1: '',
        users: '',
        account: '',
        passWd: ''
      }
    },
    components: { date }
  }
</script>

組件之props傳遞數據

組件不只僅用於代碼（模板內容）的複用，更重要的是組件間要進行通訊，類型是字符串數組和對象。

// 全局組件
Vue.component('global', {
  props: ['message'],
  template: '<div>我是全局組件{{message}}</div>'
})
//其餘組件引用global
<global message="我是全局組件" style="color:red"></global>

props中聲明的數據於組件中data()函數return的數據主要區別是props的數據來自父級，而data（）中的是組件本身的數據，做用域是組件自己，這兩種數據均可以在template、computed和methods中使用。

 <input type="text" v-model="parentMessage"/>
      <global :message="parentMessage" style="color:red"></global>
// javascript代碼
<script>
    export default {
      data() {
        return {
          msg: 'hello',
          picked: 'js',
          selected: 'html',
          parentMessage: ''
        }
      }
}

動態組件

<template>
  <div id="app">
    <button @click="handleChangeView('A')">切換到A</button>
    <button @click="handleChangeView('B')">切換到B</button>
    <button @click="handleChangeView('C')">切換到C</button>
    <div id="views">
      <component :is="currentView"></component>
    </div>
  </div>
</template>

<script>
  import first from '@/views/first.vue'
export default {
  components: {
    // comA: {
    //   template: '<div>組件A</div>'
    // },
    comA: first,
    comB: {
      template: '<div>組件B</div>'
    },
    comC: {
      template: '<div>組件C</div>'
    }
  },
  data() {
    return {
      currentView: 'comA'
    }
  },
  methods: {
    handleChangeView: function (component) {
      this.currentView = 'com' + component;
    }
  },
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  #views {
    height: 500px;
    width: 600px;
    background-color: gainsboro;
    margin: auto;
  }
</style>