初识Vue 3.0 —— v-bind/on: 绑定数据及事件

<h5>1.绑定数据及事件：</h5>
<h2>
	<span v-bind:title="msg">
		title:{{name}}
	</span>
	<button v-on:click="resM">翻转</button>
</h2>
<pre>注意：v-on和v-bind的区别：v-on 指令添加一个事件监听器；v-bind 各类数据绑定指令</pre>
<script type="text/javascript">
	//绑定数据及事件
	const names = {
		data(){
return{
	name:'张三',
	msg:"我是title的提示信息"
}
		},
		mounted(){
this.name = "李四的家";
		},
		methods:{
resM(){
	this.name=this.name.split('').reverse().join('');
}
		}
	}
	Vue.createApp(names).mount('#app h2'); //声明式渲染方式——挂载事件
</script>

交互效果见：https://course.51qux.com/vue3-0-1