学习过程:自学(个人demo驱动),论坛,qq群多少听到vue,react(很抱歉只弄了hello world demo 虚拟dom 也是概念 到目前也没弄清楚)这类框架(工作经历前后端都折腾,老板指到拿 打到哪)。

基础:接触过angularjs1.0 实际经验,使用了绑定,指令,和http请求。一个字学习难度大 ,复杂 (提到他原因是:第一次接触的js的 mvc框架,幸运的是之前折腾过wpf的 mvvm 所以看起来比较亲切)。

资料:官网 https://cn.vuejs.org/v2/guide/installation.html 目前看了3遍(多看官网api 是学习新的一门技术基础,仅供参考)。 http://www.cnblogs.com/keepfool/p/5619070.html (推荐)

书籍:

章节:

1:介绍

响应式编程即:状态和视图同步(一句话mv**,同门师兄弟有angularjs。react ,早期的backbone )

2:基本语法

<!-- 引入js文件 -->
<script src="https://unpkg.com/vue"></script> <!-- 视图
1:{{}} vue 数据绑定 界面第一次加载网络慢会出现 {{}}
解决办法: css添加 [v-cloak] { display: none;} 使用者添加v-cloak属性 或者v-text
2:v-model 一般用于表单( input、textarea> 、 select等 )
-->
<div id="app-6">
<p>{{ msg }}</p>
<input v-model="msg">
</div>
//vue 对象都是从new开始(这一点为什么不学jquery 少写一个new呢)ps:它是连接视图(view)和data的桥梁 (就叫他控制器吧)。
//el:挂载元素(常用id class 等选择器) 告诉浏览器大哥这一段html的元素 用vue法语解析(类似编辑器)。我的地盘要听我的(它的内部是如何解析呢 他怎么知道是vue呢这也是它的神奇吧)
//data :数据区 (ps:msg 文本框自定改变)
var app6 = new Vue({
el: '#app-6',
data: {
msg: 'Hello '
}
})

总结:

  • Vue构造函数的:选项el属性,就是element缩写,当前Vue对象挂载到哪个标签上的语法

  • Vue的选项:data属性数据。vue会把自定义的数据可以与html的模板数据进行绑定。

  • Vue 数据绑定的方式就是用{{}}

  • 页面加载出现{{}}的解决办法。
  • vue的思想简单介绍。

2:指令、事件、表单

待续完成。

写给自己看的vue的更多相关文章

  1. 写给后端同学的vue

    安装环境 安装vue-cli 脚手架 1. 安装nodejs环境 下载地址: (nodejs)[https://nodejs.org/zh-cn/download/] 安装(略) 2. 安装vue-c ...

  2. 《写给大忙人看的java se 8》笔记

    现在才来了解java8,是不是后知后觉了点? 新的编程技术,个人不喜欢第一时间跟进. 待社区已有实践积淀再切入似乎更划算些? 一点点精明的考虑. 不多说,上代码. //读<写给大忙人看的java ...

  3. 【读书笔记】《写给大忙人看的Java SE 8》——Java8新特性总结

    虽然看过一些Java 8新特性的资料,但是平时很少用到,时间长了就忘了,正好借着Java 9的发布,来总结下一些Java 8中的新特性. 接口中的默认方法和静态方法 先考虑一个问题,如何向Java中的 ...

  4. 《写给大家看的设计书(第3版)》【PDF】下载

    <写给大家看的设计书(第3版)>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196355 内容简介 <写给大家看的设计书&g ...

  5. 劣质代码评析——《写给大家看的C语言书(第2版)》附录B之21点程序(八)

    [重构](续) 牌的表示: 一副牌有52张,可用一整数数组描述.但是由于在游戏过程中牌数在不断减少,所以用一表示剩余张数的整数和一整数数组共同描述.C99支持一种变量长度数组,但用在这里并没有什么特别 ...

  6. 【Part1】用JS写一个Blog(node + vue + mongoDB)

    学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...

  7. 《写给大忙人看的Java核心技术》 勘误

    先附上十分讨喜的封面.这应该是爱丽丝梦游仙境里的那只兔子吧? 勘误表基于原版勘误表制作 链接 截止日期 2017-02-09 对应<写给大忙人看的Java核心技术>2016年1月第1次印刷 ...

  8. 前端编程提高之旅(五)----写给大家看的css书

       自实习也有几个月的时间了,以爱奇艺实习为敲门砖.进入了眼下这家公司.假设说当初能进爱奇艺是暂时袭击DIV+CSS的话,眼下在这家公司体验到.不论什么技术都必须悉知原理,这样才干做到庖丁解牛.做一 ...

  9. upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量

    upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...

随机推荐

  1. 《通过C#学Proto.Actor模型》之Mailbox

    邮箱是Actor模型的一个重要组成部分,负责接收发过来的消息,并保存起来,等待Actor处理.邮箱中维护着两种队列,一种是存系统消息,另一个是存用户消息,系统省是指Started,Stoping,St ...

  2. linkedin 第三方网站登录(JavaScript SDK)

    官网:https://developer.linkedin.com/docs/oauth2 一.配置LinkedIn应用程序 a.创建一个应用  |  https://www.linkedin.com ...

  3. TCP三次握手原理,你真的了解吗?

    最近碰到一个问题,Client 端连接服务器总是抛异常.在反复定位分析.并查阅各种资料搞懂后,我发现并没有文章能把这两个队列以及怎么观察他们的指标说清楚. 问题描述 场景:Java 的 Client ...

  4. PhotoShop不用魔棒、钢笔 建立较平整的选区 P进电脑屏幕里

    不用魔棒.抽出.钢笔等,还可以直接变形图建立调整选区,这种方法比钢笔抽出感觉简单一些,比魔棒仔细一些. 抽出或钢笔:抽出弄错了偏移了还要擦除,调整笔刷,抽出后可能还有毛边,需要用橡皮擦除: 钢笔,错了 ...

  5. js DOM操作 容易犯的错误

    这样一段html片段 <select class="form-control" id="course_chapter" onchange="fi ...

  6. PHP 5.6 中 Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version

    解决方法 找到php.ini  文件, 把always_populate_raw_post_data  修改为-1 就行了. always_populate_raw_post_data=-1

  7. 【BZOJ5492】[HNOI2019]校园旅行(bfs)

    [HNOI2019]校园旅行(bfs) 题面 洛谷 题解 首先考虑暴力做法怎么做. 把所有可行的二元组全部丢进队列里,每次两个点分别向两侧拓展一个同色点,然后更新可行的情况. 这样子的复杂度是\(O( ...

  8. ovs之组网实验

    介绍 本示例将创建两个OVS实例和两个主机,其中每个OVS上接入一个主机,OVS实例之间有链路连接,形成一个链状拓扑,如图.在OVS组网完成之后,再通过手动方式添加流表,实现网络通信,从而验证实验可行 ...

  9. [WC2018]通道

    题目描述 http://uoj.ac/problem/347 题解 解法1 求三棵树的直径,看起来非常不可做,但是所有边权都是正的,可以让我们想到爬山. 所以我们可以按照BFS求树的直径的方法,随机一 ...

  10. 欧拉筛法模板and 洛谷 P3383 【模板】线性筛素数(包括清北的一些方法)

    题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入格式 第一行包含两个正整数N.M,分别表示查询的范围和查询的个数. 接下来M行每行包含一个不小于1 ...