Vue.js学习笔记1 - Vue基础

2019-02-08 本文已影响2人 YYYYYY25

开始之前，引入一段Vue官方的文字：

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

怎么理解这段话呢？我个人除了几年前做毕业设计的时候玩过HTML和PHP以外，再没有多余的前端基础，而且那毕设的东西简陋不堪，完全不能构成体系，所以算是一个零基础的小白。但是由于自身是个程序员，所以我初步制定的学习路线大概是：

Vue基础
HTML+CSS
Vue组件

等以上3个阶段渡过之后，希望能直接接触公司项目代码，然后不断从实战中学习。最后，希望这个路线是可行的。

这个学习的过程准备在简书做粗略记录，简单的罗列一下知识点和个人的踩过的坑。
当然，一切的学习要基于文档，在初学阶段文档可以解决你遇到的大多数问题。

1 vue是什么

Vue.js 官方文档

2 使用

2.1 CDN

这种方式推荐在第一个阶段使用，引入<script>脚本就可以直接使用：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue CLI
这是一个官方提供的脚手架，配合命令行工具可以创建完整的项目工程，不建议初学者直接使用。官方推荐在熟悉 Vue 本身之后再使用 CLI。

3 开始

开始学习Vue.js最简单的方式就是在浏览器中直接使用：JSFinddle。

但是我的学习方式是以HTML、CSS 和 JavaScript的方式将文件分开，这样方便第二阶段的学习，文件结构如下：

第一个vue程序：

index.html文件：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>

</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js文件：
var vm = new Vue({
    el : "#app",
    data : {
        message : "Hello Vue!"
    }
})

运行结果

解释：
在上述HTML代码中，在<header>中引入cdn的<script>脚本使其具备运作Vue.js的能力，然后在<body>中把我们自己创建的app.js文件引入。在app.js文件中创建一个Vue对象，并声明一个名为message的属性，在HTML文件中通过{{message}}绑定，发现页面展示出了message属性所对应的字符串。这就是一个最简单的Vue程序。

4 数据和方法

在Vue对象中，首先有一个el字段，用于绑定唯一的<div>标签对应的id。
其次是声明数据和方法，如下：

var vm = new Vue({
    el: "#app",
    data: {
      name: "Ricky"
      age: "28"
    },
    method: {
      greet: function() {    
          return 'Good Morning';
      }
    }
})

方法中调用对象数据： this.name, this.age。

5 属性绑定 v-bind

在<a>标签中，通过v-bind:href把跳转链接与data中的属性绑定:

data: {
    url: "http://www.baidu.com"
}
<a v-bind:href="url"> 百度 </a>

将data中的属性，绑定给<input>标签：

data: {
    job: "iOS coder"
}
<input type="text" v-bind:value="job">

6 原始html v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML标签，你需要使用 v-html 指令：

data: { 
    rawHtml: "<span style='color: red'>Red Color</span>"
},
<span v-html="rawHtml"></span>

7 事件单机/双击/鼠标/键盘 v-on

单机 click
<button v-on:click=“add()”> 加 </button>

双击 dblclick
<button v-on:dblclick=“add()”> 加 </button>

鼠标移动 mousemove
methods: { 
    updatemouse: function(event) {
        // console.log(event);
        this.x = event.offsetX;
        this.y = event.offsetY;
    }
}      

<div id="canvas" v-on:mousemove="updatemouse">
    {{x}}, {{y}}
</div>

8 事件修饰符

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

9 双向数据绑定

input/select/textarea

9.1 ref的key

logName: function() {
    this.name = this.$refs.key.value
}

<input ref="key" type="text" v-on:keyup="logName">
<span> {{name}} </span>

9.2 v-model指令

data : {
    message: ""
}

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

10 计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },

  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Original message: "Hello"
Computed reversed message: "olleH"

方法和计算属性的区别：

不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>New message: "{{ methodMessage() }}"</p>
    <p>New message: "{{ computedMessage }}"</p>
</div>

js:
methods: {
    methodMessage: function() {
        return this.message.split('').reverse().join('')
    }
},
computed: {
    computedMessage: function() {
        return this.message.split('').reverse().join('')
    }
},

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
在耗时操作、优化性能时，可以选择计算属性

11 绑定css样式

形式1：绑定样式可以与class属性并存

形式2：绑定样式可以定义在标签外

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

形式3：绑定时返回一个计算属性，常用

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

12 v-if v-else v-show

v-if:

<p v-if = "error"> 404 </p>

v-if 与 v-else:
v-else 必须跟在 v-if 或 v-else-if 后面。否则不会被识别

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<div v-if="Math.random() > 0.5">
    Now you see me
</div>
<div v-else>
    Now you don't
</div>

多个元素：

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

v-else-if:
充当 v-if 的 else-if 块，需要紧跟在 v-if 或者 v-else-if 后

<p v-if = "error">
  404
</p>
<p v-else-if = "success">
  200
</p>

v-show:

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

13 v-for 循环

可以遍历数组，也可以遍历对象

遍历数组:

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

也可以使用 of 替代 in，如下：
<div v-for="item of items"></div>

遍历对象:

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

一个参数：
<li v-for="value in object">
  {{ value }}
</li>

两个参数：
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

三个参数：
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

小结：

第一个阶段的Vue基础学习非常重要，我这里只是做了一些简单的记录，这些基础的用法在初学阶段需要随时查阅，每个小知识点都需要自己再花时间去深入了解。
如果有需要，这个把这个列表中的知识点转到自己的笔记中，方便查阅。

下个阶段需要学习一些HTML+CSS的基础知识，掌握一些常用标签和CSS技术，下个阶段结束以后便可以开始尝试构建简单的静态页面了。
前两个阶段的学习，我大概花费5-7天的时间，完成之后不妨把自己公司的产品挑几个页面自己实现一下。

Vue.js学习笔记1 - Vue基础

1 vue是什么

2 使用

3 开始

4 数据和方法

5 属性绑定 v-bind

6 原始html v-html

7 事件单机/双击/鼠标/键盘 v-on

8 事件修饰符

9 双向数据绑定

10 计算属性

11 绑定css样式

12 v-if v-else v-show

13 v-for 循环

小结：

猜你喜欢

热点阅读

Vue.js学习笔记1 - Vue基础

1 vue是什么

2 使用

3 开始

4 数据和方法

5 属性绑定 v-bind

6 原始html v-html

7 事件 单机/双击/鼠标/键盘 v-on

8 事件修饰符

9 双向数据绑定

10 计算属性

11 绑定css样式

12 v-if v-else v-show

13 v-for 循环

小结：

猜你喜欢

热点阅读

7 事件单机/双击/鼠标/键盘 v-on