2019独角兽企业重金招聘Python工程师标准>>>

第一个vue项目

1.创建
            vue init webpack app01
        2.安装依赖
            cd app01
            npm install
        3.构建
            npm run dev  启动本机的8080端口
            或
            npm run start  启动本机的8080端口
        4.打包
            npm run build

vue工程项目结构
        app01
            build     webpack配置文件
            config    当前项目的配置文件
            dist    打包后的目标目录
            node-modules    第三方模块存储目录
            src    源码目录
            static    
            index.html    首页
            package.json node项目核心文件
            .babelrc    babel配置文件
            .gitignore    不受git管理的文件如:dist node_modules

vue实例
            new Vue({
                data:{
                    a:1,
                    b:2
                },
                methods:{
                    ... 
                    //集成
                    foo(){
                        this //this指向vue实例
                    }
                },
                components:{}
                //生命周期钩子函数
                beforeMount(){
                    this //this也是指向vue实例
                    $.get('',() => {
                        this //箭头函数中的this指向外层函数的this
                        //可以在这个回调函数中直接访问a
                        this.a
                    })
                },
                mounted(){

}
            })
            每个.vue文件中都有一个vue实例
            //约定data为函数,返回一个对象
            export default {
                data(){
                    return {

}
                }
            }

结论:vue中的methods里面的函数,生命周期钩子函数中的this指向当前vue实例
                  vue实例可以直接访问data中定义的变量和methods中定义的函数

转载于:https://my.oschina.net/u/3759656/blog/2247187

vue学习之路.02相关推荐

  1. 前端Vue学习之路(二)-Vue-router路由

    Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...

  2. 前端Vue学习之路(一)-初识Vue

    Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...

  3. Docker学习之路02:阿里云镜像加速器

    阿里云镜像加速器 Docker学习路线传送门: Docker学习之路01:Docker的安装 Docker学习之路02:阿里云镜像加速器 Docker学习之路03:Docker的常用命令 Docker ...

  4. Vue学习之路(基础篇)

    Vue学习之路(基础篇)

  5. Spring Boot的学习之路(02):和你一起阅读Spring Boot官网

    官网是我们学习的第一手资料,我们不能忽视它.却往往因为是英文版的,我们选择了逃避它,打开了又关闭. 我们平常开发学习中,很少去官网上看.也许学完以后,我们连官网长什么样子,都不是很清楚.所以,我们在开 ...

  6. Vue学习之路1 小白起步

    习背景: 之前一直写As3.0,从开始的flash小游戏,到网页播放器,到最近结束的桌面应用,东西越写越多,路却越走越窄T_T  言归正传,转到前端算是小白了,就从html.js.css这些开始学,好 ...

  7. Vue学习之路---No.7(分享心得,欢迎批评指正)

    老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...

  8. Vue学习之路第八篇:事件修饰符

    学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几 ...

  9. Vue学习之路(8)------快餐店收银系统

    转载:http://jspang.com 第1节:Mockplus把我们的想法画出来 第2节:Vue-cli搭建开发环境 第3节:搞定项目图标Iconfont 第4节:编写独立的侧边栏导航组件 第5节 ...

最新文章

  1. 直播|俄勒冈州立大学李伏欣:从热点图到对深度网络的结构化解释
  2. QML的默认属性default property
  3. Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)
  4. 广外计算机考研专业课,【广外考研论坛】 21广外各专业考研问题全解答!纯干货!...
  5. 【POJ - 2186】Popular Cows (Tarjan缩点)
  6. oreo另一个意思_记一次有意思的统计(部分大宗商品价格指数相关性统计)
  7. 蓝桥杯第八届省赛JAVA真题----包子凑数
  8. 华为P40渲染图再曝光:果然是年度真旗舰
  9. 对话系统的简单综述及应用智能客服
  10. catia锥齿轮画法_CATIA自动生成锥齿轮模型的宏程序应用方法
  11. gimp 架构_超级图像处理软件 gimp 2.99.2中文免费版
  12. MeionDZ:锁相环实现倍频功能
  13. Android开发之点击输入法外部关闭键盘点击输入法外部关闭输入法的解决方法
  14. 小说作者推荐:没有颜色的无合集
  15. php花店销售系统代码_花店淡季来袭,新的业绩增长点到底在哪?
  16. RSA生成密钥对的过程
  17. Vmware15 + Ubuntu18.0.4 安装教程(史上最详细记录)【多图预警】
  18. 深度优先搜索(c++)
  19. 泡泡堂、QQ堂游戏通信架构分析 zz
  20. 高考填报志愿计算机操作技巧,2021高考填报志愿六个技巧

热门文章

  1. shell tr 替换 空格_Shell 字符串分隔符!!!(全网最详细总结)
  2. pat和ccf哪个含金量高_函授和网络教育哪个好 哪个含金量高
  3. python俄罗斯方块课程设计报告_用python实现俄罗斯方块
  4. java word 转换 图片_怎样把手机上的图片转换成word?
  5. python中怎么调用函数_浅谈Python中函数的定义及其调用方法
  6. 如何在TypeScript中使用JS类库
  7. 关于Anaconda的环境和包管理
  8. Linux下git的使用——将已有项目放到github上
  9. [iPhone开发]UIWebview 嵌入 UITableview
  10. java调用、执行groovy代码