JavascriptPluginOrFrame/vueDemo.html at master · jasnature/JavascriptPluginOrFrame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<title>Vue演示例子</title>
		<style type="text/css">
			em,
			i,
			h3 {
				display: block;
				font-size: 18px;
				color: white;
				font-style: normal;
				font-weight: bold;
				/*width: 100%;*/
				background-color: #966400;
				margin: 10px 0px;
				box-shadow: #666666 2px 2px 5px 1px;
				padding: 3px;
				border-left: 4px solid #32CD32;
			}

			em {
				margin-left: 10px;
			}

			i {
				background-color: #9e9e9e;
				margin-left: 20px;
				font-size: 14px;
			}

			h3 {
				background-color: green;
			}

			ul {
				list-style-type: decimal;
			}

			table {
				border: 1px solid #A5A5A5;
				border-collapse: collapse;
				border-spacing: 0px;
			}

			tr,
			td {
				border: 1px solid #A5A5A5;
				border-collapse: collapse;
			}

			.expand-transition {
				transition: all 2s ease;
				height: 30px;
				padding: 10px;
				background-color: #eee;
				overflow: hidden;
			}

			.expand-enter,
			.expand-leave {
				height: 0;
				padding: 0 10px;
				opacity: 0.3;
			}
		</style>
	</head>

	<body>

		<div id="sim1">
			<h3>#我是VUE的第一个组件：sim1</h3>
			<em>#简单显示、双向绑定，参数特性</em>
			<p>{{msg}}</p>
			立即<input type="text" v-model="msg" /> 移出文本框才更新
			<input type="text" v-model="msg" lazy/> 我会延迟500毫秒
			<input type="text" v-model="msg" debounce="500" /> 数值
			<input type="text" v-model="num" number/>{{num}}

			<em>#列表渲染、新增项，删除项，样式绑定，条件渲染，模版包含，隐藏显示<span v-show="newtodo.name!==''">[正在输入]</span></em>

			<div v-if="Math.random() > 0.5">
				今天心情：好
			</div>
			<div v-else>
				今天心情：不好
			</div>

			<template v-if="newtodo.name==123">[不容许添加{{newtodo.name}}]</template>
			<span v-else="newtodo.name==123">[可以添加]</span> 名称:
			<input type="text" v-model="newtodo.name" /> 年龄：<input type="text" v-model="newtodo.age" />
			<input type="button" v-on:click="addTodo" value="新增" :style="{fontSize: '18px' }" />
			<span style="color: red;">
				{{errormsg}}
			</span>
			<table>
				<tr v-for="mo in todos" v-if="mo.name!=123">
					<td v-bind:href.literal="不解析">{{$index+1}}</td>
					<td v-bind:alt="mo.name">名称：{{{mo.name | conlog}}} </td>
					<td :data-haha="mo.age">年龄：{{mo.age}} </td>
					<td :class="mo.cs">年龄（虚岁）：{{xage}} </td>
					<td :class="mo.cs">是否男：<input type="checkbox" v-model="mo.sex" name="{{mo.name}}" /> </td>
					<td :class="[mo.ts.classA,mo.ts.classB,mo.cs]">全名：{{fullname}} </td>
					<td :class="[mo.ts.classA,mo.ts.classB,mo.cs]">当前对象属性：
						<ul>
							<li v-for="value in mo">
								{{ $key }} : {{ value }}
							</li>
						</ul>
					</td>
					<td>修改名称:<input type="text" v-model="mo.name" />
						<input type="button" value="保存修改(简写绑定事件)" @click="saveName(mo)" />
						<input type="button" value="删除" v-on:click="removeTodo()" /></td>
				</tr>

			</table>

			<em>#事件修饰符，按键修饰符</em> 方法自动添加：event.stopPropagation()
			<input type="button" value="sayhi-stop" v-on:click.stop="sayhi" />
			<br/> 方法自动添加：event.preventDefault()
			<input type="button" value="sayhi-prevent" v-on:click.prevent="sayhi" /> 2个叠加
			<input type="button" value="sayhi-prevent-stop" v-on:click.stop.prevent="sayhi" />
			<br/> 可以自定义别名或使用预置别名，还可以使用单子母按键
			<!--
            	// 可以使用 @keyup.f1
            	Vue.directive('on').keyCodes.f1 = 112
            -->

			<input type="text" value="sayhi-enter，按回车才触发" v-on:keyup.enter="sayhi" />

			<em>#表单控件绑定</em> 单选
			<br />
			<input type="checkbox" v-model="domake" id="doit" :true-value="a" :false-value="b" /> <label for="doit">做吗？</label> {{domake}}
			<br /> 多个勾选框，绑定到同一个数组：
			<br />
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<span transition="expand">当前选择名称: {{ checkedNames | json }}</span>
			<br>
			<select v-model="selected" multiple>
			  <option selected>A</option>
			  <option>B</option>
			  <option>C</option>
			</select>
			<span>Selected: {{ selected | json }}</span>

			<em>#过渡(分为几个阶段，且可以使用纯css和js动态添加)</em>
			<input type="checkbox" name="" id="" value="" v-model="showtran" />显示按钮（纯css）
			<input type="button" id="" value="我飞来咯，我非走咯" v-if="showtran" class="animated" transition="bounce" />

			<input type="checkbox" name="" id="" value="" v-model="showtran" />自定义过渡钩子（js）
			<input type="button" id="" value="我飞来咯，我非走咯" v-if="showtran" class="animated" transition="bounceWO" />

			<em>#组件</em>
			<i>#使用组件</i> 全局注册
			<my-star>
			</my-star>
			<br /> 局部sim1的组件注册
			<my-starchild></my-starchild>
			<br /> IS特性可以自动判断是否适合当前元素嵌套
			<select name="">
				<option is="my-star1"></option>
				<td is="my-star1"></td>
			</select>

			<i>#Props</i> 静态赋值：
			<my-star msg="A start component" my-Start="999">
			</my-star>
			<br /> 动态赋值：父组件数据传递绑定 msg
			<input type="text" v-model="parentMsg" /> my-Start<input type="text" v-model="num" />
			<my-star v-bind:msg="parentMsg" :my-Start="num">
			</my-star>
			<br /> 给绑定添加描叙类型：sync双向 once 单项
			<my-star v-bind:msg.sync="parentMsg" :my-Start.once="num">
			</my-star>
			<br /> 属性值验证
			<my-star1></my-star1>

			<i>#父子组件通信</i> 自定义事件：使用 $on() 监听事件； 使用 $emit() 在它上面触发事件； 使用 $dispatch() 派发事件，事件沿着父链冒泡； 使用 $broadcast() 广播事件，事件向下传导给所有的后代。
			<br /> 子组件引用 命名为starc：通过sim1.$refs.starc访问
			<my-starchild v-ref:starc>
				<b>【我是大大，我会替换模块的默认slot节点，没有slot我就消失了】</b>
				<a slot="one" href="javascript:;">我是具名模版，我可以根据模版位置替换</a>
			</my-starchild>
			<p>组件其他特性：keep-alive保持在内存中，activate钩子，切换到组件前操作，transition-mode切换过渡</p>
			<i>杂项</i>

			<my-starchild v-for="item in todos" :item="item" :index="$index">
				<b>【{{index}}我是[{{{item.name}}}]，我是父节点的数据循环的】</b>

			</my-starchild>
			<p>还有其他杂项：编写可复用组件 异步组件 资源命名约定 递归组件 片断实例 内联模板
			</p>

			<em>深入响应式原理，自定义指令，自定义过滤器，混合，插件及编写</em>

			<i>响应式原理：如何追踪变化，变化检测问题，初始化数据，异步更新队列，计算属性的奥秘</i>
			<ul>
				<li>使用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a >生成属性getter，setter来跟踪变化
			sim1.$log()输出友好的data对象（未被observer）</li>
			<li>使用sim1.$set(key,value)来后期给data添加属性，并添加跟踪</li>
			<li>初始化data建议把所有字段定义完整，避免全部重新生成一次跟踪</li>
			</ul>
			<i>指令</i>
			<ul>
				<li>bind：只调用一次，在指令第一次绑定到元素上时调用。</li>
				<li>update： 在 bind 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。</li>
				<li>unbind：只调用一次，在指令从元素上解绑时调用。</li>
				<li>Vue.directive(id, definition)全局注册，directives选项局部注册</li>
			</ul>
			<input type="text" v-my-tive="msg" v-model="msg" />
			<i>自定义过滤器</i>
			<ul>
				<li>类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器</li>
				<li>双向过滤器</li>
			</ul>
			双向过滤器：<input type="text" v-model="money | conlog | dis "/>
			<i>混合</i>


		</div>

		<h3>#我是VUE的第二个组件：sim2</h3>
		<div id="sim2">
			<em>#组件</em> 局部sim1的组件注册组件在 my-starchild无效
			<my-starchild></my-starchild>
		</div>

	</body>

	<script type="text/javascript" src="js/vuedemojs/sim1.js"></script>
	<script src="js/vuedemojs/sim2.js" type="text/javascript" charset="utf-8"></script>

</html>