vue入门示例（一）

herokang 2019-08-21 15:33:58  12696  收藏 44
分类专栏： 前端 文章标签： vue入门
  • 为了让广大后端人员更快的理解上手vue，我们先不适用ide和vue-cli等工具，先采用手动引入js的方式，从一个最简单的例子开始，循序渐进

1. 到官网下下vue.js
vue官网
我们这里使用开发版，它包含了许多警告提示信息

新建一个文件夹把vue.js放进去，然后创建一个html文件命名为index.html

2. 第一个hello world

编辑index的内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="hello">

    <title>hello</title>

    <script src="./vue.js"></script>

</head>

<body>

<div id="app">{{msg}}</div>

<script>

    new Vue({

        el: "#app",

        data: {

            msg: "hello world"

        }

    })

</script>

</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

稍后我们在解释里面的各个意思，先使用浏览器打开index.html可以看到页面显示 hello world。

3. 挂载点、实例与模板

这里挂载点是指vue和div的绑定关系
模板就是绑定的标签里面的内容
实例就是vue实例，将模板的内容交给vue来管理

4. 验证模板就是div里的内容
vue提供了template标签，修改代码

注意template由于vue的校验限制不能直接写{{msg}}，必须写到标签里，所以我们加一个h1标签。
刷新页面，同样显示hello world。

5. v-text与v-html
v-text与v-html可以指定标签内的内容，继续修改代码

刷新页面依然可以显示 hello world
再次改成v-html效果也一样，那这两者有什么区别呢？
将data中的数据修改一下

data: {

            msg: "<h1>hello world</h1>"

        }
  • 1
  • 2
  • 3

刷新页面显示：<h1>hello world</h1>
将标签改为v-html，刷新页面可以正常显示大号的：hello world
所以两者的区别就是v-html会解析html标签。

6. 点击事件
vue的点击事件：@click （也可以使用v-on:click），我们当然是使用简写啦
数据绑定：前面我们已经会使用插值表达式{{msg}}使div中的内容和vue实例中的data里面的msg绑定到一起，所以改变data里面的msg的值，div里面的内容也会跟着改变，这就是数据绑定

每个vue实例都有一个methods属性用来定义函数，使用@click绑定一个名字为handlerClick的方法，方法内没出发一次点击事件，把之前msg的内容后面拼接一个click字符串。
刷新页面看效果，每点击一次后面就会多一个click

7. 属性绑定和数据双向绑定
定义一个input标签，让input标签和vue实例中data的value属性绑定

刷新页面

其中v-bind:value="value"也可以使用简写 :value=“value” ，我们平时就使用简写。
在input框下添加代码<div>{{value}}</div>
刷新页面改变输入框的值可以看到下面的内容并没有随着一起变

所以使用:value的方式绑定属性只是一种单向绑定，只有vue实例里的值改变能引起页面的变化，而页面的变化不能同步到vue实例。要想实现这个功能可以使用双向绑定，将input标签代码改为<input v-model="value"/>
再次刷新页面

8. 计算器属性和监听器也叫侦听器
打印姓名示例，先创建两个双向绑定的input标签，然后定义一个fullName，我们希望使用fullName输出姓+名，当然你也可以使用{{firstName}}{{lastName}}的写法，但是我们还是推荐使用计算器属性，稍后我们再说原因

<div id="app">

    <div>{{msg}}</div>

    姓：<input v-model="firstName"/>

    名：<input v-model="lastName"/>

    <div>{{fullName}}</div>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6


computed就是vue对象的计算器属性，里面是一个带返回值的函数，{{xx}}会先取data里面的属性，如果没有就查找计算器属性里面的方法名。
运行效果

computed计算器属性相当于加了一层缓存，只有当里面用到的变量值变化时才会重新计算，否则从缓存获取，所以应该尽量使用computed，不应使用{{}}{{}}的方式。
侦听器：负责监听绑定数据的变化，触发一个函数
例：添加一个计数器，记录姓和名的变化次数

9. v-if、v-show、v-for

v-if 控制标签及其内容的显示和不显示
v-show 控制标签及其内容的显示和隐藏
区别：if是通过添加dom和删除dom实现显隐，show是通过给标签添加隐藏属性显隐。if会删除标签show不会
如：

<div id="app">

    <div v-if="flag">{{msg}}</div>

</div>

<script>

    new Vue({

        el: "#app",

        data: {

            msg: "hello world",

            flag: false

        }

    })

</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

hello world将不显示，此功能可以结合@click事件控制目标的显示和隐藏，大家可以自己写一下
v-for：
用来循环遍历

item相当于数据项内容，index是遍历的下标。

10. todo List 功能实现
我们来完成一个功能，输入框录入文字，点击提交，录入的文字以列表形式追加在输入框下

代码如下

11. 组件，全局组件与局部组件，父组件向子组件传值
上面的例子我们可以单独吧li标签抽取出来作为组件。

局部组件定义在vue对象里面，全局组件使用Vue.component定义，组件其实也是一个vue实例，new Vue里面有的属性组件里也可以写，比如methods。
向组件内传值需要定义

props: ['xxx'],
  • 1

组件内才可以直接用{{xxx}}

12.todo List 实现删除功能

emit传多个参数：

Vue实例（1）的更多相关文章

  1. Vue - 实例

    1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...

  2. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  3. vue实例生命周期

    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...

  4. vue实例的几个概念

    1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...

  5. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  6. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  7. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  8. v-cloak 实现vue实例未编译完前不显示

    前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...

  9. vue实例讲解之axios的使用

    本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...

  10. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

随机推荐

  1. 利用SQL语句(命令方式)创建数据库（以及句子解释）

    create database 课程管理    //1:create database为SQL语句,用于创建数据库.执行完之后会创建一个新数据库及存储该数据库的文件,或从先前创建的数据库文件中附加数据 ...

  2. 『无为则无心』Python面向对象 — 53、对Python中封装的介绍

    目录 1.继承的概念 2.继承的好处 3.继承体验 4.单继承 5.多继承 1.继承的概念 在Python中,如果两个类存在父子级别的继承关系,子类中即便没有任何属性和方法,此时创建一个子类对象,那么 ...

  3. uni-app tabBar中间按钮 之 midButton

    midButton 中间按钮 仅在 list 项为偶数时有效 , 需要App 2.3.4+.H5 3.0.0+以上版本 midButton 属性说明 属性 类型 必填 默认值 描述 width Str ...

  4. 018 磁盘 IO 性能监控/压测工具(sar、iotop、fio、iostat)

    1 sar 命令查看当前磁盘 IO 读写 sar(System Activity Reporter 系统活动情况报告)是 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告 ...

  5. Java IO 技术

    文章目录 流的概念 IO 流类体系 InputStream / OutputStream Reader / Writer 文件字节流 文件字符流 缓冲字节流 缓冲字符流 字节数组流 数据流 转换流 序 ...

  6. CobaltStrike逆向学习系列(3)：Beacon C2Profile 解析

    这是[信安成长计划]的第 3 篇文章 关注微信公众号[信安成长计划] 0x00 目录 0x01 Controller 端分析 0x02 Beacon 端分析 0x03 展示图 在上一篇文章中完成了 S ...

  7. NSSCTF-gif好像有点大

    下载的附件压缩包是一个接近9mb的压缩包,其实是比较简单的一个小杂项,应该就算是个签到,接下来就是使用工具进行解答,可以使用LSB隐写工具,一帧一帧的查看,最后是在500多看到的一个是存在二维码的,扫 ...

  8. 【windows 操作系统】线程句柄HANDLE与线程ID的关系

    什么是句柄 句柄是一种指向指针的指针.我们知道,所谓指针是一种内存地址.应用程序启动后,组成这个程序的各对象是住留在内存的.如果简单地理解,似乎我们只要获知这个内存的首地址,那么就可以随时用这个地址访 ...

  9. updatexml , extractvalue 报错注入

    过滤了union, < ,> = 空格过滤,()没有被过滤 updatexml没有被过滤 那么就不能用布尔类型注入 数据库名 username=admin'or(updatexml(1,c ...

  10. （第二章第二部分）TensorFlow框架之读取图片数据

    系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html 本文概述: 目标 说明图片 ...