引用vue.js方式使用vue
此方式不支持sfc（Single-FileComponent）.vue文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试Vue-0719</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="root">
<label>{{ formData.selected }}</label><br>
<label>{{ p1 }}</label><br>
<label>{{ arr }}</label><br>
<p>v-for 指令（1）</p>
<div v-for="item in arr">{{ item }}</div>
<p>v-for 指令（2）</p>
<select v-model="formData.selected">
<option v-for="(item,index) in arr" :value="index">
{{ item }}
</option>
</select>
</div>
<script>
const root = {
data() {
return {
formData: {
selected: '0'
},
p1: '123',
arr: ['a', 'b'],
};
},
mounted() {
console.log("in mounted()...");
this.funcA();
this.funcB('input param1');
},
methods: {
funcA() {
console.log("in funcA...");
},
funcB(param1) {
console.log("in funcB...param1=" + param1);
},
},
watch: {
// 多级使用 单引号包裹
'formData.selected': function(nv, ov) {
// 处理
console.log("nv=" + nv + ", ov=" + ov + ", this.formData.selected=" + this.formData.selected);
},
// nv 新值，ov 旧值
p1: function(nv, ov) {
// 处理
},
}
}
const app = Vue.createApp(root);
app.mount("#root");
</script>
</body>
</html>
原文地址：https://blog.csdn.net/douyh/article/details/137672330
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！