|
1 | 1 |
|
2 | | -#CodeSnippet |
| 2 | +#Text input |
3 | 3 |
|
4 | | -`<span>{{sss}}</span>` |
| 4 | +**Text inputs** enable the user to interact with and input data. Use when the application requires long-form content from the user. |
5 | 5 |
|
6 | | ->This is test. |
7 | 6 |
|
8 | | -- How are you? |
9 | | -- Fine, Thank you, and you? |
10 | | -- I'm fine， too. Thank you. |
11 | | -- 🌚 |
| 7 | +##Examples |
12 | 8 |
|
13 | | -```javascript |
14 | | -importVuefrom'vue' |
| 9 | +<CodepencodePenId="VBYOpp"></Codepen> |
15 | 10 |
|
16 | | -Vue.config.debug=true |
17 | | -``` |
| 11 | +##Props/Slots |
18 | 12 |
|
19 | | -<divclass="test"> |
20 | | - {{ model }} test |
21 | | -</div> |
| 13 | +###component props |
22 | 14 |
|
23 | | -<compo>{{ model }}</compo> |
| 15 | +| Name| Type| default| required| |
| 16 | +| ------| -----------| ------| -----| |
| 17 | +| default||| no| |
24 | 18 |
|
25 | | -<div |
26 | | - class="abc" |
27 | | -@click="show = false"> |
28 | | - 啊哈哈哈 |
29 | | -</div> |
| 19 | +###component slots |
30 | 20 |
|
31 | | ->All script or style tags in html mark will be extracted.Script will be excuted, and style will be added to document head. |
32 | | ->Notice if there is a string instance which contains special word "</script>", it will fetch a SyntaxError. |
33 | | ->Due to the complexity to solve it, just don't do that. |
34 | | -```html |
35 | | -<stylescoped> |
36 | | -.test { |
37 | | -background-color:green; |
38 | | - } |
39 | | -</style> |
40 | | - |
41 | | -<stylescoped> |
42 | | -.abc { |
43 | | -background-color:yellow; |
44 | | - } |
45 | | -</style> |
46 | | -<script> |
47 | | -let a=1<2; |
48 | | -let b="<-forget it-/script>"; |
49 | | -console.log("***This script tag is successfully extracted and excuted.***") |
50 | | -module.exports= { |
51 | | - components: { |
52 | | - compo: { |
53 | | -render(h) { |
54 | | -returnh('div', { |
55 | | - style: { |
56 | | - background:'red' |
57 | | - } |
58 | | - },this.$slots.default); |
59 | | - } |
60 | | - } |
61 | | - }, |
62 | | -
|
63 | | -data () { |
64 | | -return { |
65 | | - model:'abc' |
66 | | - } |
67 | | - } |
68 | | - } |
69 | | -</script> |
70 | | -jjjjjjjjjjjjjjjjjjjjjj |
71 | | -<template> |
72 | | - <div></div> |
73 | | -</template> |
74 | | -``` |
75 | | - |
76 | | - |
77 | | - |
78 | | -<div> |
79 | | -</div> |
80 | | - |
81 | | -sadfsfs |
82 | | - |
83 | | -大家哦哦好啊谁都发生地方上的冯绍峰s |
84 | | - |
85 | | ->sahhhh |
86 | | -
|
87 | | -<compo>{{ model }}</compo> |
88 | | - |
89 | | -```html |
90 | | -<compo>{{model }}{{model }}{{model }}{{model }}{{ model }}</compo> |
91 | | -``` |
92 | | - |
93 | | - |
94 | | - |
95 | | -<!-- <style src="./custom.css"></style>--> |
96 | | - |
97 | | -##引入 style 文件 |
98 | | - |
99 | | -<divclass="custom"> |
100 | | - 原谅色 |
101 | | -</div> |
| 21 | +| Name| Type| required| |
| 22 | +| ------| -----------| ------| |
| 23 | +| default| any| no| |