写给自己看的vue
学习过程:自学(个人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:指令、事件、表单
待续完成。