写给自己看的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:指令、事件、表单

待续完成。

 

 

posted @ 2018-08-14 11:30  s_p  阅读(144)  评论(0编辑  收藏  举报