基础数据绑定
引入vue.js后,然后进行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>