.html文件如何使用vue&vue组件等

.html文件如何使用vue&vue组件

qq_38969618

2839人浏览 · 2023-02-28 11:14:03

qq_38969618 · 2023-02-28 11:14:03 发布

vue2官网文档： https://v2.cn.vuejs.org/v2/guide/installation.html

一、如何使用vue

<!-- 对于制作原型或学习，你可以这样使用最新版本: -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：: -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<body>
    <div id="app">
        测试Vue的响应式数据：{{ name }}
        <button v-on:click="changeName">修改name</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: '小花'
        },
        methods: {
            changeName(event) {
                console.log('事件对象', event.target.tagName) //  BUTTON
                this.name = '新小花'
            }
        }
    })
</script>
</html>

二、如何使用vue组件

1. 组件是可复用的 Vue 实例，且带有一个名字。
2. 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
3. 每个组件必须只有一个根元素。
4. 全局注册组件语法：Vue.component("组件名", 组件对象)

新建button-counter.js 文件：

template选项：用于页面显示。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  props: ['title'],
  data () {
    return {
      count: 0
    }
  },
  methods: {
    addCount() {
     this.count++
    }
  }
  template: '<button v-on:click="addCount">{{ title }} : You clicked me {{ count }} times.</button>'
})

在.html中使用组件：

<script src=".button-counter.js"></script>
<body>
    <div id="app">
        <button-counter :title="测试vue组件1"/>
        <button-counter :title="测试vue组件2"/>
    </div>
</body>

三、vue复用组件中，如何再使用其他子组件

<!-- 注意：validate-plan是add-or-view-plan、list的复用组件逻辑，必须先加载该块代码，即script的上下位置不能变动哦！ -->
<script src="/admin_xpx/vue/coms/validatePlanComponentObj.js"></script>
<script src="/admin_xpx/vue/coms/button-counter.js" defer></script>

// 子组件
const validatePlanComponentObj = {
    props: {},
    data() {},
    methods: {},
    template: `<h1>xx</h1>`
}

// 父组件中使用子组件
Vue.component('button-counter', {
  props: ['title'],
  components: {
      validatePlan: validatePlanComponentObj
    },
  template: `
    <validatePlan :show.sync="showValidation" @update="getList"/>
   `
})

参考链接：

https://blog.csdn.net/weixin_64252848/article/details/123987640

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^