《Vue.js项目实战》第一章

lykops 发布于2019-08-02 14:06 / 3042人阅读

摘要：前言今天刚到了一本书项目实战为了提高自己的技术水平，想要有空就把书上的内容看一遍，再亲自写一遍，顺便写个文章作为自己的学习记录。是给该实例起一个名字，未来可能会有多个实例，便于区分。是元素的选择器，表示该实例会在这个元素上进行的操作。

前言

今天刚到了一本书《Vue.js项目实战》,为了提高自己的技术水平，想要有空就把书上的内容看一遍，再亲自写一遍，顺便写个文章作为自己的学习记录。

第一个vue应用
vue.js的下载地址：vue官网下载

新建一个html，创建一个vue应用




    
    Title
    
    



    Is this an hello world?

强烈推荐大家安装vue.js devtools插件，调试代码非常有帮助。

创建vue实例

// 创建vue实例
    let vm = new Vue({
      // 给实例起名字
      name: "myApp",
      // 根DOM元素的CSS选择器
      el: "#root",
      data() {
        return {
          message: "Hello Vue.js"
        }
      }
    })

new 调用了vue的构造器创建了一个实例，构造器中有一个参数——option对象。该对象可以携带多个属性。name是给该实例起一个名字，未来可能会有多个实例，便于区分。el是元素的选择器，表示该实例会在这个元素上进行vue的操作。data是保存当前的数据

v-model的使用




    
    Title
    
    


    
        {{message}}

vue的{{}}可以运行javascript表达式，并且最后显示结果
效果如下图：

可以看到p标签的内容随着input的值的变化而变化
调试工具也能清楚地看到message值的变化

第一章结束。

GPU云服务器云服务器云计算第一章项目实战 python实战项目 python项目实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53573.html

webpack+vue项目实战（一,搭建运行环境和相关配置）

摘要：运行环境是，其它版本的小小伙伴要注意版本兼容的问题喔好了，首页在创建项目目录，下面进行项目的第一步，搭建环境。附上代码附上代码路由控制和接下来就配置入口文件，和入口文件的模板了。 1.前言现在正在开发一个公司的后台管理项目，项目是一个单页面应用。功能上就是管理销售订单的各个环节，包括物流管理，回款管理，订单管理等等的功能。这些就不多说了。项目是，基于webpack3,vue2.2.6...

jemygraw 2019-08-20 17:44 评论0 收藏0
2017-10-17 前端日报

摘要：前端日报精选现代浏览器性能优化篇谈谈算法第一章学习笔记实现里为什么会有，我们做了一款极客时间中文第期浮点数陷阱及解法译调度器入门掘金译定位掘金布局说可能是最全的特性及其在实际应用中的表现掘金简单的继承众成翻译中的正则表达 2017-10-17 前端日报精选现代浏览器性能优化-JS篇谈谈 HTTPS《算法》第一章学习笔记js实现JS 里为什么会有 thisHi，我们做了一款极客时间...

CloudwiseAPM 2019-08-21 17:04 评论0 收藏0
《Java8实战》-读书笔记第一章（01）

摘要：依旧使用刚刚对苹果排序的代码。现在，要做的是筛选出所有的绿苹果，也许你会这一个这样的方法在之前，基本上都是这样写的，看起来也没什么毛病。但是，现在又要筛选一下重量超过克的苹果。《Java8实战》-读书笔记第一章（01）最近一直想写点什么东西，却不知该怎么写，所以就写写关于看《Java8实战》的笔记吧。第一章内容较多，因此打算分几篇文章来写。为什么要关心Java8 自1996年J...

codeGoogle 2019-08-19 10:52 评论0 收藏0
【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首发博客: 我的博客项目源码: 源码项目预览: 预览因为个人的喜好和工作的需要,一直...

BoYang 2019-08-29 12:41 评论0 收藏0