专栏首页菜鸟计划vue小白快速入门

vue小白快速入门

一、vue是什么

Vue 是一套用于构建用户界面的渐进式框架

压缩后仅有17kb

二、vue环境搭建

你直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

但在用 Vue 构建大型应用时推荐使用 NPM 安装。

这里推荐一下是用淘宝的cnpm,非常的快

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后进行安装

# 全局安装 vue-cli
 npm install --g vue-cli
# 创建一个基于 webpack 模板的新项目
 vue init webpack my-project
# 安装依赖,走你
 cd my-project
 npm run dev

三、第一个vue应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <div>{{title}}</div>
        <button @click="say()">单击事件</button></br>
        <div>今年{{age}}</div>
        <input v-model="age">
    </div>
</body>
</html>
<script src="lib/vue.js"></script>
<script src="js/hello.js"></script>
var app = new Vue({     //通过构造函数Vue就可以创建一个Vue的根实例,并启动Vue应用
   el: '#app',  //指定页面上一个已经存在的DOM元素来挂载Vue实例
   data: {      //对象的数据
      title: 'hello vue',   //通过插值语法{{}}绑定
        age: 22     //通过v-model进行双向数据绑定
    },
    methods: {   //对象的方法
        say: function(){
            console.log(this.title);
        }
    },
    watch: {    //监听数据的变化
        'age': function(newVal, oldVal){
            console.log(newVal, oldVal);
        }
    }
});

四、Vue生命周期

每个Vue 实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。

大体上的生命周期就是:创建(created)---挂载(mounted)---销毁(destroy)

Vue 的生命周期钩子比较常用的有:

• created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。需要初始化处理一些数据时会比较有用. • mounted el 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。 • beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener 监听的事件等。

var  app  =new  Vue({
    el:  '# app',
    data:  {
        a:  2
    } ,
    created:  function  () {
        console.log(this.a);  //2
    },
    mounted:  function  () {
        console.log(this.el);  //<div id =”app”></div>
    }
});

完整的一个生命周期图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript 原型及原型链详解

    我们创建的每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个原型对象,而这个原型对象中拥有的属性和方法可以被所以实例共享。 fun...

    柴小智
  • redux基础概念及执行流程详解

    全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发...

    柴小智
  • vue组件详解(五)——组件高级用法

    一、递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。 示例如下: <div id="app19"> ...

    柴小智
  • Vue:基于Vue2的饿了么实战总结

    MrTreasure
  • Java编程基础阶段笔记 day06 二维数组

    persons = new  String[][]{{"小龙哥","110"},{"小仓","119"},{"小强","120"}};

    大数据港-王庆港
  • SPSS竟然都能做数据地图了~~~

    数据地图SPSS篇 ▼▼▼ 最近在做数据地图专题,搜集了好多能够实现数据地图可视化的软件操作技巧,唯独漏掉了SPSS。 总觉得SPSS作为一个傻瓜式菜单操作的...

    数据小磨坊
  • 前端基础-Vue.js实例对象

    通过打印实例对象发现,其中 el 被Vue 放入了公有属性中,而data 则被放入了 私有属性中,而 data 中的数据,需要被外部使用,于是 Vue 直接将d...

    cwl_java
  • 2020年,vue面试遇到的问题(中)

    具体操作:监听你想点击后不会丢失 input 焦点的那个元素的 mousedown 事件,回调里面调用 event.preventDefault(),会阻止使当...

    桃翁
  • vue系列之面试总结

    答:Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue ...

    桃翁
  • 【威胁通告】FusionAuth远程命令执行(CVE-2020-7799)漏洞威胁通告

    北京时间1月28日,NVD发布了一个FusionAuth存在Apache Freemarker模板远程命令执行(CVE-2020-7799)的漏洞;发现在Fus...

    绿盟科技安全情报

扫码关注云+社区

领取腾讯云代金券