Vue.js first experience (basic data binding)

Basic data binding

After introducing vue.js, then Vue instantiation.

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>

Learn later after binding the form data.