Primeira experiência do Vue.js (ligação de dados básica)

Ligação básica de dados

Após a introdução do vue.js, instanciação do Vue.

new Vue(object);

<div id="app">
	<!--普通字符串数据绑定-->
    <h3>{{msg}}</h3>  <!--数据渲染为app.data中的msg：欢迎使用Vue.js-->
    <h3>{{count}}</h3> <!--数据渲染为app.data中的count：1-->
	<ul>
	<!--v-for循环渲染数据-->
      <li v-for="item in movieList">{{item}}</li>
    </ul>
    <button v-on:click="alert">点击事件v-on:click</button>
</div>
<script>
   const app = new Vue({
	    el: '#app',
	    data: {
		    msg: '欢迎使用Vue.js',
		    count: 1,
		    movieList: [
	          '阿甘正传',
	          '英伦对决',
	          '钢铁侠'
	        ],
	    },
	    // 在 `methods` 对象中定义方法
      methods: {
        alert: function () {
          alert('我是定义的方法');
        }
      }
    })
  </script>

Aprenda mais tarde depois de vincular os dados do formulário.