VueJs学习笔记：基本概念及简单demo

Vue官方介绍：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

简单小巧指的是vue.js压缩后仅有17KB，量轻。渐进式指的是我们学习和使用vue的过程中是一步一步循序渐进的，不必一开始就学会并使用所有的东西。

1.vue.js在设计上采用的是MVVM模式：当view（视图）层发生变化时，会自动更新到ViewModel（视图模型）层，反之亦然。View和Model通过双向绑定建立联系。大家都使用过JQuery，当页面的数据发生变化的时候，我们经常用JQuery去操作DOM元素来将最新的数据呈现给用户。这样带来的后果是我们的视图代码和业务代码紧紧耦合在一起，随着功能的增加和业务的复杂程度的增加，我们的代码会越来越难维护。

2.而Vue.Js通过MVVM模式将数据和视图双向绑定，我们只需要关注数据即可，剩下操作浏览器DOM的事情Vue帮我们自动完成，这样我们就可以专注于业务代码。

3.我们有两种方式将VueJs引进到自己的项目中，一种是我们直接通过script加载CDN文件：<script src="https://unpkg.com/vue/dist/vue.min.js"></script>，这种方式是自动引入最新版本的VueJs。第二种方式是我们将Vue代码包下载到自己的项目本地，然后在页面中通过script标签引用即可，我觉得如果是自己学习阶段的话可以直接引用CDN文件，这样简单方便。如果是实际项目的话还是将包下载到本地再引用。

4.下面用一段代码演示一下入门用法()：

<body>
    <div id="app">
        <input type="text" v-model="name"/>
        <h1>Hello：{{name}}</h1>
    </div>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script>　　　　//此处表示创建一个vue示例，并且将此示例挂在到id为app的html元素上
        var app=new Vue({
            el:"#app",       //el是必须的，后边可以是html标签，也可以是css选择器
            data:{
                name:''
            },　　　　　　　created:function(){　　　　　　　　　console.log(this.name);//此处输出name的值　　　　　　　  },　　　　　　　mounted:function(){　　　　　　　　　console.log(this.$el);//此处输出<div id="app"></div>　　　　　　  }
        });
    </script>
</body>

运行结果：

5.动手试一下发现，我在输入框中输入内容之后，输入的内容会自动显示在下边，这就是vue双向绑定数据。

6.vue挂载实例的时候一些事件

　　created：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载,$el还不可用。一般我们需要初始化一些数据的时候会用到这个事件。

　　mounted：el挂载到实例后调用，一般我们的第一个业务逻辑会从这里开始

　　beforeDestory：实例销毁之前调用，主要用于解绑使用addEventListener监听事件等。

7.这些事件与data类似，也是作为选项写在vue内，并且事件内的this指的是调用它的实例。

8.过滤器：

　　我们可以在{{}}插值的尾部添加一个符号：|   对数据进行过滤，经常用于格式化文本数据，比如数字小数位的显示，时间的格式化等。

<body>
    <div id="app">
        {{num|formatNumber}}　　　　 <p v-if="show">show为true，显示这段文本</p>
    </div>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num: '',　　　　　　　　　 show:true
            },
            created: function () {
                console.log(this.num);//此处输出name的值
            },
            mounted: function () {
                console.log(this.$el);  //此时输出<div id="app"></div>
            },
            filters: {
                formatNumber: function (value) {
                    return Math.round(value);  //返回四舍五入之后的数字
                }
            }
        });
    </script>
</body>

9.过滤器也可以同时使用多个：{{ num | filter1 | filter2 }}，也可以接收参数：{{ num | filter('arg1','arg2') }}，这里的字符串arg1和arg2将分别传递给过滤器的第二个和第三个参数，因为第一个是数据本身。

10.指令(directive)是vue最常用的一项功能，它带有前缀v-，例如上述代码中的v-if，还有v-bind，v-on

<body>
    <div id="app">
        <a v-bind:href="url"></a>
    </div>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                show: true,
                url: 'www.fs.com'
            }
        });
    </script>
</body>  a标签渲染后的结果为:<a href='www.fs.com'></a>使用语法糖可以简写为:<a :herf="url"></a>

参考资料：《Vue.Js实战》-梁灏

作者：ADi

转载请注明出处：https://www.cnblogs.com/Infancy/p/10741245.html

VueJs入门（一）的更多相关文章

  1. 中文代码示例之Vuejs入门教程(一)

    原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...

  2. 2017-11-09 中文代码示例之Vuejs入门教程(一)

    "中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面 ...

  3. 2017-10-31 中文代码示例教程之Vuejs入门&后续计划

    "中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 这里把vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 过程中有一些发现, 初步看来Vuejs对中 ...

  4. 2017-11-20 中文代码示例之Vuejs入门教程(一)问题后续

    "中文编程"知乎专栏原文 第一个issue: Error compiling template if using unicode naming as v-for alias · I ...

  5. vuejs入门备忘&&用vuecli构建应用

    vuejs框架入门 mvvm图例 这张图足以说明MVVM的核心功能,在这三者里面,ViewModel无疑起着重要的桥梁作用. 一方面,通过ViewModel将Model的数据绑定到View的Dom元素 ...

  6. vuejs入门小demo-搜索大全

    这个demo非常适合入门的同学,不再是简单的todolist.用到的知识点有组件通信,过渡效果,vue-rsource,还有一些基本的vue指令. 先放一张截图: 是不是感觉高端大气上档次呢,演示地址 ...

  7. vuejs 入门

    配置环境教程网上太多了,就不赘述了,建议使用npm 命令行安装,总觉得这个念头不会使用命令行配置环境的就不是一个好的程序员,或者为了方便也可以直接在本地建一个.html文件,然后引用下面的链接即可. ...

  8. 第一节：Vuejs入门之各种指令

    一. 简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...

  9. VueJs(1)---快速上手VueJs

    [VueJs入门] 版权声明 首先申明:此篇博客不是本人原创,只是最近开始学习vue.jS,看到有作者写的很不错,我仅在它的基础上仅仅是修改了样式 原文博客地址:https://blog.csdn.n ...

随机推荐

  1. 深入MySQL复制(二)：基于GTID复制

    相比传统的MySQL复制,gtid复制无论是配置还是维护都要轻松的多.本文对gtid复制稍作介绍. MySQL基于GTID复制官方手册:https://dev.mysql.com/doc/refman ...

  2. Redis持久化及其配置

    引言 终于可以有时间继续看书,整理自己的见解, 写下2019年第一篇自己的随笔.从去年9月份跳槽到新公司后,几乎天天的加班让整个人都盲目了,原本计划好的事情总是会被打乱.都说坚持一件事情很难,特别是写 ...

  3. Linux C 实现一个简单的线程池

    线程池的定义 线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线程池线程都是后台线程.每个线程都使用默认的堆栈大小,以默认的优先级运行,并处于多线程单元中.如 ...

  4. 业务开发（八）—— Maven

    0x01.maven install成功后,项目旁边依然有个红叉 maven--update--选中下方Force Update of Snapsshots/Releases 0x02.An inte ...

  5. NLP入门（四）命名实体识别（NER）

      本文将会简单介绍自然语言处理(NLP)中的命名实体识别(NER).   命名实体识别(Named Entity Recognition,简称NER)是信息提取.问答系统.句法分析.机器翻译等应用领 ...

  6. Python爬虫之使用Fiddler+Postman+Python的requests模块爬取各国国旗

    介绍   本篇博客将会介绍一个Python爬虫,用来爬取各个国家的国旗,主要的目标是为了展示如何在Python的requests模块中使用POST方法来爬取网页内容.   为了知道POST方法所需要传 ...

  7. Spring Day 1

    概述 开发三层架构,web层 service服务层,dao持久层. web层struts2配置核心过滤器/*,通过拦截器调用目标action,action中调用service层开启事务. servic ...

  8. VS2015 项目中 添加windows服务

    1. 在项目中添加winows服务 今天刚刚为自己的项目添加了windows服务,以服务的形式运行后台系统,为前端提供接口服务,下面说一下具体怎么为vs项目添加windows服务 2. 添加Windo ...

  9. git error: RPC failed; result=56, HTTP code = 200

    突然发现git pull 后出现几次都无果,百度后, 发现是curl的postBuffer 默认值较小的原因,配置下这个值,就不会出现该错误了.解决如下: git config --global ht ...

  10. Yii2基本概念之——行为(Behavior)

    使用行为(behavior)可以在不修改现有类的情况下,对类的功能进行扩充.通过将行为绑定到一个类,可以使得类具有行为本身所具有的属性和方法,就好像是类本来就具有的这些属性和功能一样. 好的代码设计, ...