一、脚本引入简单使用
script引入
<!-- vue3脚本地址为:https://unpkg.com/vue@3.2.31/dist/vue.global.js -->
<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
简单使用实现数据渲染
<body>
<!-- 添加html结构 -->
<div id="test">
<h1>counter:{{ num }}</h1>
</div>
<script>
const Test = {
data() {
return {
num: 12
}
}
}
// 创建一个应用,将配置对象Test的内容渲染到 id为test的元素上
let app = Vue.createApp(Test).mount("#test")
</script>
</body>
打开页面查看结果
二、双向绑定的基本表现
按下F12，找到console输入app.num 可以查看num现在的值,输入app.num=10可以修改num的值，当修改后发现界面中展示的数字也跟着发生了改变，页面的变化会更具数据的变化而变化这就是一个标准的绑定。
版权声明：本文为gtd54789原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。