引用vue.js方式使用vue

豆约翰

已于 2024-04-12 11:24:36 修改

阅读量477

点赞数 3

分类专栏：前端相关文章标签： vue.js javascript 前端

于 2024-04-12 10:45:51 首次发布

本文链接：https://blog.csdn.net/douyh/article/details/137672330

版权

前端相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

此方式不支持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>