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

. 简介

本小节我们将介绍在 Vue 项目中常用的一些指令。包括每个指令的含义以及如何使用他们。我们在日常项目中会大量地使用指令，指令是 Vue 中相对基础和简单的知识点。同学们只需要了解每个指令的含义，对案例中的代码反复练习就可以熟练掌握。

2. 木子解释

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 — 官方定义

Vue 指令是带有 v- 前缀的特殊 attribute，它的值是一个表达式，指令帮助我们操作 DOM，当表达式的值发生改变时更新渲染 DOM。

3. 常用指令介绍

接下来我们将逐个介绍各个指令的含义和使用方式。

3.1 v-text

v-text是元素的 InnerText 属性，它的作用和之前我们使用的 {{}} 一样，用于数据绑定：

实例演示

<!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>

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 代码第 2 行，我们使用了 v-text 指令，它绑定 message 值，会将 message 的值动态插入 <div> 标签内。

3.2 v-html

v-html是元素的 innerHTML，它用于绑定一段 html 标签：

实例演示

<!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

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 代码第 2 行，我们使用了 v-html 指令，它绑定 message 值，会将 html 元素插入 <div> 标签内。

3.3 v-bind

v-bind用于给元素的属性赋值。v-bind后面是 ：属性名=[变量名]。例如:v-bind:title="message"：

实例演示

<!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">
      鼠标悬停查看消息！
    </div>
    <div>
      <a v-bind:href="href">慕课网</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: "您好，我是小慕，欢迎来到慕课网！希望你可以在慕课网学到更多的东西！",
      href: 'https://www.imooc.com/',
      src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676-360-202.png',
      disabled: true
    }
  })
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 代码第 2 行，我们使用了 v-bind 指令给 div 标签的 title 属性赋值。在 HTML 代码第 6 行，我们使用了 v-bind 指令给 a 标签的 href 属性赋值。在 HTML 代码第 9 行，我们使用了 v-bind 指令给 img 标签的 src 属性赋值。在 HTML 代码第 12 行，我们使用了 v-bind 指令给 bitton 标签的 disabled 属性赋值。

vue 还提供了指令 v-bind 的简写方式，可以直接通过:属性名的方式。例如在上述例子中我们可以改写成：

实例演示

<!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">
      鼠标悬停查看消息！
    </div>
    <div>
      <a :href="href">慕课网</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: "您好，我是小慕，欢迎来到慕课网！希望你可以在慕课网学到更多的东西！",
      href: 'https://www.imooc.com/',
      src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676-360-202.png',
      disabled: true
    }
  })
</script>
</html>

"运行案例" 可查看在线运行效果

3.4 v-for

v-for 用于列表的循环渲染。基本语法：v-for="item in data"，data 可以是数组或者对象，接下来我们介绍对两种数据类型的循环。

3.4.1 v-for 对数组的循环渲染

当我们对数组进行循环的时候，item 表示数组中具体的某一项：

实例演示

<!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 {
      // 要循环的数组
      music: [
        { name: '青花瓷' },
        { name: '阳光总在风雨后' },
        { name: '十年' }
      ]
    }
  }
})
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释： 在 JS 代码第 6-10 行，我们定义了数组 music。在 HTML 第 3 行，我们使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将 name 插入到 <li> 标签内。页面展现结果：

3.4.2 v-for 对象的循环渲染

当我们对数组进行循环的时候，item 表示对象中某一属性的值：

实例演示

<!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: '句号',
        age: 18,
        sex: '男'
      }
    }
  }
})
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释： 在 JS 代码第 5-9 行，我们定义了对象 obj；在 HTML 第 3 行，我们使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将属性的值插入到 <li> 标签内。

3.5 v-if和v-show

vue提供了v-if和v-show两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来看一下使用两个指令各有什么效果：

实例演示

<!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">设置显示</button>
      <button v-on:click="deleteButton=false">设置隐藏</button>
    </div>
    <div>
      <button id="if" v-if="editButton">我是修改按钮，我通过v-if控制显隐</button>
      <button v-on:click="editButton=true">设置显示</button>
      <button v-on:click="editButton=false">设置隐藏</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>

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 中我们设置了两个按钮：1. id 为 show 的 button 通过 v-show 控制显隐。2. id 为 if 的按钮通过 v-if控制显隐。通过点击事件修改绑定的值。

细心的同学可能会想，既然v-if和v-show都能实现元素的显示隐藏，那为什么需要提供两个指令呢？在回答这个问题之前，我们先看一下刚刚写的案例页面。打开浏览器开发者工具，通过元素审查找到删除按钮和修改的DOM元素。

接下来我们通过点击隐藏，将两个按钮设置为隐藏状态，页面效果如下：

从图中可以发现：通过v-show设置状态的按钮元素还在页面中，只是通过样式display:none设置隐藏。而通过v-if设置状态的按钮元素从页面中删除了。现在同学们是不是已经知道v-show和v-if的区别了呢？

v-if：根据表达式的值在 DOM 中生成或移除一个元素。

v-show：根据表达式的值通过样式的改变来显示或者隐藏 HTML 元素。

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

上面我们已经了解了v-if的使用方法。事实上，v-if的条件渲染和JavaScript条件判断语句中的if、else、else if非常类似。

3.6.1 使用 v-else 指令来表示 v-if 的 “else 块”：

实例演示

<!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">
      你好，慕课网！
    </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>

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 代码中，当随机数大于 0.5 的时候会显示中文的“你好，慕课网！”，否则，显示英文的 “Hello， imooc!”。

3.6.2 v-else-if，充当 v-if 的“else-if 块”，可以连续使用：

实例演示

<!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>

"运行案例" 可查看在线运行效果

在 HTML 代码中，我们通过判断 number 的值来控制元素的显示隐藏。首先判断 number 是否为 1 ，如果是显示 A，如果不是，则判断 number 是否为 2，如果是显示 B，否则显示 C。

3.7 v-on

有时候，我们需要给元素绑定事件，vue 中提供了指令 v-on 来进行事件的绑定。用法：v-on:事件名="方法"，例如：v-on：click=“alert”。

实例演示

<!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>

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 代码第 2 行，我们给按钮定义来点击事件，并在点击的时候触发 methods 中的 hello 方法。

和v-bind一样vue同样给v-on提供了简写方式，只需要通过@事件类型的方式就可以了。例如：@click="hello"。

当然，v-on不仅只有click一种事件，还有 v-on:keyup.enter、v-on:keyup.page-down、v-on:submit等。

更多用法我们在接下来的章节中继续深入。

3.8 v-model

在原生 Javascript 的项目中，要获取用户输入框输入的内容，需要通过DOM对象的方式。在Vue项目中则不用这么繁琐，因为vue通过了指令v-model来实现数据的双向绑定。我们通过下面一段代码来学习一下：

实例演示

<!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>当前输入的年龄是: {{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>

"运行案例" 可查看在线运行效果

代码解释： 上述代码中，我们通过给input元素绑定指令v-model, 使得输入框中的数据和 data中的age形成双向绑定。这样当用户在输入框内输入值的时候age也会同时改变。同样，当我们在methods中通过add方法修改age的值时，输入框中的值也会同时改变。

3.9 v-pre

该指令会跳过所在元素和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理，例如：

实例演示

<!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>当前输入的年龄是: {{age}}</div>
    <div>当前输入的年龄是: {{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>

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 代码第 2 行，我们给 div 添加了 v-pre 指令，所以插值表达式 {{age}} 并不会生效。同样，第三行的 div 没有添加 v-pre 指令，能正常编译显示。

其渲染结果为：

当前输入的年龄是: {{age}}
当前输入的年龄是： 10

3.10 v-once

模板只会在第一次更新时显示数据，此后再次更新该 DOM 里面引用的数据时，内容不会自动更新。

实例演示

<!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>当前输入的年龄是: {{age}}</div>
    <div>当前输入的年龄是: {{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>

"运行案例" 可查看在线运行效果

代码解释： 在 HTML 代码第 6 行，我们给 div 添加了 v-once 指令，当输入框内的数据发生改变时，被v-once作用的 div 并不会实时更新数据。

4. 小结

本小节我们学习了 Vue 中的一些常用的指令，主要有以下知识点：

v-text、v-html 用于页面渲染；
v-show、v-if、v-else-if、v-else 条件渲染指令；
v-model 用于数据双向绑定；
v-on 用于事件绑定；
v-for 用于循环。

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

用户体验在网站建设过程中的被重视程度，在近些年得到越来越大的提升。很多从事网页设计的朋友都会在设计网页的时候考虑到用户体验这一关键因素，因为不重视用户体验的网站，很难在当下愈发成熟的互联网环境中得到用户的青睐与肯定。在文章中心内容开始前，我们来看一组图片：

（2003年的腾讯网首页）

（2003年的新浪网首页）

（2003年的搜狐网首页）

（2003年的百度首页）

（2003年的淘宝网首页）

十二年前的网站都是这般的，简单的table布局，可能现在那些抱着ipad上网的00后小朋友很难想象会有这么丑的网页吧。但现在div+css布局方便了我们设计很多精美的网页，界面上的美化从很大程度上提升了网站的用户体验。不过，除了界面呢？影响用户体验的因素还会有哪些？

正文开始，我们从用户体验的角度聊聊，让访客反感的12种网页设计。

总有那么些网页，让我们一打开就迫不及待想要离开的。留不住用户的网站，花再多的心思引流也都是徒劳。想要增加网站的用户粘性，提升网站用户体验，这12个因素千万要注意了。

来，从最糟糕的开始说吧……

影响用户体验的网页设计因素一：漫长的加载时间；

这是本人认为最糟糕的一个因素，网页加载时间太漫长。要是在十二年前，打开一个网页要一两分钟的话可能大家愿意忍受，毕竟这是很正常一件事；但在十二年后的今天，如果还要我花费一两分钟去等待你的网页加载，我是绝对没这个耐心忍受这一切的，不知道你们是不是赞同。

因此，提升网页加载速度，是提升用户体验的一个非常重要的因素。影响网页加载速度的因素也有很多，袁程旭在之前的文章中多次有提及这方面知识。你可以买一台配置好点儿的服务器，当然不建议买港台或海外的，部分地区的访客浏览网页时加载会很吃力；除了服务器以外，网站程序的选择也很有讲究，不过这不是一两句话可以说完的。另外，诸如网页延迟加载（点击阅读），或图片异步延迟加载（点击阅读）之类的技术使用可以很好地提升网页加载速度，感兴趣的朋友可自行了解。

影响用户体验的网页设计因素二：自动播放的声音；

说实话，这样的网站经常会吓到我，尤其是在半夜的时候。请试想一下，你打开一个网页，突然就听到了一些乱七八糟的声音，没有心理准备的话是不是会被这东西给吓到？这样的网页设计常见于那些搞销售类的页面，一进入网页就自动播放音乐或者广告宣传，实在让人抓狂。

玩QQ空间的时候感觉设置一个自动播放的背景音乐很酷炫，但设计网页的时候如果采用自动播放声音的设计其实是很影响用户体验的。你大可以在网页某处放置音频或视频文件，让用户自主选择是否打开播放，我想这样更尊重用户选择的设计才会更受用户欢迎吧？

影响用户体验的网页设计因素三：弹窗 & 广告；

可能现在有很多拦截广告的插件，但这并不影响我们对广告的厌恶。最讨厌的广告形式就是那些永无止境的弹窗了，这是对用户非常不友好的一种广告形式。当然，弹窗这一让人反感的东西也不一定表现在广告上，很多企业的官网经常弹出“点击咨询”类窗口，关闭了没几秒又自动打开，这是很让用户反感的一个设计。信息还没浏览多少，你就不断要我点击咨询，我只好退出你的网站了。

再说说广告，最恶心的广告形式是那些伪装着骗你去点击的，常见于那些下载站，你经常不知道哪个才是正确的下载链接，是不是经常就下载了一些莫名其妙的软件下来？袁程旭并不是说网站不能投放广告，是希望大家在用户体验的考虑前提下合理设计广告位，比如代码君网站的广告位分布。

影响用户体验的网页设计因素四：关键信息不在显眼位置；

设计网页的时候，你必须要知道用户第一眼看到网页时，视线的集中点会落在哪里。可能你认为网页设计只是往页面上堆砌信息那般简单，但其实信息的分配布局是很有讲究的。页面的关键信息必须要在显眼的位置突出展现，才能更方便地被用户获取，不然的话其实很影响用户体验。

就这么说吧，之前我浏览过一个主题酒店的网页，但找了半天没发现在哪里查看房型、价钱这些用户比较关心的信息和资讯，反倒是其企业文化介绍、发展历程这些并不太重要的信息，摆在了非常明显的位置。这样的设计是反人类的，在显眼位置放置用户关心的关键信息，才是正确的设计。

影响用户体验的网页设计因素五：过早地要求注册；

我去一个网站寻找一张设计图，你要我注册会员才能查看，那我肯定不干了。这些过早地要求注册的网站也是很让用户反感的，除非你是那种什么真爱、相亲类的网站。比如百合网这类，你要我注册了才有权限查看更多会员的信息，为了找到真爱那我也认了。但如果只是下载一张图片或者一首歌就要求我注册的话，哪儿有那闲工夫理会你，网上的免费资源多得是。

从用户体验的角度出发，就应该给予用户更多的自主选择权。比如我一部分资源是免费对外提供给所有用户浏览或下载的，但还有很多精品资源是会员才有权限浏览和下载，只要资源足够优秀还怕吸引不到用户来注册么？别强迫用户去做他们不喜欢做的事情，不然很容易遭受用户反感。

影响用户体验的网页设计因素六：糟糕的导航设计；

网站的导航栏往往是为了更好地引导用户，如果导航栏设计得太过糟糕的话，还怎么能起到引导用户的作用呢？设计网站导航栏的时候，一般要遵循鼠标的最短路径原则，还要尽可能的方便用户去到他们想要去的页面。网站设计的每一点一滴其实都有讲究，要不然怎么配得上设计二字？

还是以那个主题酒店的网页为例，试想一下，如果你现在迫切需要预定一个房间，但找了半天没找到订房的链接入口，内心会不会很崩溃？一边是即将喷涌而出的荷尔蒙，一边是对这糟糕网页体验上的各种差评，两者无论哪一个都够让你疯狂的，内心难免会大骂道：这都TM什么网站啊！

影响用户体验的网页设计因素七：Flash（特别是主页只有Flash展现）；

在之前的SEO类文章中，袁程旭多次提到，Flash的应用很不利于网站SEO。目前为止，搜索引擎爬虫还不能够很好地爬取Flash文件内容，对网站的收录会有一定的影响。而网站主页恰巧是SEO过程中非常值得重视的一个页面，如果只有一个Flash文件在网站主页展现的话，那就未免太搞笑了。

撇去SEO的因素不谈，如果你进入一个网站主页发现只有一个Flash文件展现，会不会有种摸不着头脑的感觉？一般这样的网页设计也多见于那些产品推广、企业推广类站点，而展现的Flash文件内容多半是对产品或企业进行介绍的。这是一种强硬推广手法，很容易让用户产生反抗的逆反心理。

影响用户体验的网页设计因素八：色彩搭配太过耀眼；

网页色彩搭配给用户视觉上的冲击是非常强的，袁程旭个人还是比较喜欢采用那些简约朴素的色彩搭配方式来设计网站。我可不喜欢进入一个网站看到五颜六色的模块，色彩搭配太过耀眼会让眼睛很容易感到疲倦。如果你网站的文字信息比较多，就更不能采用太鲜艳的色彩了，不然用户视觉疲劳了还怎么有心思去阅读资讯呢？多参考一下大型互联网公司的网页配色，或许值得你去学习模仿。

袁程旭强烈建议各位朋友，设计网页时要保证页面的主色调搭配不超过三种，除非你有特殊的需求而不得不将网页设计成万花筒那般。各位可以阅读《三分钟带你快速入门极简色彩学》这篇文章来学习一些基本的色彩学知识，我想会非常有利于你在网页设计过程中进行合理配色。

影响用户体验的网页设计因素九：table布局 or 界面过丑；

正如文章开头所言，现在的网页之所以可以设计得比十二年前精美，是因为div+css的布局结构能够营造出很多table布局实现不了的效果。如果你还沉迷于table布局的网页中无法自拔的话，那么请原谅我实在看不下去，只好默默退出你的网站了。table布局的网页非常难看，总之我是忍受够了。

不过，就算是div+css布局，竟然也有人能够把网页设计得非常丑的。这样的网页一般多是采用类似于dreamweaver的软件拖动设计出来的，没有代码写出来的网页来得精致。界面过丑的网页总之不会太让人喜欢，毕竟大家还是更乐于追求美感的，没有人会喜欢在那些丑陋的界面上多加停留。

影响用户体验的网页设计因素十：网站太过“业余”；

这里所谓的业余，不仅体现在网站资讯表达上，也体现在网站所有者的运营上。如果网站的主题不够明确，网站文章对某件事物所表达的观点也不是很让大部分人赞同，那么就可以说这样的网站很是业余。网站所有者在日常运营工作中，如果未及时更新网站资讯，或者甚至连网站的关于我们和联系我们等重要信息都未及时更新，那么这样的网站也可以称为业余网站。

如果我进入一个网站，发现首页最新推荐的文章还是2002年的，那我肯定不会多看就马上退出这个网站了。你如果在编码技术上或者SEO基础常识上略显业余，我还是可以忍受的，毕竟那跟我没有多大的关系。但如果我想获取的东西找不到，或者找到了但却很业余可笑的，那肯定也不会有好感。

影响用户体验的网页设计因素十一：设计上的一些瑕疵；

这些因素可能不会导致大量用户对你的网站产生反感情绪，但如果能注意到这些问题并且有针对性地进行改进，一定能更好地提升网站用户体验。接下来我们就简单聊聊，这些设计上的瑕疵。

1、分页浏览图片

工作中，为了提升工作效率与持续学习，常常会收集整理很多素材，有网站案例源码，有片段的代码特，在这里我收集的一些CSS小技巧。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

1. 容器水平居中

先该容器设置一个明确宽度，然后将margin的水平值设为auto即可

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

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

2. 容器垂直居中

比如，有一大一小两个容器，请问如何将小容器垂直居中？

//首先，将大容器的定位为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

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

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

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

现在，列表分隔符就会在均匀间隔的位置出现。

4. 如何使得较大的图片，能够自动适应小容器的宽度？

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. 图片水平反转

 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基准

浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：

html { font-size:62.5%;}

后面统一采用rem作为字体单位，2.4rem就表示24px

h1 {font-size: 2.4 em}

8. text-transform

text-transform用于将所有字母变成小写字母、大写字母或首字母大写

// 把字母转换成大写
.transform-uppercase {
  text-transform: uppercase;
}

// 把字母转换成小写
.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. 优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你

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

注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持

14. 容器透明度设置

将一个容器设为透明，可以使用下面的代码：

.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生成一个三角形？

.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文本框的滚动条

textarea { overflow: auto; }

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

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

// 通过此方法也可以取消第一个元素的顶部边框
// .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. 禁用鼠标点击事件

.disabled { pointer-events: none; }

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

21. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

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

// HTML
<a href="https://www.baidu.com"></a> // 有效
<a href="https://www.baidu.com" /> // 这种标签无效

在工作中，为了提升工作效率与持续学习，常常会收集整理很多素材，有网站案例源码，有片段的代码特，在这里我收集的一些CSS小技巧。

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

在线咨询

上一篇：教师常用网址（以后继续更新）
下一篇：.NET每周精选

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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 对数组的循环渲染

3.4.2 v-for 对象的循环渲染

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，充当 v-if 的“else-if 块”，可以连续使用：

3.7 v-on

3.8 v-model

3.9 v-pre

3.10 v-once

4. 小结

影响用户体验的网页设计因素一：漫长的加载时间；

影响用户体验的网页设计因素二：自动播放的声音；

影响用户体验的网页设计因素三：弹窗 & 广告；

影响用户体验的网页设计因素五：过早地要求注册；

影响用户体验的网页设计因素六：糟糕的导航设计；

影响用户体验的网页设计因素七：Flash（特别是主页只有Flash展现）；

影响用户体验的网页设计因素八：色彩搭配太过耀眼；

影响用户体验的网页设计因素九：table布局 or 界面过丑；

影响用户体验的网页设计因素十：网站太过“业余”；

影响用户体验的网页设计因素十一：设计上的一些瑕疵；

1. 容器水平居中

2. 容器垂直居中

3. 用Flexbox 摆脱外边距的各种 hack

4. 如何使得较大的图片，能够自动适应小容器的宽度？

5. 黑白图像

6. 图片水平反转

7. font-size基准

8. text-transform

9. font-variant

10. 模糊文本

11. CSS首字放大

12. user-select 禁止用户选中文本

13. 优化显示文本

14. 容器透明度设置

15. CSS三角形

16. 取消IE文本框的滚动条

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

18. 页面顶部阴影

19. 继承 box-sizing

20. 禁用鼠标点击事件

21. 使用属性选择器用于空链接

您的项目需求