Vue_基础功能循环、计算、绑定、事件处理、组件
1 <!DOCTYPE html>
2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
7 </head>
8 <style>
9 .class1{
10 /*background-color: green;*/
11 background: red;
12 color: yellow;
13 }
14 </style>
15 <body>
16 <div id="app">
17 <p>{{message}}</p>
18 <p v-if="seen">现在你看到我了</p><!--v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素-->
19 <p v-show="ok">Hello!</p><!--使用 v-show 指令来根据条件展示元素-->
20 <a v-bind:href="url">百度一下</a><!-- 在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定-->
21 <a :href="url">百度一下v-bind缩写</a><!-- v-bind 缩写 -->
22 <br>
23 <input v-model="message1"><!--v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值-->
24 <br>
25 <button v-on:click="reverseMessage">反转字符串</button><!--按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应-->
26 <button @click="reverseMessage">反转字符串v-on缩写</button><!-- v-on 缩写 -->
27 <br>{{message|capitalize}}<!-- 过滤器函数接受表达式的值作为第一个参数；对输入的字符串第一个字母转为大写-->
28
29 <br><h1>v-if条件语句</h1>
30 <div v-if="Math.random()>0.5"><!--随机生成一个数字，判断是否大于0.5，然后输出对应信息-->
31 Sorry
32 </div>
33 <div v-else><!--用 v-else 指令给 v-if 添加一个 "else" 块-->
34 Not Sorry
35 </div>
36 <!--判断 type 变量的值-->
37 <div v-if="type == 'A'">A</div>
38 <div v-else-if="type == 'B'">B</div>
39 <div v-else-if="type == 'C'">C</div>
40 <div v-else>Not A/B/C</div>
41
42 </div>
43
44 <hr>
45 <div id="vue_det">
46 <h1>site:{{site}}</h1><!-- {{ }} 用于输出对象属性和函数返回值-->
47 <h1>url:{{url}}</h1>
48 <h1>{{details()}}</h1>
49 </div>
50
51 <hr>
52 <div id="app1">
53 <div v-html="message"></div><!--使用 v-html 指令用于输出 html 代码-->
54 </div>
55
56 <hr>
57 <div id="app2">
58 <label for="r1">修改颜色</label>
59 <input type="checkbox" v-model="use" id="r1"><br>
60 <div v-bind:class="{'class1':use}"><!--HTML 属性中的值应使用 v-bind 指令-->
61 v-bind:class改变颜色
62 </div>
63 </div>
64
65 <hr>
66 <div id="app3"><!--表达式-->
67 {{5+5}}<br>
68 {{ok? 'Yes' : 'No'}}<br><!--三元运算-->
69 {{message.split('').reverse().join('')}}<!--分割、翻转、拼接-->
70 <div v-bind:id="'list-'+id">百度一下</div>
71 </div>
72
73 <hr><h1>v-for循环语句</h1>
74 <div id="app4">
75 <ol>
76 <li v-for="site in sites"><!--v-for 指令需要以 site in sites 形式的特殊语法-->
77 {{site.name}}
78 </li>
79 </ol>
80 <ul>
81 <template v-for="site in sites"><!--模板中使用 v-for-->
82 <li>{{site.name}}</li>
83 </template>
84 </ul>
85 <ul>
86 <li v-for="value,key,index in object"><!--<li v-for="(value, key, index) in object">-->
87 {{index}}:{{key}}---{{value}}
88 </li>
89 <li v-for="n in 10">{{n}}</li><!--循环整数-->
90 </ul>
91 </div>
92
93 <hr><h1>computed计算属性</h1>
94 <div id="app5">
95 <p>原始字符串：{{message}}</p>
96 <p>计算后的反转字符串：{{reversedMessage}}</p>
97 </div>
98
99 <hr><h1>监听属性</h1>
100 <div id="app6">
101 <p style="font-size: 25px;">计数器：{{counter}}</p>
102 <button @click="counter++" style="font-size: 25px;">点击计数</button><br>
103 千米：<input type="text" v-model="kilometers">
104 米：<input type="text" v-model="meters">
105 <p id="info"></p>
106 </div>
107
108 <hr><h1>样式绑定</h1>
109 <div id="app7">
110 <div v-bind:style="styleObject">字体样式改变</div>
111 <div v-bind:style="[styleObject, backStyle]">字体多种样式改变</div>
112 </div>
113
114 <hr><h1>事件处理器v-on</h1>
115 <div id="app8">
116 <button @click="counter+=1">增加1</button>
117 <p>这个按钮被点击了{{counter}}次</p>
118 <button @click="say('hi')">Say hi</button>
119 <button @click="say('what')">Say what</button>
120 </div>
121 <hr><h1>表单，用 v-model 指令在表单控件元素上创建双向数据绑定</h1>
122 <!-- 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入-->
123 <!-- <input v-model.trim="msg">-->
124 <div id="app9">
125 <input v-model="message" placeholder="编辑内容显示。。。">
126 <textarea v-model="message1" placeholder="多行文本输入"></textarea>
127
128 <p>单个复选框：</p>
129 <input type="checkbox" id="checkbox" v-model="checked">
130 <label for="checkbox">{{checked}}</label>
131 <p>多个复选框：</p>
132 <input type="checkbox" id="taobao1" value="taobao" v-model="checkedNames">
133 <label for="taobao1">taobao</label>
134 <input type="checkbox" id="google1" value="google" v-model="checkedNames">
135 <label for="google1">google</label>
136 <input type="checkbox" id="facebook1" value="facebook" v-model="checkedNames">
137 <label for="facebook1">facebook</label>
138 <br>
139 <span>选择的值为：{{checkedNames}}</span>
140
141 <p>单选框：</p>
142 <input type="radio" id="facebook2" value="facebook" v-model="picked">
143 <label for="facebook2">facebook</label>
144 <br>
145 <input type="radio" id="google2" value="google" v-model="picked">
146 <label for="google2">google</label>
147 <br>
148 <span>选择的值为：{{picked}}</span>
149
150 <p>下拉列表--select 列表</p>
151 <select v-model="selected" name="好像没用上">
152 <option value="">选择一个网站</option>
153 <option value="www.baidu.com">百度</option>
154 <option value="www.taobao.com">淘宝</option>
155 </select>
156 <div id="output">选择的网站是：{{selected}}</div>
157
158 </div>
159
160 <hr><h1>组件Component</h1>
161 <div id="app10">
162 <chunfang></chunfang>
163 <chunfang1></chunfang1>
164 <child message="Hello!"></child>
165 </div>
166 <div id="app11">
167 <input v-model="parentMsg"><br>
168 <child2 v-bind:message2="parentMsg"></child2><!--用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件-->
169 </div>
170 <hr><h1>组件Component--自定义事件</h1>
171 <div id="app12">
172 <div id="counter-event-example">
173 <p>{{total}}</p>
174 <button-counter v-on:increment="incrementTotal"></button-counter>
175 <button-counter v-on:increment="incrementTotal"></button-counter>
176 </div>
177 </div>
178
179 <hr><h1>自定义指令</h1>
180 <div id="app13">
181 <p>页面载入时，input元素自动获取焦点</p>
182 <input v-focus>
183 </div>
184
185 <script>
186 new Vue({
187 el:'#app',
188 data:{
189 message:'baidu!',
190 message1:'百度一下，输入框填入的',
191 seen:true,
192 ok:true,
193 url:'https://www.baidu.com',
194 type:'C'
195 },
196 methods: {
197 reverseMessage:function () {
198 this.message1 = this.message1.split('').reverse().join('')
199 }
200 },
201 filters:{
202 capitalize:function (value) {
203 if(!value) return '';
204 value = value.toString();
205 return value.charAt(0).toUpperCase()+value.slice(1)
206 }
207 }
208 });
209
210 var vm = new Vue({// Vue 构造器
211 el:'#vue_det',//el 参数，它是 DOM 元素中的 id
212 data:{//data 用于定义属性
213 site:"第一个正式的测试VUE",
214 url:"www.baidu.com",
215 alexa:"10000"
216 },
217 methods:{//methods 用于定义的函数，可以通过 return 来返回函数值
218 details:function () {
219 return this.site + "-这是一个连接到百度的网址";
220 }
221 }
222 });
223
224 new Vue({
225 el:'#app1',
226 data:{
227 message: '<h1>百度一下</h1>'
228 }
229 });
230
231 new Vue({
232 el:'#app2',
233 data:{
234 use:false//判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类
235 }
236 });
237
238 new Vue({
239 el:'#app3',
240 data:{
241 ok:true,
242 message:'baidu',
243 id:1
244 }
245 });
246
247 new Vue({
248 el:'#app4',
249 data:{
250 sites:[
251 {name:'baidu'},
252 {name:'360'},
253 {name:'雅虎'},
254 ],
255 object:{
256 name:'百度一下',
257 url: 'http://www.baidu.com',
258 slogan:'世界因我而改变！',
259 },
260 },
261 });
262
263 var vm = new Vue({
264 el:'#app5',
265 data:{message:'反转字符串'},
266 computed:{
267 reversedMessage:function () {//声明了一个计算属性 reversedMessage
268 return this.message.split('').reverse().join('')//// `this` 指向 vm 实例
269 }
270 },
271 });
272
273 var vm = new Vue({//实例进行千米与米之间的换算
274 el:'#app6',
275 data:{
276 counter:1,
277 kilometers:0,
278 meters:0,
279 },
280 methods:{},
281 watch:{
282 kilometers: function (val) {
283 this.kilometers = val;
284 this.meters =this.kilometers *1000;
285 },
286 meters:function (val) {
287 this.kilometers = val/1000;
288 this.meters = val;
289 },
290 },
291 });
292 vm.$watch('kilometers',function (newValue,oldValue) {//通过 watch 来响应数据的变化
293 document.getElementById("info").innerHTML ="修改前的值为："+oldValue+"，修改后的值为："+newValue;
294 });
295
296 new Vue({
297 el:'#app7',
298 data:{
299 styleObject:{
300 color:'green',
301 fontSize:'30px',
302 width:'500px',
303 },
304 backStyle:{
305 background:'red',
306 'font-weight':'bold',
307 },
308
309 },
310 });
311
312 new Vue({
313 el:'#app8',
314 data:{counter: 0},
315 methods:{//直接绑定到一个方法
316 say:function (message) {
317 alert(message);
318 }
319 },
320 });
321
322 new Vue({
323 el:'#app9',
324 data:{
325 message:'xian显示在框中',
326 message1:'多行文本显示框中\r\n并换行',
327 checked:false,
328 checkedNames:[],
329 picked:'facebook',
330 selected:'',
331 },
332 });
333
334 Vue.component('chunfang',{//// 注册
335 template:'<h1>自定义的全局组件</h1>'
336 });
337 new Vue({//// 创建根实例
338 el:'#app10',
339 });
340
341 var Child={template: '<h2>这是自定义的局部组件</h2>'};
342 new Vue({//// 创建根实例
343 el:'#app10',
344 components:{//// <chunfang1> 将只在父模板可用
345 'chunfang1':Child,
346 },
347 });
348
349 Vue.component('child',{// 注册
350 props:['message'],// 声明 props
351 template:'<span>{{message}}</span>',// 同样也可以在 vm 实例中像 “this.message” 这样使用
352 });
353 new Vue({// 创建根实例
354 el:'#app10',
355 });
356
357 Vue.component('child2',{// 注册
358 props:['message2'],// 声明 props、、动态 Prop
359 template:'<span>{{message2}}</span>',// 同样也可以在 vm 实例中像 “this.message” 这样使用
360 });
361 new Vue({// 创建根实例
362 el:'#app11',
363 data:{
364 parentMsg:'父组件的内容'
365 },
366 });
367
368 Vue.component('button-counter',{
369 template:'<button v-on:click="incrementHandler">{{counter}}</button>',
370 data:function () {//// data 选项是一个函数，组件不相互影响
371 return {counter:0}
372 },
373 methods:{
374 incrementHandler:function () {
375 this.counter+=1;
376 this.$emit('increment');//使用 $emit(eventName) 触发事件
377 },
378 },
379 });
380 new Vue({
381 el:'#app12',
382 data:{total:0},
383 methods:{
384 incrementTotal:function () {
385 this.total +=1;
386 },
387 },
388 });
389
390 Vue.directive('focus',{// 注册一个全局自定义指令 v-focus
391 inserted:function (el) {// 当绑定元素插入到 DOM 中。
392 el.focus();// 聚焦元素
393 },
394 });
395 new Vue({// 创建根实例
396 el:'#app13',
397 });
398
399 </script>
400
401 </body>
402 </html>
Vue_基础功能循环、计算、绑定、事件处理、组件的更多相关文章
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- VBS基础篇 - 循环语句(3) - For...Next
VBS基础篇 - 循环语句(3) - For...Next 指定循环次数,使用计数器重复运行语句,语法结构如下: 1 2 3 4 5 For counter = start To end [Ste ...
- {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm
Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...
- [ kvm ] 学习笔记 3：KVM 基础功能详解
1. 构建 KVM 环境 KVM 从诞生开始就需要硬件虚拟化的支持,KVM 必需的硬件虚拟化扩展分别是:Intel 的虚拟化技术(Intel VT)和 AMD 的 AMD-V 技术.首先处理器(CPU ...
- day 64 Django基础十之Form和ModelForm组件
Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Mod ...
- LibOpenCM3(五) 基础功能: 系统时钟, GPIO, 定时器
目录 LibOpenCM3(一) Linux下命令行开发环境配置 LibOpenCM3(二) 项目模板 Makefile分析 LibOpenCM3(三) .ld文件(连接器脚本)和startup代码说 ...
- 电脑小白学习软件开发-C#语言基础之循环重点讲解，习题
写代码也要读书,爱全栈,更爱生活.每日更新原创IT编程技术及日常实用视频. 我们的目标是:玩得转服务器Web开发,搞得懂移动端,电脑客户端更是不在话下. 本教程是基础教程,适合任何有志于学习软件开发的 ...
随机推荐
- 什么是LSA，在OSPF中LSA是什么
什么是LSA:链路状态通告,它存在于LSU(链路状态更新包) Type 1 LSA:路由器LSA 每个OSPF路由器都会产生路由器LSA,描述了对应设备的物理接口所连接的链路和接口,并指明 ...
- BGP的五种报文六种状态
BGP的五种报文 Open报文:用于协商BGP参数,包括版本号,AS号等信息.在两个路由器之间建立了TCP会话之后开始交换Open信息以确认是否能形成邻居关系,是TCP建立后发送的第一个信息,类似OS ...
- 从字符串某位置开始的递增串（dfs）注意for循环中下标的错误
#include <iostream> #include <string> using namespace std; char res[50];int tag=1; void ...
- 利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进程的信息？
ps -ef (system v 输出)ps -aux bsd 格式输出ps -ef | grep pid
- 什么是Spring Cloud Bus?
spring cloud bus 将分布式的节点用轻量的消息代理连接起来,它可以用于广播配置文件的更改或者服务直接的通讯,也可用于监控. 如果修改了配置文件,发送一次请求,所有的客户端便会重新读取配置 ...
- 为什么redis 需要把所有数据放到内存中？
答:Redis 为了达到最快的读写速度将数据都读到内存中,并通过异步的方式将数 据写入磁盘.所以 redis 具有快速和数据持久化的特征.如果不将数据放在内存中, 磁盘 I/O 速度为严重影响 red ...
- 什么是 Executors 框架？
Executor 框架是一个根据一组执行策略调用,调度,执行和控制的异步任务的框 架. 无限制的创建线程会引起应用程序内存溢出.所以创建一个线程池是个更好的的 解决方案,因为可以限制线程的数量并且可以 ...
- word中怎么加入endnote的插件
首先,打开Microsoft Word 2010,然后点击文件菜单,在弹出的项目中点击选项. 2 弹出Word选项对话框,在左侧导航处点击"加载项"按钮,如图. 3 在右侧内容窗口 ...
- 从 输入网址(URL)到页面展示的过程
1.用户输入url网址(URL) 用户输入url(也就是我们说的网址,也是统一资源定义符,用于定义互联网资源) 比如输入https://www.baidu.com 其中https为协议 baidu.c ...
- Day05 - Flex 实现可伸缩的图片墙 中文指南
Day05 - Flex 实现可伸缩的图片墙 中文指南 作者:liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 30 个视频教程.30 ...