原生html使用 vue 组件

以下纯个人理解 欢迎 大佬指正

1.【vue 2.0】

http-vue-loader.js

原生html需要引入以上js

// 使用httpVueLoader

2.【vue 3.0】

组件的理解可以在各个js中 当函数使用

function fun1(id){

const Counter = {

data() {

return {

counter: "反转字符"

}

},

components:{

// "button-counter":app1

},

mounted(){

this.changeData()

}

首先，Vue 会将 template 中的内容插到 DOM 中，以方便解析标签。由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为 <MyComponent></MyComponent>时，插入 DOM 后会被转换为 <mycomponent></mycomponent>。

然后，通过标签名寻找对应的自定义组件。 匹配的优先顺序从高到低为：原标签名、camelCase化的标签名、PascalCase化的标签名。 例如 <my-component>会依次匹配 my-component、myComponent、MyComponent。

注意的地方：

1.全局注册 VS 局部注册

3.注意：

4.组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

5.Vue的组件里面也可以有data、template、methods、watch等属性，需要注意的是component中的data必须为一个函数参考Vue官网例子：

6.组件之双向绑定：.sync 修饰符

Vue 组件的 API 来自三部分——prop、事件和插槽：

Prop 允许外部环境传递数据给组件；

事件允许从组件内触发外部环境的副作用；

插槽允许外部环境将额外的内容组合在组件中。

7.关于slot（插槽）：

---