主頁 > 前端設計 > Vuejs第二篇（Vue基礎語法）

Vuejs第二篇（Vue基礎語法）

2021-09-21 10:24:45 前端設計

一、內容概述：

  • 插值操作
  • 系結屬性
  • 計算屬性
  • 事件監聽
  • 條件判斷
  • 回圈遍歷
  • 階段案例
  • v-model

二、插值操作-mustache語法（掌握）

如何將data中的文本資料，插入到HTML中呢？

  • 我們已經學習過了，可以通過Mustache（{{}}）語法（也就是雙大括號）
  • Mustache：胡子/胡須

mustache語法中，不僅僅可以直接寫變數，也可以寫簡單的運算式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},welcome you</h2>
    <!--mustache語法中，不僅僅可以直接寫變數，也可以寫簡單的運算式-->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + '   ' + lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const vue = new Vue({
    el: '#app',
    data: {
      message: 'hello Vue!',
      firstName: '你好',
      lastName: 'Vue',
      counter: 100
    }
  });
</script>

</body>
</html>

結果：
在這里插入圖片描述

三、插值操作-其他指令使用（掌握）

v-once //值只能使用一次
在這里插入圖片描述

在這里插入圖片描述

v-html //決議帶有標簽的字串
在這里插入圖片描述

結果：
在這里插入圖片描述

v-text //展示文本不決議標簽，且會覆寫標簽中原有的文本
在這里插入圖片描述

結果：
在這里插入圖片描述

v-pre //原封不動的顯示文本（不決議）
在這里插入圖片描述

結果：
在這里插入圖片描述

v-cloak //未決議的情況不會顯示（解決閃爍問題）

了解即可

四、v-bind的基本使用（掌握）

前面我們學習的指令主要作用是將值插入到我們模板的內容當中
但是，除了內容需要動態來決定外，某些屬性我們也希望動態來系結

  • 比如動態系結a元素的href屬性
  • 比如動態系結img元素的src屬性

這個時候，我們可以使用v-bind指令：
作用：動態系結屬性
縮寫：：
預期：any（with argument）| Object（without argument）
引數：attrOrProp（optional）

下面，我們就來具體學習v-bind的使用

v-bind基礎

v-bind用于系結一個或多個屬性值，或者向另一個組件傳遞props值（這個學到組件時再介紹）
在開發中，有哪些屬性需要動態進行系結呢？

  • 還是有很多的，比如圖片的鏈接src、網站的鏈接href、動態系結一些類、樣式等等

比如通過Vue實體中的data系結元素的src和href，代碼如下：
在這里插入圖片描述
語法糖簡寫：（用 ：代替）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--錯誤的做法：這里不可以使用mustache語法-->
    <!--<img src="{{imgURL}}" alt="">-->
    <!--正確的做法:使用v-bind指令-->
    <img :src="imgURL" alt="">
    <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL:'https://img2.baidu.com/it/u=2464877933,1986620259&fm=26&fmt=auto',
      aHref:'http://www.baidu.com'
    }
  });
</script>   
</body>
</html>

結果：
在這里插入圖片描述

五、v-bind動態系結class【物件語法】（掌握）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<h2 :class="active">{{message}}</h2>-->
        <!--<h2 :class="{類名1:true,類名2:boolean}">{{message}}</h2>-->
        <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
        <button v-on:click="btnClick">按鈕</button>//按鈕來控制類是否系結
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          isActive:true,
          isLine:false
        },
        methods:{
          btnClick:function () {
            this.isActive=!this.isActive
          }
        }
      });
    </script>
</body>
</html>

在這里插入圖片描述
不需要通過vue動態改變的class可以直接寫出來：

<h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>//不需要通過vue動態改變的class可以直接寫出來

改進：
在這里插入圖片描述

總結：
請添加圖片描述

六、v-bind系結class【陣列語法】（掌握）

通過上述案例，我們知道系結class有兩種方式：

  • 物件語法
  • 陣列語法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 class="title" :class="['active','line']">{{message}}</h2>
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active:'aa',
      line:'bb'
    },
    methods:{
      getClasses:function () {
        return [this.active,this.line]
      }
    }
  });
</script>
</body>
</html>

在這里插入圖片描述

七、v-bind和v-for結合的作業布置（完成）

請看后續，，，

八、v-bind系結style(一)【物件語法】（掌握）

也有兩種語法：物件語法與陣列語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<h2 :style="{key(css屬性名):value(屬性值)}">{{message}}</h2>-->
    <!--'50px'必須加上引號，否則是當做一個變數去決議兩種寫法皆可，如果不用駝峰命名法就必須加引號，否則-將被決議為減號-->
    <h2 :style="{'font-size':'50px'}">{{message}}</h2>
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <!--以變數名傳入，兩種方式-->
    <h2 :style="{fontSize:finalSize}">{{message}}</h2>
    <h2 :style="{fontSize:finalSize2+'px'}">{{message}}</h2>
    <!--多屬性-->
    <h2 :style="{fontSize:finalSize2+'px',color:finalColor}">{{message}}</h2>
    <!--抽象為方法-->
    <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize:'50px',
      finalSize2:50,
      finalColor:'red'
    },
    methods:{
      getStyles:function () {
        return {fontSize:this.finalSize2+'px',color:this.finalColor}
      }
    }
  });
</script>
</body>
</html>

結果：
在這里插入圖片描述

九、v-bind系結style(二)【陣列語法】（了解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          baseStyle:{backgroundColor:'red'},
          baseStyle2:{fontSize:'20px'}
        }
      });
    </script>
</body>
</html>

在這里插入圖片描述

十、計算屬性的基本使用（掌握）

我們知道，在模板中可以直接通過插值語法顯示一些data中的資料，
但是在某些情況，我們可能需要對資料進行一些轉化后再顯示，或者需要將多個資料結合起來進行顯示

  • 比如我們有fristName和lastName兩個變數，我們需要顯示完整的名稱
  • 但是如果多個地方都需要顯示完整的名稱，我們就需要寫多個{{firstName}}{{lastName}}

我們可以將上面的代碼換成計算屬性：

  • 計算屬性是寫在實體的computed選項中的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
     firstName:'小',
     lastName:'明'
    },
    computed:{//寫計算屬性的函式
      fullName:function () {
        return this.firstName+' '+this.lastName
      }
    }
  });
</script>
</body>
</html>

十一、計算屬性的復雜操作（掌握）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>總價格:{{totalPrice}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          books:[
            {id:110,name:'Unix編程藝術',price:119},
            {id:111,name:'代碼大全',price:105},
            {id:112,name:'深入理解計算機原理',price:98},
            {id:113,name:'現代作業系統',price:87}
          ]
        },
        computed:{//相比于methods（methods呼叫幾次就執行幾次，是沒有快取的，性能較低）computed只執行一次，有快取(起名字盡量為名詞)
          //高階函式：filter、map、reduce
          totalPrice:function () {
            let result=0;
            for (let i=0;i<this.books.length;i++){
              result+=this.books[i].price;
            }
            return result;
          }
        }
      });
    </script>
</body>
</html>

結果：
在這里插入圖片描述

十二、計算屬性setter和getter（理解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{fullName}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          firstName:'Kobe',
          lastName:'Bryant'
        },
        computed:{
         /* fullName:function () {//這是簡寫
            return this.firstName+' '+this.lastName;
          }*/
          fullName:{//完整寫法（理解即可）
            // set:function () {//計算屬性一般是沒有set方法，只讀屬性
            //
            // },
            get:function () {
                return this.firstName+' '+this.lastName;
            }
          }
        }
      });
    </script>
</body>
</html>

十三、計算屬性和methods的對比（掌握）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--1.直接拼接,語法過于繁瑣-->
        <h2>{{firstName}} {{lastName}}</h2>
        <!--2.通過定義methods-->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <!--3.通過計算屬性-->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          firstName:'Kobe',
          lastName:'Bryant'
        },
        methods:{
          getFullName:function () {
            console.log('getFullName')
            return this.firstName+' '+this.lastName;
          }
        },
        computed:{
          fullName:function () {
            console.log('fullName')
            return this.firstName+' '+this.lastName;
          }
        }
      });
    </script>
</body>
</html>

在這里插入圖片描述
很明顯計算屬性效率高（只會執行一次，有快取）！！！！

十四、塊級作用域-let和var（掌握）

事實上var的設計可以看成JavaScript語言設計上的錯誤，但這種錯誤多半不能修復和移除，需要向后兼容

  • 大概十年前，Brendan Eich就決定修復這個問題，于是他添加了一個新的關鍵字：let
  • 我們可以將let看成更完美的var

塊級作用域

  • JS中使用var來宣告一個變數時，變數的作用域主要是和函式的定義有關
  • 針對于其他塊定義來說是沒有作用域的，比如if/for等，這在我們開發中往往會引起一些問題，
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>

<script>
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>

<script>
    //ES5之前因為if和for都沒有塊級作用域的概念，所以在很多時候，我們必須借助于function的作用域來解決應用外面變數的問題
    //ES6中，加入了let，let它是有if和for的塊級作用域
    // //1.變數作用域：變數在什么范圍內是可用的
    // {
    //   var name='why';//var沒有塊級作用域
    //   console.log(name);
    // }
    // console.log(name)//原則上不能訪問
    //2.沒有塊級作用域引起的問題(if的塊級)
    // var func;
    // if(true){
    //   var name='why';
    //   func=function () {
    //     console.log(name);
    //   }
    //   // func();
    // }
    // name='kobe'
    // func();
    // // console.log(name)

    //for回圈也是沒有作用域的
    // var btns=document.getElementsByTagName('button');
    // for(var i=0;i<btns.length;i++){
    //     btns[i].addEventListener("click",function () {
    //       console.log('第' + i + '個按鈕被點擊');
    //     })
    // }
    //為什么閉包可用解決（因為函式是一個作用域）
    // var btns=document.getElementsByTagName('button');
    // for(var i=0;i<btns.length;i++){
    //   (function (i) {
    //     btns[i].addEventListener("click",function () {
    //       console.log('第' + i + '個按鈕被點擊');
    //   })
    //   })(i)
    // }
    //正確寫法:
    const btns=document.getElementsByTagName('button');
    for(let i=0;i<btns.length;i++){
      (function (i) {
        btns[i].addEventListener("click",function () {
          console.log('第' + i + '個按鈕被點擊');
        })
      })(i)
    }
</script>
</body>
</html>

十五、三種方案對比-ES5沒有閉包-有閉包-ES6的let（理解）

var宣告的是全域變數，let是區域變數

十六、const的使用和注意點

const關鍵字

  • 在很多語言中已經存在，比如c/c++中，主要的作用是將某個變數修飾為常量
  • 在JavaScript中也是如此，使用const修飾的識別符號為常量，不可以再次賦值

什么時候使用const呢？

  • 當我們修飾的識別符號不會被再次賦值的時，就可以使用const來保證資料的安全性
  • 建議在ES6開發中，優先使用const，只有需要改變某一識別符號的時候才使用let

const的注意：
一、不可再次賦值
二、const修飾的識別符號必須賦值
三、常量的含義是指向的物件不能修改，但是可以改變物件內部的屬性

十七、ES6物件字面量增強寫法（掌握）

ES6中，對物件字面量進行了很多增強
什么叫字面量呢？

<script>
    const obj={};//這樣的寫法就叫物件的字面量
</script>

屬性簡寫

ES5的寫法:

    const name='why';
    const age=18;
    const height=1.88;
    //將上面屬性寫入物件中
    //曾經的寫法
    const obj={
      name:name,
      age:age,
      height:height
    }
    console.log(obj)

在這里插入圖片描述
ES6增強寫法：

 const obj={
      name,age,height
    }
    console.log(obj)

在這里插入圖片描述
函式簡寫：

    //函式的增強寫法
    //ES5:
    const obj={
      run:function () {

      },
      eat:function () {

      }
    }
    //ES6:
    const obj2={
      run(){
        
      },
      eat(){
        
      }
    }

JavaScript仍然存在缺陷，有以下升級版:
Angular---->google
TypeScript---->microsoft—>（型別檢測功能）
flow---->(facebook)

十八、v-on的基本使用和語法糖（掌握）

在前端開發中，我們需要經常和用戶互動

  • 這個時候，我們就必須監聽事件發生的時間，比如切換，拖拽，鍵盤事件等等
  • 在Vue中如何監聽事件呢？使用v-on指令

v-on介紹

  • 作用：系結事件監聽器
  • 縮寫：@
  • 預期：Function| Inline Statement| Object
  • 引數：event
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{counter}}</h2>
    <button @click="increment()">+</button>
    <button @click="decrement()">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods:{
      increment(){
        this.counter++;
      },
      decrement(){
        this.counter--;
      }
    }
  });
</script>
</body>
</html>

十九、v-on的引數傳遞問題（掌握）

  • 當通過methods中定義方法，以供@click呼叫時，需要注意引數問題：

  • 情況一：如果該方法不需要額外引數，那么方法后的()可以不添加

    • 但是注意：如果方法本身中有一個引數，那么會默認將原生事件event引數傳遞進去

  • 情況二：如果需要同時傳入某個引數，同時需要event時，可以通過$event傳入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--事件呼叫的方法沒有引數-->
        <button @click="btn1Click()">按鈕1</button>
        <button @click="btn1Click">按鈕2</button>

        <!--在事件定義時，寫方法時省略了小括號，但是方法本身是需要一個引數的，這個時候，
        Vue會默認將瀏覽器產生的event事件物件作為引數傳入到方法-->
       <!-- <button @click="btn2Click(123)">按鈕2</button>
        <button @click="btn2Click()">按鈕2</button>-->
        <button @click="btn2Click(111)">按鈕2</button>

        <!--方法定義時，我們需要event物件，同時又需要其他引數-->
        <!--在呼叫方法時，如何手動的獲取到瀏覽器引數的event物件:$event-->
        <button @click="btn3Click(abc,$event)">按鈕三</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          abc:123
        },
        methods:{
          btn1Click(){
            console.log("btn1Click")
          },
          btn2Click(a){
            console.log("-----",a)
          },
          btn3Click(abc,event){
            console.log("::::",abc,event);
          }

        }
      });
    </script>

</body>
</html>

在這里插入圖片描述

二十、v-on修飾符

  • 在某些情況下，我們拿到event的目的可能是進行一些事件處理
  • Vue提供了修飾符來幫助我們方便的處理一些事件：
    • .stop – 呼叫 event.stopPropagation()
    • .prevent – 呼叫 event.preventDefault()
    • .(keyCode | keyAlias) – 只當事件是從特定鍵觸發時才觸發回呼
    • .native – 監聽組件根元素的原生事件
    • .once – 只觸發一次回呼

.stop修飾符阻止事件冒泡：
在這里插入圖片描述

不用修飾符的情況下點擊按鈕：
在這里插入圖片描述
加上修飾符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div @click="btn1Click()">
        父盒子
        <button @click.stop="btn2Click()">按鈕</button>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods:{
      btn1Click(){
        console.log("btn1Click")
      },
      btn2Click(){
        console.log("btn2Click")
      }
    }
  });
</script>
</body>
</html>

再次點擊按鈕，不再冒泡:
在這里插入圖片描述
.prevent修飾符阻止默認事件：
在這里插入圖片描述
在這里插入圖片描述
.keyAlias監聽鍵帽的點擊（keyAlias是一系列事件）：
在這里插入圖片描述

以enter為例：
在這里插入圖片描述
在這里插入圖片描述
.once只觸發一次修飾符：
在這里插入圖片描述
在這里插入圖片描述

休息，后續待更新，，，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301774.html

標籤：其他

上一篇：二、JavaWeb基礎(BootStrap前端框架)

下一篇：[Vue專案實戰]電商系統專案初始化

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂