码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js 第一篇学习笔记

时间:2017-10-26 11:50:56      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:ring   cli   vue   注意   log   ble   div   pre   def   

最近开始学习Vue, 比预计的难度要低太多了,大概是了解了一些JAVA和设计模式的结果吧。haha ...下文都是个人理解,不确定是否是事实。

模模糊糊地觉得 Vue的确比jQuery要方便。

Vue ,貌似是这样的。
先初始化,new Vue()
内部是一个对象,
new Vue({})
对象可以有3种或者更多子对象。————表示目前我只看到3种。
分别为
1、el:{},  ——————用ID等?绑定HTML上的元素,貌似也是用CSS选择器?

2、data:{}, ——————似乎是需要装静态变量,string之类的样子格式例如 :myString:"String",

3、methods:{}   ——————大概内部装各种function。格式例如 :myFunc:function(){} // 还是对象内的函数的格式的哦。

值得注意的是,使用this可以获取Vue内部的任何变量 varible。但是如果在function 内部对this.varible有定义的话,会覆盖data里面的。可以用v-once 避免覆盖。

定义静态变量是在data里面,比如:


data:{ xx
= 0, yy=0 }, methods:{ updataX:function(){ this.xx++; }, updataY:function(){ this.yy++; } }

流程貌似是 functionupdataX,Y 操作 xx,yy 这类静态变量,然后结果就自动更新到HTML页面上————大概就是这样所以不需要操作DOM。

 

HTML:


  <p>
  {{xx}}{{yy}}
  </p>



<!--HTML上使用的Vue自带的方法:

 

v-html Vue的内容作为HTML使用。

v-bind 绑定属性到Vue的内容

v-once 保持data里面的内容不被覆盖。

v-on:click="function" , 为这个元素绑定onclick 等等

Vue 自带的变量$event 也可以作为参数传递给函数的。只要在绑定的时候加($event )就可以用诸如 e.clientX ; e.stopPropagation 之类的了。

Vue 自带stopPropagation的功能,一个栗子: v-on:click="updataX(arg,$event).stop"

还有preventDefault, v-on:mouseover="function($event).prevent"

-->

 

Vue.js 第一篇学习笔记

标签:ring   cli   vue   注意   log   ble   div   pre   def   

原文地址:http://www.cnblogs.com/xinfangzhang/p/7735676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!