Vue.js 学习笔记 2

常用语法

数据绑定

vue与html中内容建立关系的方式是绑定，在自定的js文件中定义一个Vue对象，内部元素el作为选择器绑定对应标签，如div;data是一个对象，其中的键值对对应html中v-model属性的值如data：{ name:”Jack”}。在html中将被绑定的值用双大括号保住，则的值随自定义vue对象data值中name的值改变。

v-model , v-show

v-model,v-show是vue自定义的属性，称为指令：directive.
v-model与v-show一般配合使用。v-model绑定输入标签input与vue对象变量；v-show绑定输出标签与VUE变量对象如SPAN等；

html:

<div id="app">
    <div>
        <!-- v-model是vue定义的属性，称为指令：directive -->
        <input type="text" v-model="name">
        <span v-show="name">
            My name is {{name}}
        </span>
    </div>
    <div>
        <input type="text" v-model="age">
        <span v-show="age">
            I am {{age}} years old.
        </span>
    </div>
    <div>
        <input type="text" v-model="sex">
        <!-- v-show的作用是：如果sex属性存在，则显示此sapn
v-if,与v-show作用相同，区别是，v-show是仅仅隐藏，而v-if是当sex属性不存在时则将span从DOM中删除
-->
        <span v-show="sex">
           I am a {{sex}}.
        </span>
    </div>
</div>

js:

var app = new Vue({
    el:'#app',
    data:{
        name:'Sophie',
        age:'25,
        sex:'girl'
    }
})

可以在console中输入app.name来查看对应的值。