Vue基礎

時間 2019-11-24

標籤 vue 基礎简体版

原文原文鏈接

前言

　　本人是一名後端開發，最近公司要使用Vue作一些頁面，因而義無反顧的開始啃吃啃吃的啃掉Vue這塊蛋糕javascript

　　開始本文前，先來一波小知識點，寫前端必知必會哦css

必知必會

　　HTML（結構）：主要是標籤，標籤的主要做用是語義。html

　　CSS（樣式）：層疊樣式表(英文全稱：Cascading Style Sheets)，做用：定義網頁的效果前端

　　　　　　清除浮動（標準形式）：vue

　　　　　　　　.clearfix:after{java

　　　　　　　　　　　　visibility:hidden;node

　　　　　　　　　　　　content:".";react

　　　　　　　　　　　　display:block;jquery

　　　　　　　　　　　　clear:both;webpack

　　　　　　　　　　　　height:0;

　　　　　　　　}

備註：

1.visibility:hidden;隱藏內容，同時佔位置；visibility:hidden+height:0 等同於 display:none，能夠啓到在同一個樣式中同時使用 display中的兩種屬性的效果。

2.BFC：Block Formatting Context，塊級格式化上下文，一個獨立的塊級渲染區域，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

BFC產生的條件：

　　1.html根元素

　　2.float的值不爲none

　　3.display的值爲inline-block、table-cell、table-caption

　　4.position的值爲absolute或fix

BFC約束規則：

　　1.生成BFC元素的子元素會一個接着一個防止。垂直方向上他們的起點事一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會摺疊，同屬一個BFC的兩個相鄰Box的margin會發生重疊。

　　2.生成BFC元素的子元素中，每個子元素左外邊距與包含塊的左邊界接觸，即便浮動元素也是如此（除非這個子元素自身也是一個浮動元素）。

　　3.BFC的區域不會與float的元素區域重疊。

　　4.計算BFC高度時，浮動元素也參與計算。

　　5.BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。

咱們在寫css常見的一些問題均可以由上面兩條推出，例如：

　　1.Block元素與父元素同寬，因此Block元素豎直方向上垂直排列。

　　2.豎直方向上有的Block元素margin會重疊，水平方向不會。

　　3.浮動元素會盡可能接近左上方或右上方。

　　4.爲父元素設置overflow:hidden或浮動父元素，則父元素會包含其浮動的子元素。

3.position五種定位：

position定位是指定位置的定位，如下爲經常使用的幾種：

一、static（靜態定位）：

當咱們沒有指定定位方式的時候，這時默認的定位方式就是static，也就是按照文檔的書寫佈局自動分配在一個合適的地方，這種定位方式用margin來改變位置，對left、top、z-index等設置值無效，這種定位不脫離文檔流二、relative定位（相對定位）：

該定位是一種相對的定位，能夠經過設置left、top等值，使得指定元素相對其正常的位置進行偏移，這種定位不脫離文檔流；

三、absolute定位（絕對定位）：

這種定位經過設置top、right、bottom、left這些偏移值，相對於 static 定位之外的第一個父元素進行定位（這種定位一般設置父元素爲relative定位來配合使用），在沒有父元素的條件下，它的參照爲body，該方式脫離文檔流；

四、fixed（固定定位）：

這種定位方式是相對於整個文檔的，只需設置它相對於各個方向的偏移值，就能夠將該元素固定在頁面固定的位置，一般用來顯示一些提示信息，脫離文檔流；

五、inherit定位：

這種方式規定該元素繼承父元素的position屬性值。

4.相對定位：佔位置做用：1.父相子絕 2.微調元素好比：input標籤底部沒法對齊的處理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>

    <style>
        span {
            position:relative;
            top:8px;
        }
        input {
            font-size: 32px;

        }
    </style>
</head>
<body>

<span>輸入：</span>
<input type="text">

</body>
</html>

絕對定位：不佔位置（說明：這裏的佔不佔位置是指因爲脫離了標準文檔流）

　　標準流的盒子居中：margin：0 auto;

　　絕對定位的盒子居中：

　　　　　　　　　　position:absolute;

　　　　　　　　　　left:50%;

　　　　　　　　　　margin-left:-width/2;

固定定位：脫離標準流，不佔位置好比：固定導航欄 body { padding:導航欄的高度 }

JS（行爲）

　　前端開發三大框架：

angular（谷歌公司推出的）
react（Facebook公司推出的）最早使用虛擬DOM
vuejs（尤雨溪）

備註：jquery輪播圖插件unslider 虛擬DOM比DOM渲染速度要快

函數：

　　1.構造函數（js中通常首字母大寫的默認爲構造函數）

　　var arr = new Array();

　　2.字面量方式建立

　　var arr = [1,2,3];

　　3.定義在函數內部的方式：

　　function Person(name){

　　　　this.name = name;

　　　　this.fav = function(){ };

　　};

　　定義在函數外部的方式：

　　Person.propotype.fav = function(){

　　}; # 獲取對象的父類

　　var person = new Person("snto");

Node.js

node.js 屬於一個服務器語言（能夠操做操做系統，能夠打開文件）

　　前端語言不能這些操做是因爲安全問題

　　node.js 在cmd中退出時連續兩次ctrl+c

node.js中導入模塊的兩種方式：

　　1.var fs = require("fs") #這種方式叫Commonjs模塊做用：異步的加載模塊

　　2.import fs from "fs" #這種方式叫es6Module

備註：前端幾種模塊化方案（異步加載模塊）：Commonjs、requirejs、seajs、es6Module

babel 工具的做用：解析es6代碼轉化爲es5的語法

webpack 的做用：打包，將HTML、css、js、png等文件打包，也能夠壓縮這些文件

Vue的開始

　　Vue：數據驅動視圖。

　　在Vue中凡是出現 v-*/v-on/v-..等等的表示指令系統。咱們在使用指令系統時，v-on:click = "..." 必須是一個字符串的形式

<div id="app">   
<h1>{{ title }}</h1> 
<p>{{ content }}</p>   
<button v-on:click = "函數名">內容</button> 
 </div>


　　var options = {

　　　　el:"#app",    // 綁定的元素

　　　　data:{

　　　　　　title:'標題內容',

　　　　　　content:'內容'

　　}，

　　　　methods：{

　　　　　　函數名: function(){函數內容}

　　}

　　};

　　var app = new Vue(options);

　　data中聲明的都是數據屬性。

　　咱們在對象外面調用對象內部的屬性時，不能直接app.el，而要使用app.$el，由於Vue中封裝了對應的屬性。咱們要在前面加$

Vue的母版中是聲明式的渲染。支持運算

<h1>{{ 1+2 }}</h1>    #顯示 3

<h2>{{ 1>2 ?"真的":"假的" }}</h2>    #顯示   假的    （三目運算符）

v-if 和 v-show的區別和使用

　　v-if 條件指令值爲true 顯示，反之不顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .show1 {
            width:200px;
            height:300px;
            background-color: red;
        }
        .show2 {
            width:200px;
            height:300px;
            background-color: green;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="show1" v-if = "isShow"></div>
    <div class="show2" v-show = "isShow"></div>
    <button v-on:click = 'show'>v-if形式 or v-show形式的顯示/隱藏</button>
</div>

<script src="vue.js"></script>
<script>
    var options = {
        el:'#app',
        data:{
            isShow:false
        },
        methods:{
            show:function(){
                this.isShow= !this.isShow;
            }
        }
    };
    var app = new Vue(options);


</script>
</body>
</html>

區別：性能上的差別 v-if 內部是DOM的操做，若是爲false，內部是刪除的操做，爲true是建立的操做，

　　　　　　　　　　v-show 內部是添加樣式的操做，爲true是設置樣式 display:block; 爲false是disply:none;

相對之下，咱們在使用時，v-if適用於一次性的顯示或隱藏，而 v-show適用於頻繁的顯示或隱藏

v-bind 的用法：只要是標籤中的屬性，均可以使用v-bind綁定，自定義的屬性也能夠綁定。用法： v-bind：屬性 = "xxx",對於標籤的class屬性 v-bind：class = "{class名：對應數據屬性data }"

Vue中的簡化寫法：v-bind：屬性名 ==> : 屬性名 v-on:click ==> @click

備註：

1.ES5和ES6中在Vue中函數的寫法：

　　ES5: clickHandler : function(){ } 等價於 ES6：clickHandler(){ } #這種形式叫 對象的單體模式

2.a標籤的默認事件：點擊以後會默認的刷新頁面

　　阻止a標籤的默認事件的方式：1 <a href="javascript:;" @click="clickhand">點擊</a> 或者 <a href="javascript:void(0);"></a>

a標籤綁定事件時，會先走綁定的事件，在執行跳轉，咱們能夠在這個事件中來阻止這個跳轉操做

　　全部的事件都會傳入一個事件對象，因此第二種阻止a標籤默認事件的方式：clickhand(e){e.preventDefault();}（這種方式也能夠用來阻止submit的默認事件：從新加載頁面）

　　阻止form表單提交的默認事件（頁面的刷新跳轉），在form表單中使用 <form action="" onsubmit="return func()">，而後在form上面定義func

<script>
function func(){
return false;
}
</script>

　　Vue中也提供了一種阻止默認事件的方式：事件修飾符 @click.prevent = "xxx"

備註：使用Vue寫的官網有：掘金（juejin）使用react寫的：豆瓣、網易雲音樂

v-for 的用法：v-for的優先級是最高的。

v-for的兩種形式實現圖片的切換： v-for = "item in [....]" / v-for = "(item,index) in [...]"

<div id="app">
 
    <img :src="firstimg" alt="">
    <ul>

<li v-for = '(item,index) in imgs' @click = 'changeimg(index)' :class = "{active:index==current}">圖片{{ item.id }}</li>
<!--<li v-for = 'item in imgs' @click = 'changeimg(item)' >圖片{{ item.id }}</li>-->

</ul> </div> <script src="vue.js"></script> <script> var imgs = [{id:1,src:'1.jpg'},{id:2,src:'2.jpg'},{id:3,src:'3.jpg'},{id:4,src:'4.jpg'}]; var options = { el:'#app', data:{ imgs:imgs, firstimg:'1.jpg',
　　　　　　　 current:0

        },
        methods:{
            changeimg:function (item) {

　　　　　　　　this.firstimg = this.imgs[item].src;
　　　　　　　　this.current = item;

　　　　　　　　// this.firstimg = item.src;

} } }; var app = new Vue(options);

備註：全部的標籤都有title屬性（鼠標懸停上去顯示的信息）

你也能夠用 of 替代 in 做爲分隔符，由於它是最接近 JavaScript 迭代器的語法：

<div v-for="item of items"></div>

computed的使用

計算屬性默認只有 getter ，不過在須要時你也能夠提供一個 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}


v-model的內部實現原理：

<form id="app">
        <input type="text" :value='msg' @input = 'change'>
        <p>{{currentMsg}}</p>
    </form>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                msg:'雙向數據綁定'
            },
            methods:{
                change(e){
                    console.log(e.target.value);
                    this.currentMsg = e.target.value;
                }
            },
            computed:{
                currentMsg:{
                    get:function(){
                        return this.msg
                    },
                    set:function(newValue){
                        this.msg = newValue;
                    }
                }
            }
        })

    </script>