Vue.js快速入门实例

一、基本结构

index.html代码：

<script src="../vue.js"></script>

<div id="app">
    {{ message }}
</div>

<script src="app.js"></script>

<!--注意：app.js要最后引入，因为要先有id为app的div,vue才能获取相应的元素。否则会报错： [Vue warn]: Cannot find element: #app-->

app.js代码：

new Vue({
    el: '#app',   //选定要使用vue的部分
    data: {  //定义数组，可以在该部分使用{{}}引用
        message: 'Hello Vue.js!'
    }
})

二、双向数据绑定

index.html代码：

<script src="../vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <!--设置双向数据绑定，v-model，属性值为要绑定的数据-->
  <input v-model="message">
</div>

<script src="app.js"></script>

app.js代码：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

三、渲染列表

index.html代码：

<script src="../vue.js"></script>

<div id="app">
  <ul>
  	<!--v-for进行循环遍历-->
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

<script src="app.js"></script>

app.js代码：

new Vue({
  el: '#app',
  data: {
    todos: [  //在data中定义todos数据
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

四、处理用户输入

index.html代码：

<script src="../vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <!--vue中使用v-on:前缀绑定各种事件触发的方法-->
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script src="app.js"></script>

app.js代码：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {   //methods字段内容用来定义处理方法
    reverseMessage: function () {
      //通过this.message可以更改message数据的值，这里进行了颠倒
      this.message = this.message.split('').reverse().join('')
    }
  }
})