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/>