Vue 入门笔记

今天分享一篇技术笔记,关于 Vue 入门的内容。

关于技术类的文章,我一般很少写,因为自己学习技术的时间并不长,水平也菜,工作内容大部分是需求相关,跟技术还是有些距离,学习了解技术都是为了解决工作中实际的需求,也当作自己的业余爱好了。

有这么个奇怪爱好,也是因为难以忍受一些低效的工作方式,总想着能不能通过技术的手段来解决。很多时候,都是自己分析需求,自己实现,最后部署上线。曾经以为自己是个全栈工程师,慢慢了解更多后,才发现自己是「全干工程师」,后来干脆把工程师的名头也去掉了。

正文

前段时间,根据 wechat-format 这款微信公众号编辑器,做了一些定制开发,其中的前端页面是使用 Vue 编写的,虽然没有系统学习过 Vue,但是觉得挺有意思,于是就把 Vue 的官方文档学习了一遍,分享出来,就当作 Vue 的入门吧。

Vue 引入

Vue 的使用其实非常简单,刚开始学习的时候,我们最好不要引入脚手架。直接在一个 HTML 页面中,引入 Vue 的文件即可。例如下面这样:

<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>Hello Vue!</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, World',
    },
  });
</script>
</html>

如上代码所示,连下载 Vue 都不需要,直接使用官方提供的 CDN 文件即可。熟悉模版引擎的应该知道,{{ message }} 表示在页面中引入了一个变量,变量值从哪里来呢?

脚本中有一段 new Vue() 的代码,先不用管它是做什么的,你现在只需要知道 message 变量值是从它里面的 data 参数传过来的即可。el 参数指定了 Vue 的作用范围,data 定义了页面中所有的变量。你大概应该猜到,用浏览器打开这个页面,我们第一个 Hello, World 程序就完成了。

数据绑定

学习 Vue,你肯定总是会听到一个词,叫做「响应式数据绑定」。那么什么是响应式数据绑定呢?上面的例子,不就是类似 jQuery 先获得页面元素,然后给赋个值,最后打印在页面上吗?其实,差别大了。

我们打开浏览器的控制台,输入 app.message 可以直接得到 message 的值,当我们修改 app.message 的值的时候,页面中显示也及时改变了。这就是,响应式数据绑定。

绑定属性

除了绑定文本变量,还可以绑定 HTML 的标签属性。例如如下例子:

<div id="app">
    <p><span :title="now">鼠标放上去试试,刷新一下再试</span></p>
</div>

上面页面代码中,:title 代表 title 这个属性被绑定在了 now 变量上,那么,在脚本里,我们添加上对应的变量申明,如下代码:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, World',
        now: '页面加载于 ' + new Date().toLocaleString(),
    }
});

它的作用就是,title 被 now 赋值,效果如下:

判断

之前一直使用 ejs 等模版引擎,都是因为可以在页面中,方便的进行逻辑控制。Vue 也不例外,它同样支持条件判断与循环等。例如控制元素是否显示,如下代码:

<p>后面有个按钮(打开控制台,给 app.seen 变量赋值) <button v-if="seen">我是妖怪</button></p>

v-if 指令可以绑定一个变量,用来控制元素是否显示,脚本中,添加如下代码:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, World',
    now: '页面加载于 ' + new Date().toLocaleString(),
    seen: false
  }
});

通过在脚本中控制 seen 变量,就可以控制元素在页面中的显示状态。

循环

学会了判断指令,循环指令也是同样的道理。添加页面元素如下:

<ol>
  <li v-for="todo in todolist">
    {{ todo.title }}
    <small>{{ todo.desc }}</small>
  </li>
</ol>

页面中使用 v-for 指令,脚本中加入 todolist 变量,变量值为对象数组。如下:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, World',
    now: '页面加载于 ' + new Date().toLocaleString(),
    seen: false,
    todolist: [
      { title: '买番茄', desc: '一定要红色的' },
      { title: '买馒头', desc: '要大个的' }
    ]
  },
});

通过在脚本中,改变 todolist 的值,页面显示也将及时改变,这就是响应式数据绑定的魅力。

事件

如何改变脚本中变量的值?除了在控制台手动改变,我们还可以通过事件的方式。例如鼠标点击事件。在页面中加入一个按钮,如下:

<p>做个照妖镜,显示妖怪:<button v-on:click="showBtn">{{ btnLabel }}</button></p>

v-on:click 指令指的是绑定一个点击事件,点击按钮的时候,执行 showBtn 函数,脚本中需要定义 showBtn 函数,在 methods 参数下定义函数,如下:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, World',
    now: '页面加载于 ' + new Date().toLocaleString(),
    seen: false,
    todolist: [
      { title: '买番茄', desc: '一定要红色的' },
      { title: '买馒头', desc: '要大个的' }
    ],
    btnLabel: '照妖镜开启',
  },
  methods: {
    showBtn: function(){
      this.seen = this.seen?false:true;
      this.btnLabel = '照妖镜关闭';
    }
  }
});

可以看出,showBtn 函数作用是改变了上文中 seen 以及 btnLabel 变量的值,当点击按钮的时候,seen 和 btnLabel 也随之改变,页面就会及时响应。

双向绑定

针对表单的输入,Vue 还提供了 v-model 指令,可以轻松实现表单输入与应用之间的数据绑定。例如页面再加一个 input 控件:

<p>做个扩声器,你说啥,我说啥:<input type="text" v-model="saysay" placeholder="说点什么吧"></p>
<h3>{{ saysay }}</h3>

通过 v-model 指令,将表单输入数据绑定到了 saysay 变量上,表单输入内容将实时打印到页面中。

写到这里,其实还不算 Vue 的入门,因为还没有体验到 Vue 的组件化应用构建。

组件化

什么是组件化?不管做什么事情,我们总是希望能够将大任务,细化成一个一个的任务清单。在项目开发过程中,也是这样的道理。我们在编写一个大型项目的时候,总是希望能够拆分成一个一个的小项目,每个小项目又可以拆分成一个一个的功能件。功能件之间最好是低耦合的,这样,我们就能将开发好的功能件一个个组装起来,一个大的项目自然就完成了。组件化就是基于这样的思想。

在前端页面中,Vue 支持我们自定义 HTML 标签,这样的自定义的标签就相当于一个一个的功能组件。例如下面页面中,添加一个用户信息的自定义标签。

<user-info name="lupeng" career="producter"></user-info>

这个 user-info 标签,并不属于标准的 HTML ,所以在脚本中,我们需要通过 Vue 注册这个标签,代码如下:

Vue.component('user-info', {
    props: ['name','career'],
    template: '<p>Hi, I am {{ name }},I am a <b>{{ career }}</b></p>'
});

代码不难理解,props 参数接受页面中传过来的标签属性值,这里从 user-info 标签中获得 name 以及 career 的值,template 为渲染模版,这里面就是标准的 HTML 了,通过 name 和 career 变量值构建模版。这样,页面就会显示模版的内容。

但实际情况,变量值并非都来源于页面,有可能是异步获取,数据来源于 js 脚本。那么,这里就要用到上面数据绑定的知识了。将 name 和 career 属性绑定到自定义的变量 user 中,user 定义为一个对象,包含 name 和 career ,页面代码修改为:

<user-info :name="user.name" :career="user.career"></user-info>

前面加上 : 就代表绑定属性值,name 绑定到 user.name 上,career 绑定到 user.career 上,然后在脚本中定义 user 变量,整体代码如下:

Vue.component('user-info', {
    props: ['name','career'],
    template: '<p>Hi, I am {{ name }},I am a <b>{{ career }}</b></p>'
});
var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, World',
      now: '页面加载于 ' + new Date().toLocaleString(),
      seen: false,
      todolist: [
        { title: '买番茄', desc: '一定要红色的' },
        { title: '买馒头', desc: '要大个的' }
      ],
      btnLabel: '照妖镜开启',
      saysay: '',
      user: {
        name: '张三', 
        career: '木匠'
      }
    },
    methods: {
      showBtn: function(){
        this.seen = this.seen?false:true;
        this.btnLabel = '照妖镜关闭';
      }
    }
});

整个传参的过程就清晰了,自定义组件中接受的属性值,通过 props 定义,值从页面传输到自定义组件中;页面的属性可以与脚本中的变量绑定,于是脚本中的变量值,就可以直接控制自定义组件,从而实现子组件的传参

学到这里,应该可以算是 Vue 入门了,可以使用 Vue 做一些简单的前端应用了。内容就写到这里,希望对你有帮助。

文中代码这里查看:vue-demos/index.html

Comments
Write a Comment