@darkchest/wck 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,7 +38,22 @@
|
|
|
38
38
|
- ✅ 支持mounted/onMounted, destroyed/unmounted/onUnmounted生命周期
|
|
39
39
|
|
|
40
40
|
### 关于props大小写问题
|
|
41
|
-
由于vue中定义props是允许大小写字母的.而web
|
|
41
|
+
由于vue中定义props是允许大小写字母的.而web组件的attributes只允许小写字母(包含中划线), 所以当我们在vue组件中定义一个带有大写字母的属性时(例如appTitle), 当使用@darkchest/wck插件将它转成web组件后, 插件会自动在web组件中声明apptitle, app-title两种形式(纯小写形式和小写中划线形式)的属性, 所以当我们在使用组件时, 可以直接在html上设置组件的默认属性值:
|
|
42
|
+
```html
|
|
43
|
+
<todo-list id="demo1" apptitle="*我的清单*"></todo-list>
|
|
44
|
+
<todo-list id="demo2" app-title="*我的清单*"></todo-list>
|
|
45
|
+
<!-- 以上两种写法都可以设置vue组件的appTitle属性默认值 -->
|
|
46
|
+
|
|
47
|
+
<script type="module">
|
|
48
|
+
var todo1 = document.querySelector('#demo1');
|
|
49
|
+
todo1.apptitle="我的清单1";
|
|
50
|
+
// todo1['app-title'] = "我的清单1";
|
|
51
|
+
|
|
52
|
+
var todo2 = document.querySelector('#demo1');
|
|
53
|
+
todo2.apptitle="我的清单2";
|
|
54
|
+
// todo2['app-title'] = "我的清单2";
|
|
55
|
+
</script>
|
|
56
|
+
```
|
|
42
57
|
|
|
43
58
|
### 关于属性, 方法, 事件, 生命周期钩子
|
|
44
59
|
- 在vue组件中props和methods定义的属性和方法, 都会直接通过web组件暴露给页面.
|