04《Vue 入門教程》Vue 常用指令

. 簡介

本小節(jié)我們將介紹在 Vue 項(xiàng)目中常用的一些指令。包括每個(gè)指令的含義以及如何使用他們。我們在日常項(xiàng)目中會(huì)大量地使用指令，指令是 Vue 中相對基礎(chǔ)和簡單的知識(shí)點(diǎn)。同學(xué)們只需要了解每個(gè)指令的含義，對案例中的代碼反復(fù)練習(xí)就可以熟練掌握。

2. 木子解釋

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況，稍后我們再討論)。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。 — 官方定義

Vue 指令是帶有 v- 前綴的特殊 attribute，它的值是一個(gè)表達(dá)式，指令幫助我們操作 DOM，當(dāng)表達(dá)式的值發(fā)生改變時(shí)更新渲染 DOM。

3. 常用指令介紹

接下來我們將逐個(gè)介紹各個(gè)指令的含義和使用方式。

3.1 v-text

v-text是元素的 InnerText 屬性，它的作用和之前我們使用的 {{}} 一樣，用于數(shù)據(jù)綁定：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-text="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
  data: {
    message: "Hello!"
  },
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 代碼第 2 行，我們使用了 v-text 指令，它綁定 message 值，會(huì)將 message 的值動(dòng)態(tài)插入 <div> 標(biāo)簽內(nèi)。

3.2 v-html

v-html是元素的 innerHTML，它用于綁定一段 html 標(biāo)簽：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-html="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
    el: '#app',
    data: {
        message: "<div>您好，我是小慕！</div>",
    }
  })
</script>
</html>

123456789101112131415161718192021222324

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 代碼第 2 行，我們使用了 v-html 指令，它綁定 message 值，會(huì)將 html 元素插入 <div> 標(biāo)簽內(nèi)。

3.3 v-bind

v-bind用于給元素的屬性賦值。v-bind后面是 ：屬性名=[變量名]。例如:v-bind:title="message"：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-bind:title="title">
      鼠標(biāo)懸停查看消息！
    </div>
    <div>
      <a v-bind:href="href">慕課網(wǎng)</a>
    </div>
    <div>
      <img v-bind:src="src"/>
    </div>
    <div>
      <button v-bind:disabled="disabled">禁用按鈕</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    el: '#app',
    data: {
        title: "您好，我是小慕，歡迎來到慕課網(wǎng)！希望你可以在慕課網(wǎng)學(xué)到更多的東西！",
      href: 'https://www.imooc.com/',
      src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676-360-202.png',
      disabled: true
    }
  })
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 代碼第 2 行，我們使用了 v-bind 指令給 div 標(biāo)簽的 title 屬性賦值。在 HTML 代碼第 6 行，我們使用了 v-bind 指令給 a 標(biāo)簽的 href 屬性賦值。在 HTML 代碼第 9 行，我們使用了 v-bind 指令給 img 標(biāo)簽的 src 屬性賦值。在 HTML 代碼第 12 行，我們使用了 v-bind 指令給 bitton 標(biāo)簽的 disabled 屬性賦值。

vue 還提供了指令 v-bind 的簡寫方式，可以直接通過:屬性名的方式。例如在上述例子中我們可以改寫成：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div :title="title">
      鼠標(biāo)懸停查看消息！
    </div>
    <div>
      <a :href="href">慕課網(wǎng)</a>
    </div>
    <div>
      <img :src="src"/>
    </div>
    <div>
      <button :disabled="disabled">禁用按鈕</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    el: '#app',
    data: {
        title: "您好，我是小慕，歡迎來到慕課網(wǎng)！希望你可以在慕課網(wǎng)學(xué)到更多的東西！",
      href: 'https://www.imooc.com/',
      src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676-360-202.png',
      disabled: true
    }
  })
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

3.4 v-for

v-for 用于列表的循環(huán)渲染。基本語法：v-for="item in data"，data 可以是數(shù)組或者對象，接下來我們介紹對兩種數(shù)據(jù)類型的循環(huán)。

3.4.1 v-for 對數(shù)組的循環(huán)渲染

當(dāng)我們對數(shù)組進(jìn)行循環(huán)的時(shí)候，item 表示數(shù)組中具體的某一項(xiàng)：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in music">{{item.name}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
  el: '#app',
  data() {
    return {
      // 要循環(huán)的數(shù)組
      music: [
        { name: '青花瓷' },
        { name: '陽光總在風(fēng)雨后' },
        { name: '十年' }
      ]
    }
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 JS 代碼第 6-10 行，我們定義了數(shù)組 music。在 HTML 第 3 行，我們使用 v-for 對數(shù)組進(jìn)行遍歷，循環(huán)輸出<li></li>，并在每次循環(huán)的時(shí)候?qū)?name 插入到 <li> 標(biāo)簽內(nèi)。頁面展現(xiàn)結(jié)果：

3.4.2 v-for 對象的循環(huán)渲染

當(dāng)我們對數(shù)組進(jìn)行循環(huán)的時(shí)候，item 表示對象中某一屬性的值：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in obj">{{item}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
  el: '#app',
  data() {
    return {
      obj: {
        name: '句號(hào)',
        age: 18,
        sex: '男'
      }
    }
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 JS 代碼第 5-9 行，我們定義了對象 obj；在 HTML 第 3 行，我們使用 v-for 對數(shù)組進(jìn)行遍歷，循環(huán)輸出<li></li>，并在每次循環(huán)的時(shí)候?qū)傩缘闹挡迦氲?<li> 標(biāo)簽內(nèi)。

3.5 v-if和v-show

vue提供了v-if和v-show兩個(gè)指令來控制頁面元素的顯示和隱藏。我們先通過一段代碼來看一下使用兩個(gè)指令各有什么效果：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <button>我是添加按鈕，我一直在</button>
    </div>
    <div>
      <button id="show" v-show="deleteButton">我是刪除按鈕，我通過v-show控制顯隱</button>
      <button v-on:click="deleteButton=true">設(shè)置顯示</button>
      <button v-on:click="deleteButton=false">設(shè)置隱藏</button>
    </div>
    <div>
      <button id="if" v-if="editButton">我是修改按鈕，我通過v-if控制顯隱</button>
      <button v-on:click="editButton=true">設(shè)置顯示</button>
      <button v-on:click="editButton=false">設(shè)置隱藏</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
   el: '#app',
   data() {
     return {
       deleteButton: true,
       editButton: true
     }
   }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 中我們設(shè)置了兩個(gè)按鈕：1. id 為 show 的 button 通過 v-show 控制顯隱。2. id 為 if 的按鈕通過 v-if控制顯隱。通過點(diǎn)擊事件修改綁定的值。

細(xì)心的同學(xué)可能會(huì)想，既然v-if和v-show都能實(shí)現(xiàn)元素的顯示隱藏，那為什么需要提供兩個(gè)指令呢？在回答這個(gè)問題之前，我們先看一下剛剛寫的案例頁面。打開瀏覽器開發(fā)者工具，通過元素審查找到刪除按鈕和修改的DOM元素。

接下來我們通過點(diǎn)擊隱藏，將兩個(gè)按鈕設(shè)置為隱藏狀態(tài)，頁面效果如下：

從圖中可以發(fā)現(xiàn)：通過v-show設(shè)置狀態(tài)的按鈕元素還在頁面中，只是通過樣式display:none設(shè)置隱藏。而通過v-if設(shè)置狀態(tài)的按鈕元素從頁面中刪除了。現(xiàn)在同學(xué)們是不是已經(jīng)知道v-show和v-if的區(qū)別了呢？

v-if：根據(jù)表達(dá)式的值在 DOM 中生成或移除一個(gè)元素。

v-show：根據(jù)表達(dá)式的值通過樣式的改變來顯示或者隱藏 HTML 元素。

3.6 v-if、v-else-if、v-else

上面我們已經(jīng)了解了v-if的使用方法。事實(shí)上，v-if的條件渲染和JavaScript條件判斷語句中的if、else、else if非常類似。

3.6.1 使用 v-else 指令來表示 v-if 的 “else 塊”：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="Math.random() > 0.5">
      你好，慕課網(wǎng)！
    </div>
    <div v-else>
      Hello， imooc!
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
   el: '#app'
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 代碼中，當(dāng)隨機(jī)數(shù)大于 0.5 的時(shí)候會(huì)顯示中文的“你好，慕課網(wǎng)！”，否則，顯示英文的 “Hello， imooc!”。

3.6.2 v-else-if，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="number===1">
      A
    </div>
    <div v-else-if="number===2">
      B
    </div>
    <div v-else>
     C
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
   el: '#app',
   data() {
     return {
       number: 1
     }
   }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

在 HTML 代碼中，我們通過判斷 number 的值來控制元素的顯示隱藏。首先判斷 number 是否為 1 ，如果是顯示 A，如果不是，則判斷 number 是否為 2，如果是顯示 B，否則顯示 C。

3.7 v-on

有時(shí)候，我們需要給元素綁定事件，vue 中提供了指令 v-on 來進(jìn)行事件的綁定。用法：v-on:事件名="方法"，例如：v-on：click=“alert”。

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-on:click="hello">hello</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
  el: '#app',
  data: {},
  methods: {
    hello() {
        alert('hello')
    }
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 代碼第 2 行，我們給按鈕定義來點(diǎn)擊事件，并在點(diǎn)擊的時(shí)候觸發(fā) methods 中的 hello 方法。

和v-bind一樣vue同樣給v-on提供了簡寫方式，只需要通過@事件類型的方式就可以了。例如：@click="hello"。

當(dāng)然，v-on不僅只有click一種事件，還有 v-on:keyup.enter、v-on:keyup.page-down、v-on:submit等。

更多用法我們在接下來的章節(jié)中繼續(xù)深入。

3.8 v-model

在原生 Javascript 的項(xiàng)目中，要獲取用戶輸入框輸入的內(nèi)容，需要通過DOM對象的方式。在Vue項(xiàng)目中則不用這么繁瑣，因?yàn)?/span>vue通過了指令v-model來實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。我們通過下面一段代碼來學(xué)習(xí)一下：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>年齡：</label>
      <input v-model="age"/>
    </div>
    <div>當(dāng)前輸入的年齡是: {{age}}</div>
    <button @click="add">加一歲</button>
    <button @click="alertYear">彈出年齡</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
    el: '#app',
  data: {
    age: 10
  },
  methods: {
    add(){
        this.age=this.age + 1;
    },
    alertYear() {
        alert(this.age)
    }
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 上述代碼中，我們通過給input元素綁定指令v-model, 使得輸入框中的數(shù)據(jù) 和 data中的age形成雙向綁定。這樣當(dāng)用戶在輸入框內(nèi)輸入值的時(shí)候age也會(huì)同時(shí)改變。同樣，當(dāng)我們在methods中通過add方法修改age的值時(shí)，輸入框中的值也會(huì)同時(shí)改變。

3.9 v-pre

該指令會(huì)跳過所在元素和它的子元素的編譯過程，也就是把這個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn)當(dāng)作一個(gè)靜態(tài)節(jié)點(diǎn)來處理，例如：

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-pre>當(dāng)前輸入的年齡是: {{age}}</div>
    <div>當(dāng)前輸入的年齡是: {{age}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
    el: '#app',
  data: {
    age: 10
  },
  
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 代碼第 2 行，我們給 div 添加了 v-pre 指令，所以插值表達(dá)式 {{age}} 并不會(huì)生效。同樣，第三行的 div 沒有添加 v-pre 指令，能正常編譯顯示。

其渲染結(jié)果為：

當(dāng)前輸入的年齡是: {{age}}
當(dāng)前輸入的年齡是： 10

3.10 v-once

模板只會(huì)在第一次更新時(shí)顯示數(shù)據(jù)，此后再次更新該 DOM 里面引用的數(shù)據(jù)時(shí)，內(nèi)容不會(huì)自動(dòng)更新。

實(shí)例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>年齡：</label>
      <input v-model="age"/>
    </div>
    <div v-once>當(dāng)前輸入的年齡是: {{age}}</div>
    <div>當(dāng)前輸入的年齡是: {{age}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
    el: '#app',
  data: {
    age: 10
  }
})
</script>
</html>

"運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋： 在 HTML 代碼第 6 行，我們給 div 添加了 v-once 指令，當(dāng)輸入框內(nèi)的數(shù)據(jù)發(fā)生改變時(shí)，被v-once作用的 div 并不會(huì)實(shí)時(shí)更新數(shù)據(jù)。

4. 小結(jié)

本小節(jié)我們學(xué)習(xí)了 Vue 中的一些常用的指令，主要有以下知識(shí)點(diǎn)：

v-text、v-html 用于頁面渲染；
v-show、v-if、v-else-if、v-else 條件渲染指令；
v-model 用于數(shù)據(jù)雙向綁定；
v-on 用于事件綁定；
v-for 用于循環(huán)。

人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營。

用戶體驗(yàn)在網(wǎng)站建設(shè)過程中的被重視程度，在近些年得到越來越大的提升。很多從事網(wǎng)頁設(shè)計(jì)的朋友都會(huì)在設(shè)計(jì)網(wǎng)頁的時(shí)候考慮到用戶體驗(yàn)這一關(guān)鍵因素，因?yàn)椴恢匾曈脩趔w驗(yàn)的網(wǎng)站，很難在當(dāng)下愈發(fā)成熟的互聯(lián)網(wǎng)環(huán)境中得到用戶的青睞與肯定。在文章中心內(nèi)容開始前，我們來看一組圖片：

（2003年的騰訊網(wǎng)首頁）

（2003年的新浪網(wǎng)首頁）

（2003年的搜狐網(wǎng)首頁）

（2003年的百度首頁）

（2003年的淘寶網(wǎng)首頁）

十二年前的網(wǎng)站都是這般的，簡單的table布局，可能現(xiàn)在那些抱著ipad上網(wǎng)的00后小朋友很難想象會(huì)有這么丑的網(wǎng)頁吧。但現(xiàn)在div+css布局方便了我們設(shè)計(jì)很多精美的網(wǎng)頁，界面上的美化從很大程度上提升了網(wǎng)站的用戶體驗(yàn)。不過，除了界面呢？影響用戶體驗(yàn)的因素還會(huì)有哪些？

正文開始，我們從用戶體驗(yàn)的角度聊聊，讓訪客反感的12種網(wǎng)頁設(shè)計(jì)。

總有那么些網(wǎng)頁，讓我們一打開就迫不及待想要離開的。留不住用戶的網(wǎng)站，花再多的心思引流也都是徒勞。想要增加網(wǎng)站的用戶粘性，提升網(wǎng)站用戶體驗(yàn)，這12個(gè)因素千萬要注意了。

來，從最糟糕的開始說吧……

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素一：漫長的加載時(shí)間；

這是本人認(rèn)為最糟糕的一個(gè)因素，網(wǎng)頁加載時(shí)間太漫長。要是在十二年前，打開一個(gè)網(wǎng)頁要一兩分鐘的話可能大家愿意忍受，畢竟這是很正常一件事；但在十二年后的今天，如果還要我花費(fèi)一兩分鐘去等待你的網(wǎng)頁加載，我是絕對沒這個(gè)耐心忍受這一切的，不知道你們是不是贊同。

因此，提升網(wǎng)頁加載速度，是提升用戶體驗(yàn)的一個(gè)非常重要的因素。影響網(wǎng)頁加載速度的因素也有很多，袁程旭在之前的文章中多次有提及這方面知識(shí)。你可以買一臺(tái)配置好點(diǎn)兒的服務(wù)器，當(dāng)然不建議買港臺(tái)或海外的，部分地區(qū)的訪客瀏覽網(wǎng)頁時(shí)加載會(huì)很吃力；除了服務(wù)器以外，網(wǎng)站程序的選擇也很有講究，不過這不是一兩句話可以說完的。另外，諸如網(wǎng)頁延遲加載（點(diǎn)擊閱讀），或圖片異步延遲加載（點(diǎn)擊閱讀）之類的技術(shù)使用可以很好地提升網(wǎng)頁加載速度，感興趣的朋友可自行了解。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素二：自動(dòng)播放的聲音；

說實(shí)話，這樣的網(wǎng)站經(jīng)常會(huì)嚇到我，尤其是在半夜的時(shí)候。請?jiān)囅胍幌拢愦蜷_一個(gè)網(wǎng)頁，突然就聽到了一些亂七八糟的聲音，沒有心理準(zhǔn)備的話是不是會(huì)被這東西給嚇到？這樣的網(wǎng)頁設(shè)計(jì)常見于那些搞銷售類的頁面，一進(jìn)入網(wǎng)頁就自動(dòng)播放音樂或者廣告宣傳，實(shí)在讓人抓狂。

玩QQ空間的時(shí)候感覺設(shè)置一個(gè)自動(dòng)播放的背景音樂很酷炫，但設(shè)計(jì)網(wǎng)頁的時(shí)候如果采用自動(dòng)播放聲音的設(shè)計(jì)其實(shí)是很影響用戶體驗(yàn)的。你大可以在網(wǎng)頁某處放置音頻或視頻文件，讓用戶自主選擇是否打開播放，我想這樣更尊重用戶選擇的設(shè)計(jì)才會(huì)更受用戶歡迎吧？

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素三：彈窗 & 廣告；

可能現(xiàn)在有很多攔截廣告的插件，但這并不影響我們對廣告的厭惡。最討厭的廣告形式就是那些永無止境的彈窗了，這是對用戶非常不友好的一種廣告形式。當(dāng)然，彈窗這一讓人反感的東西也不一定表現(xiàn)在廣告上，很多企業(yè)的官網(wǎng)經(jīng)常彈出“點(diǎn)擊咨詢”類窗口，關(guān)閉了沒幾秒又自動(dòng)打開，這是很讓用戶反感的一個(gè)設(shè)計(jì)。信息還沒瀏覽多少，你就不斷要我點(diǎn)擊咨詢，我只好退出你的網(wǎng)站了。

再說說廣告，最惡心的廣告形式是那些偽裝著騙你去點(diǎn)擊的，常見于那些下載站，你經(jīng)常不知道哪個(gè)才是正確的下載鏈接，是不是經(jīng)常就下載了一些莫名其妙的軟件下來？袁程旭并不是說網(wǎng)站不能投放廣告，是希望大家在用戶體驗(yàn)的考慮前提下合理設(shè)計(jì)廣告位，比如代碼君網(wǎng)站的廣告位分布。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素四：關(guān)鍵信息不在顯眼位置；

設(shè)計(jì)網(wǎng)頁的時(shí)候，你必須要知道用戶第一眼看到網(wǎng)頁時(shí)，視線的集中點(diǎn)會(huì)落在哪里。可能你認(rèn)為網(wǎng)頁設(shè)計(jì)只是往頁面上堆砌信息那般簡單，但其實(shí)信息的分配布局是很有講究的。頁面的關(guān)鍵信息必須要在顯眼的位置突出展現(xiàn)，才能更方便地被用戶獲取，不然的話其實(shí)很影響用戶體驗(yàn)。

就這么說吧，之前我瀏覽過一個(gè)主題酒店的網(wǎng)頁，但找了半天沒發(fā)現(xiàn)在哪里查看房型、價(jià)錢這些用戶比較關(guān)心的信息和資訊，反倒是其企業(yè)文化介紹、發(fā)展歷程這些并不太重要的信息，擺在了非常明顯的位置。這樣的設(shè)計(jì)是反人類的，在顯眼位置放置用戶關(guān)心的關(guān)鍵信息，才是正確的設(shè)計(jì)。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素五：過早地要求注冊；

我去一個(gè)網(wǎng)站尋找一張?jiān)O(shè)計(jì)圖，你要我注冊會(huì)員才能查看，那我肯定不干了。這些過早地要求注冊的網(wǎng)站也是很讓用戶反感的，除非你是那種什么真愛、相親類的網(wǎng)站。比如百合網(wǎng)這類，你要我注冊了才有權(quán)限查看更多會(huì)員的信息，為了找到真愛那我也認(rèn)了。但如果只是下載一張圖片或者一首歌就要求我注冊的話，哪兒有那閑工夫理會(huì)你，網(wǎng)上的免費(fèi)資源多得是。

從用戶體驗(yàn)的角度出發(fā)，就應(yīng)該給予用戶更多的自主選擇權(quán)。比如我一部分資源是免費(fèi)對外提供給所有用戶瀏覽或下載的，但還有很多精品資源是會(huì)員才有權(quán)限瀏覽和下載，只要資源足夠優(yōu)秀還怕吸引不到用戶來注冊么？別強(qiáng)迫用戶去做他們不喜歡做的事情，不然很容易遭受用戶反感。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素六：糟糕的導(dǎo)航設(shè)計(jì)；

網(wǎng)站的導(dǎo)航欄往往是為了更好地引導(dǎo)用戶，如果導(dǎo)航欄設(shè)計(jì)得太過糟糕的話，還怎么能起到引導(dǎo)用戶的作用呢？設(shè)計(jì)網(wǎng)站導(dǎo)航欄的時(shí)候，一般要遵循鼠標(biāo)的最短路徑原則，還要盡可能的方便用戶去到他們想要去的頁面。網(wǎng)站設(shè)計(jì)的每一點(diǎn)一滴其實(shí)都有講究，要不然怎么配得上設(shè)計(jì)二字？

還是以那個(gè)主題酒店的網(wǎng)頁為例，試想一下，如果你現(xiàn)在迫切需要預(yù)定一個(gè)房間，但找了半天沒找到訂房的鏈接入口，內(nèi)心會(huì)不會(huì)很崩潰？一邊是即將噴涌而出的荷爾蒙，一邊是對這糟糕網(wǎng)頁體驗(yàn)上的各種差評，兩者無論哪一個(gè)都夠讓你瘋狂的，內(nèi)心難免會(huì)大罵道：這都TM什么網(wǎng)站啊！

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素七：Flash（特別是主頁只有Flash展現(xiàn)）；

在之前的SEO類文章中，袁程旭多次提到，F(xiàn)lash的應(yīng)用很不利于網(wǎng)站SEO。目前為止，搜索引擎爬蟲還不能夠很好地爬取Flash文件內(nèi)容，對網(wǎng)站的收錄會(huì)有一定的影響。而網(wǎng)站主頁恰巧是SEO過程中非常值得重視的一個(gè)頁面，如果只有一個(gè)Flash文件在網(wǎng)站主頁展現(xiàn)的話，那就未免太搞笑了。

撇去SEO的因素不談，如果你進(jìn)入一個(gè)網(wǎng)站主頁發(fā)現(xiàn)只有一個(gè)Flash文件展現(xiàn)，會(huì)不會(huì)有種摸不著頭腦的感覺？一般這樣的網(wǎng)頁設(shè)計(jì)也多見于那些產(chǎn)品推廣、企業(yè)推廣類站點(diǎn)，而展現(xiàn)的Flash文件內(nèi)容多半是對產(chǎn)品或企業(yè)進(jìn)行介紹的。這是一種強(qiáng)硬推廣手法，很容易讓用戶產(chǎn)生反抗的逆反心理。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素八：色彩搭配太過耀眼；

網(wǎng)頁色彩搭配給用戶視覺上的沖擊是非常強(qiáng)的，袁程旭個(gè)人還是比較喜歡采用那些簡約樸素的色彩搭配方式來設(shè)計(jì)網(wǎng)站。我可不喜歡進(jìn)入一個(gè)網(wǎng)站看到五顏六色的模塊，色彩搭配太過耀眼會(huì)讓眼睛很容易感到疲倦。如果你網(wǎng)站的文字信息比較多，就更不能采用太鮮艷的色彩了，不然用戶視覺疲勞了還怎么有心思去閱讀資訊呢？多參考一下大型互聯(lián)網(wǎng)公司的網(wǎng)頁配色，或許值得你去學(xué)習(xí)模仿。

袁程旭強(qiáng)烈建議各位朋友，設(shè)計(jì)網(wǎng)頁時(shí)要保證頁面的主色調(diào)搭配不超過三種，除非你有特殊的需求而不得不將網(wǎng)頁設(shè)計(jì)成萬花筒那般。各位可以閱讀《三分鐘帶你快速入門極簡色彩學(xué)》這篇文章來學(xué)習(xí)一些基本的色彩學(xué)知識(shí)，我想會(huì)非常有利于你在網(wǎng)頁設(shè)計(jì)過程中進(jìn)行合理配色。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素九：table布局 or 界面過丑；

正如文章開頭所言，現(xiàn)在的網(wǎng)頁之所以可以設(shè)計(jì)得比十二年前精美，是因?yàn)閐iv+css的布局結(jié)構(gòu)能夠營造出很多table布局實(shí)現(xiàn)不了的效果。如果你還沉迷于table布局的網(wǎng)頁中無法自拔的話，那么請?jiān)徫覍?shí)在看不下去，只好默默退出你的網(wǎng)站了。table布局的網(wǎng)頁非常難看，總之我是忍受夠了。

不過，就算是div+css布局，竟然也有人能夠把網(wǎng)頁設(shè)計(jì)得非常丑的。這樣的網(wǎng)頁一般多是采用類似于dreamweaver的軟件拖動(dòng)設(shè)計(jì)出來的，沒有代碼寫出來的網(wǎng)頁來得精致。界面過丑的網(wǎng)頁總之不會(huì)太讓人喜歡，畢竟大家還是更樂于追求美感的，沒有人會(huì)喜歡在那些丑陋的界面上多加停留。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素十：網(wǎng)站太過“業(yè)余”；

這里所謂的業(yè)余，不僅體現(xiàn)在網(wǎng)站資訊表達(dá)上，也體現(xiàn)在網(wǎng)站所有者的運(yùn)營上。如果網(wǎng)站的主題不夠明確，網(wǎng)站文章對某件事物所表達(dá)的觀點(diǎn)也不是很讓大部分人贊同，那么就可以說這樣的網(wǎng)站很是業(yè)余。網(wǎng)站所有者在日常運(yùn)營工作中，如果未及時(shí)更新網(wǎng)站資訊，或者甚至連網(wǎng)站的關(guān)于我們和聯(lián)系我們等重要信息都未及時(shí)更新，那么這樣的網(wǎng)站也可以稱為業(yè)余網(wǎng)站。

如果我進(jìn)入一個(gè)網(wǎng)站，發(fā)現(xiàn)首頁最新推薦的文章還是2002年的，那我肯定不會(huì)多看就馬上退出這個(gè)網(wǎng)站了。你如果在編碼技術(shù)上或者SEO基礎(chǔ)常識(shí)上略顯業(yè)余，我還是可以忍受的，畢竟那跟我沒有多大的關(guān)系。但如果我想獲取的東西找不到，或者找到了但卻很業(yè)余可笑的，那肯定也不會(huì)有好感。

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素十一：設(shè)計(jì)上的一些瑕疵；

這些因素可能不會(huì)導(dǎo)致大量用戶對你的網(wǎng)站產(chǎn)生反感情緒，但如果能注意到這些問題并且有針對性地進(jìn)行改進(jìn)，一定能更好地提升網(wǎng)站用戶體驗(yàn)。接下來我們就簡單聊聊，這些設(shè)計(jì)上的瑕疵。

1、分頁瀏覽圖片

工作中，為了提升工作效率與持續(xù)學(xué)習(xí)，常常會(huì)收集整理很多素材，有網(wǎng)站案例源碼，有片段的代碼特，在這里我收集的一些CSS小技巧。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個(gè)月整理了一份最適合2020年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

1. 容器水平居中

先該容器設(shè)置一個(gè)明確寬度，然后將margin的水平值設(shè)為auto即可

div.horizontal-center {
  width: 760px;
  margin: 0 auto;
}

// HTML
<div class="horizontal-center "></div

2. 容器垂直居中

比如，有一大一小兩個(gè)容器，請問如何將小容器垂直居中？

//首先，將大容器的定位為relative。
div.large {
  position: relative;
  height: 200px;
  background: red; //非必須
}

// 然后，將小容器定位為absolute，再將它的左上角沿y軸下移50%，
// 最后將它margin-top上移本身高度的50%即可。
div.small {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
  background: purple; //非必須
}

// HTML
<div class="large">
  <div class="small">xxx</div>
</div>

3. 用Flexbox 擺脫外邊距的各種 hack

當(dāng)需要用到列分隔符時(shí)，通過flexbox的 space-between 屬性，你就可以擺脫nth-，first-，和 last-child 的hack了：

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
   flex-basis: 23%;
}

現(xiàn)在，列表分隔符就會(huì)在均勻間隔的位置出現(xiàn)。

4. 如何使得較大的圖片，能夠自動(dòng)適應(yīng)小容器的寬度？

CSS可以這樣寫：

img {max-width: 100%}

5. 黑白圖像

img.desaturate {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

// HTML
<img class="desaturate" src="img01.png"/>

6. 圖片水平反轉(zhuǎn)

 img.flip-h {
  -ms-filter: "FlipH";
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
}

// HTML
<img class="flip-h" src="avatar.jpg" />

7. font-size基準(zhǔn)

瀏覽器的缺省字體大小是16px，你可以先將基準(zhǔn)字體大小設(shè)為10px：

html { font-size:62.5%;}

后面統(tǒng)一采用rem作為字體單位，2.4rem就表示24px

h1 {font-size: 2.4 em}

8. text-transform

text-transform用于將所有字母變成小寫字母、大寫字母或首字母大寫

// 把字母轉(zhuǎn)換成大寫
.transform-uppercase {
  text-transform: uppercase;
}

// 把字母轉(zhuǎn)換成小寫
.transform-lowercase {
  text-transform: capitalize;
}

// 首字母大寫
.transform-capitalize {
  text-transform: capitalize;
}

// HTML
<div class="transform-uppercase">upper case</div> // UPPER CASE
<div class="transform-lowercase">LOWER CASE</div> // lower case
<div class="transform-capitalize">capitalize</div> // Capitalize

9. font-variant

用于將字體變成小型的大寫字母（即與小寫字母等高的大寫字母）

.font-small {
  font-variant: small-caps;
}

// html
<div class="font-small">abcd</div>

10. 模糊文本

簡單但很漂亮的文本模糊效果，簡單又好看！

.blur {
  color: transparent;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

// HTML
<div class="blur">blur</div>

11. CSS首字放大

p:first-letter {
  display: block;
  float: left;
  margin: -3px 0px 0 0;
  color: red;
  font-size: 1.4em;
  font-family: Helvetica;
}

12. user-select 禁止用戶選中文本

.unselect { user-select: none; }

13. 優(yōu)化顯示文本

有時(shí)，字體并不能在所有設(shè)備上都達(dá)到最佳的顯示，所以可以讓設(shè)備瀏覽器來幫助你

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

注：請負(fù)責(zé)任地使用 optimizeLegibility。此外，IE /Edge沒有 text-rendering 支持

14. 容器透明度設(shè)置

將一個(gè)容器設(shè)為透明，可以使用下面的代碼：

.element {
  -moz-opacity: 0.5; // Firefox
  -khtml-opacity: 0.5; // webkit核心的瀏覽器
  filter: alpha(opacity=50); // IE專用的
  opacity: 0.5; // Opera
}

// HTML
<div class="element"></div>

15. CSS三角形

如何使用CSS生成一個(gè)三角形？

.triangle {
  height: 0px;
  width: 0px;
  border-style: solid;
  border-width: 0px 300px 300px 300px;
  border-color: transparent transparent green transparent;
}

// HTML
<div class="triangle"><div>

16. 取消IE文本框的滾動(dòng)條

textarea { overflow: auto; }

17. 使用 :not() 取消底部邊框

.nav li:not(:last-child) {
  border-bottom: 1px solid #666;
}

// 通過此方法也可以取消第一個(gè)元素的頂部邊框
// .nav li:not(:first-child) {}

// HTML
<ul class="nav">
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

18. 頁面頂部陰影

body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 100;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}

19. 繼承 box-sizing

讓 box-sizing 繼承 html,這樣在插件或杠桿其他行為的其他組件中就能更容易地改變 box-sizing 了

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

20. 禁用鼠標(biāo)點(diǎn)擊事件

.disabled { pointer-events: none; }

// HTML
<a href="https://www.baidu.com" class="disabled">xxx</a>

21. 使用屬性選擇器用于空鏈接

當(dāng)a元素沒有文本值，但 href 屬性有鏈接的時(shí)候顯示鏈接：

a[href^="http"]:empty::before {
  content: attr(href);
}

// HTML
<a href="https://www.baidu.com"></a> // 有效
<a href="https://www.baidu.com" /> // 這種標(biāo)簽無效

在工作中，為了提升工作效率與持續(xù)學(xué)習(xí)，常常會(huì)收集整理很多素材，有網(wǎng)站案例源碼，有片段的代碼特，在這里我收集的一些CSS小技巧。

作者：ikonan
鏈接：https://www.jianshu.com/p/f09eb7f19013

在線咨詢

上一篇：教師常用網(wǎng)址（以后繼續(xù)更新）
下一篇：.NET每周精選

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

04《Vue 入門教程》Vue 常用指令

. 簡介

2. 木子解釋

3. 常用指令介紹

3.1 v-text

3.2 v-html

3.3 v-bind

3.4 v-for

3.4.1 v-for 對數(shù)組的循環(huán)渲染

3.4.2 v-for 對象的循環(huán)渲染

3.5 v-if和v-show

3.6 v-if、v-else-if、v-else

3.6.1 使用 v-else 指令來表示 v-if 的 “else 塊”：

3.6.2 v-else-if，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：

3.7 v-on

3.8 v-model

3.9 v-pre

3.10 v-once

4. 小結(jié)

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素一：漫長的加載時(shí)間；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素二：自動(dòng)播放的聲音；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素三：彈窗 & 廣告；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素五：過早地要求注冊；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素六：糟糕的導(dǎo)航設(shè)計(jì)；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素七：Flash（特別是主頁只有Flash展現(xiàn)）；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素八：色彩搭配太過耀眼；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素九：table布局 or 界面過丑；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素十：網(wǎng)站太過“業(yè)余”；

影響用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)因素十一：設(shè)計(jì)上的一些瑕疵；

1. 容器水平居中

2. 容器垂直居中

3. 用Flexbox 擺脫外邊距的各種 hack

4. 如何使得較大的圖片，能夠自動(dòng)適應(yīng)小容器的寬度？

5. 黑白圖像

6. 圖片水平反轉(zhuǎn)

7. font-size基準(zhǔn)

8. text-transform

9. font-variant

10. 模糊文本

11. CSS首字放大

12. user-select 禁止用戶選中文本

13. 優(yōu)化顯示文本

14. 容器透明度設(shè)置

15. CSS三角形

16. 取消IE文本框的滾動(dòng)條

17. 使用 :not() 取消底部邊框

18. 頁面頂部陰影

19. 繼承 box-sizing

20. 禁用鼠標(biāo)點(diǎn)擊事件

21. 使用屬性選擇器用于空鏈接

您的項(xiàng)目需求