Vue.js – 1 – 基础

绑定app

绑定id为app的app

var app = new Vue({
    // 与对应的元素进行绑定
    el: '#app',

    // 定义一些数据
    data: {
        uname: '胡小帅',
        htmlText: '<h3>大家新年好！</h3>'
    }
});

v-model

绑定input输入框与app内的data内的uname属性

<input type="text" v-model="uname">

{{}}变量

使用{{}}输出vue的变量

<h2>欢迎使用Vue -- {{ uname }}</h2>

v-for

在页面中使用v-for遍历数据

<li v-for="(item, index) in stars"> {{ index + 1 }} ----- {{ item }} </li>

v-on

使用v-on绑定事件，可以绑定任何事件

<input type="text" v-model.trim="starName" v-on:keydown.13="add"><button v-on:click="add">添加</button>

methods

定义事件

v-for

在页面中使用v-for循环数据

<li v-for="(item, index) in stars"> {{ index + 1 }} ----- {{ item }} </li>