Vue小记(第一天)

引入Vue.js文件

Vue指令

v-bind:title="message"

悬停查看
var app=new Vue({
    el:'#id',
    data:{
        message:'hello Vue'
    }
})


控制元素是否显示 v-if="seen"

Vue小记(第一天)_第1张图片Vue小记(第一天)_第2张图片

Vue小记(第一天)_第3张图片Vue小记(第一天)_第4张图片

值得注意的是,当seen:false的时候浏览器并不会渲染dom元素。

渲染列表v-for="todo in todos"

Vue小记(第一天)_第5张图片

在控制台里,输入app.todos.push({text:'新项目'}),你会发现列表最后添加了一个新项目。

Vue小记(第一天)_第6张图片

为了让用户和你的应用进行交互,我们可以用 v-on:"change" 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:

Vue小记(第一天)_第7张图片     点击之后   

这里可看出所有有关数据的都放在data里,方法放在methods里。

v-model="message"指令用来实现表单输入和应用状态之间的双向绑定:

Vue小记(第一天)_第8张图片



你可能感兴趣的:(vue)