Vue.js学习笔记（1）

    Vue.js 允许开发者声明式地将DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。下面是一些基本的模板语法。

v-html

v-html指令用于输出html代码

<divid="app">

    <divv-html="message"></div>

</div>

   

<script>

newVue({

  el:'#app',

  data:{

    message:'<h1>菜鸟教程</h1>'

  }

})

</script>

 

v-model

我们可以通过v-model指令来进行数据双向锁定

<divid="app">

    <p>{{ message }}</p>

    <inputv-model="message">

</div>

   

<script>

newVue({

  el:'#app',

  data:{

    message:'Runoob!'

  }

})

</script>

 

但是，v-model这一命令实际上仅仅是一个语法糖

比如下面这个例子

<divid="app">

    <divclass="textbox">

        <textareamaxlength="300" @input="countfun"v-model="text"></textarea>

    </div >

    <divid="count">

    <p>您还可以输入{{word}}个字</p>

    </div>

        </div>

    <script>

    newVue(

        {

            el:"#app",

            data:{

                text:"",

               word:"300"

            },

            methods:{

                countfun:function(){

                    varlen=this.text.length;

                    this.word=300-len;

                }

            }

        })

    </script>                                                         

    在这个例子当中，v-model绑定了组建text，而组件text从输入文字框中获取变量值，还有一个方法countfun作为input的响应事件（@iuput其实是v-on：input的缩写）这个数据双向绑定才真正起到了作用，它的运行结果是这样子的：

v-bind

v-bind是用来绑定属性和数据的命令

<style>

    .class1{

      background: #444;

      color: #eee;

    }

<divid="app">

    <labelfor="r1">修改颜色</label><inputtype="checkbox"v-model="flag"id="r1">

    <br><br>

    <divv-bind:class="{'class1': flag}">

      directiva v-bind:class

    </div>

  </div>

     

  <script>

  newVue({

      el:'#app',

    data:{

       flag:false

    }

  });

  </script>

    在这段程序代码中，v-model命令将复选框的返回数据与flag进行了绑定，而v-bind命令则是将id=“class1“的代码段与样式绑定起来，而这个id还可以接受布尔值flag，当flag为false的时候，这个属性将被隐藏起来。

运行结果是这样子的：

    问题来了，v-model也一样可以绑定数据，那么v-bind和v-model的区别在哪里？

1：如果  id={{xxx}}这种写法，则HTML实际上是这样的：id="{{ xxx}}"2:v-bind用于绑定属性和数据，其缩写为“ : ” 也就是v-bind:id  ===  :id   3:v-model也可以绑定数据，但是他是用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。