VUE2.0 学习 第一组

本笔记主要参考菜鸟教程和官方文档编写。

1. 对于Vue2.0来说每个vue应用都需要实例化vue来实现。

var vm = new Vue({

  // 选项
  })

2.首先，DOM是一种api，它可以动态地访问程序和脚本,更新其内容、结构和文档,我认为符合这类功能的都可以叫dom，其次，每一个DOM元素的id（此处为div），都可以在后面的vue构造器中的el中一一对应，意味着改动全部在以上指定的 div 内，div 外部不受影响。比如,

<div id="mozart"></div>

<script type="text/javascript">

var vm = new Vue({

el:"#mozart"

})

<script/>

对于我来说很像一种js中定义变量后引用的模式，这里只是引用后定义变量，正好相反.

3.引用模式确定了，接下来就是定义了，先看如下代码，

<div id ="mozart">

<p>{{ first }}<p/>

<p>{{ second }}<p/>

<p>{{ amadeus() }}<p/>

<div/>

<script type="text/javascript">

var vm =new Vue({

el:"#mozart",

data:{

first:"first",

second:"second",

},

method:{

amadeus:function(){

return first+second;

}

}

})

<script/>

{{}}中可以写入变量或者方法，在vue构造体中的data来定义变量属性，method来定义方法/函数并且用return返回函数值

我们也可以在vue构造体外进行属性的定义，但函数在构造体外定义应该不行，比如

<div id ="mozart">

<p>{{ first }}<p/>

<p>{{ second }}<p/>

<div/>

<script type="text/javascript">

var data ={first:"first",second:"second"}

var vm =new Vue({

el:"#mozart"，

data:data

})

<script/>

以及

<div id ="mozart">

<p>{{ first }}<p/>

<p>{{ second }}<p/>

<div/>

<script type="text/javascript">

var data ={first:"first",second:"second"}

var vm =new Vue({

el:"#mozart"，

data:data

})

vm.first ="third"

data.second = "fifth"

<script/>