Vue学习1-1.基础语法;2.指令:表单输入绑定,文本渲染;3.组件:定义组件,使用组件
目录
一.简述Vue
Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框 架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的 核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另 一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全 能够为复杂的单页应用程序提供驱动。
Vue.js 提供了 MVVM (Model-View-ViewModel 的简写)数据绑定和一 个可组合的组件系统,具有简单、灵活的 API。
MVVM: 它采用双向绑定(data-binding):View 的变动,自动反映在 ViewModel,反之亦然。
Vue 框架有以下特点:
简洁: HTML 模板 + JSON 数据。
数据驱动: 自动追踪依赖的模板表达式和计算属性。
组件化: 用解耦、可复用的组件来构造界面。
轻量: ~24kb min+gzip,无依赖。
快速: 精确有效的异步批量 DOM 更新。
模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。
二.基础语法
1.模板语法
使用Vue:
1、引入Vue的核心JS文件
2、准备Dom结构
3、实例化组件
通过el属性,挂载元素,绑定id为app的html元素
通过data属性,定义数据,可以在html代码段中显示的数据
4、获取数据
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
在Vue模板中,提供了完全的 JavaScript 表达式支持,注意,只能在模板中写入表达式,而不能使用js语句
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础语法</title> <!--1、引入Vue的核心JS文件,Vue会被当做全局变量使用--> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <!--2、准备Dom结构--> <div id="app"> <!--双花括号取值--> <div>{{msg}}</div> <div>{{msg.split("").reverse().join("")}}</div> <!--字符串方法操作--> <div>{{num + 1}}</div> <!--数值运算--> <div>{{flag?"喜欢":"不喜欢"}}</div> <!--三目运算符--> <!--下面的会报错--> <!-- 这是语句,不是表达式 --> <!--{{ var a = 1 }}--> <!-- 流控制也不会生效,请使用三元表达式 --> <!--{{ if (ok) { return message } }}--> </div> <script type="text/javascript"> /*3、实例化组件*/ var app = new Vue({ el:"#app", // el:element的简写。挂载元素,绑定id为app的html元素 data:{ // 定义数据,可以在html代码段中显示的数据 msg:"Hell 20000 o Vue!", num:10, flag:true } }); </script> </body> </html>
三.指令
指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是,当表 达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
1.文本渲染
[code]方式一:v-text: 显示数据,响应式(默认) 简写:{{}} 方式二:v-once: 数据只会更新一次,下次更新数据不影响dom 方式一三:v-html: 可以显示html元素
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本渲染指令</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <div v-text="msg"></div> <!--简写--> <div>{{msg}}</div> <hr /> <div v-once>{{txt}}</div> <hr /> <div>{{tpl}}</div> <div v-html="tpl"></div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ msg:"Hello", txt:"Hello Vue", tpl:"<h2>上海</h2>" } }); </script> </html>
2.class 与 style 绑定
1)v-bind
[code]v-bind v-bind指令可以绑定元素的属性,动态给属性赋值。 比如:v-bind:class、v-bind:style、v-bind:href形式。 v-bind的简写形式: v-bind:属性名="组件中定义的数据" 简化为 : :属性名="组件中定义的数据" 上边的形式可以改写成: :class、:style、:href
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bind指令</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <div title="你好">Hello</div> <hr /> <div v-bind:title="msg">你好,我是大尤,你觉得Vue怎么样?</div> <div :title="msg">你好,我是大尤,你觉得Vue怎么样?</div> <hr /> <img :src="src"/> <a :href="href">Vue</a> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ msg:"Vue is very good", src:"https://cn.vuejs.org/images/logo.png", href:"https://cn.vuejs.org/" } }); </script> </html>
2)class绑定
[code]class绑定 绑定DOM对象的class样式有以下几种形式: 绑定多个class 使用对象classObject绑定 使用数组classList绑定 绑定的对象可以同时切换多个class 对象和数组绑定的区别: 对象可以控制class的添加和删除;数组不能控制删除
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class绑定</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <div class="red green item">Vue</div> <hr /> <div :class="{red:true,green:false,item:true}">Vue</div> <div :class="classObj">Vue</div> <div :class="classList">Vue</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ classObj:{ red:true, green:false, item:true }, classList:["red","item","test"] } }); </script> </html>
3)style绑定
[code]绑定形式跟class一致: 使用内联对象Object 直接传入对象styleObject 使用数组对象styleList
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>style绑定</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <div style="color:red;font-size: 30px;">我是文本</div> <div :style="{'color':'red','font-size':'30px'}">我是文本</div> <div :style="styleObj">我是文本</div> <div :style="[styleObj,styleObj2]">我是文本</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ styleObj:{ 'color':'red', 'font-size':'30px', 'font-family':'楷体' }, styleObj2:{ 'background':'pink' } } }); </script> </html>
3.事件处理
1)监听事件
绑定事件 语法: v-on:事件名 简写: @事件名
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>监听事件</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> count:{{count}} <button v-on:click="count++">add</button> <button @click="count--">down</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 } }); </script> </html>
2)方法事件处理器
方法事件处理器 一般来说事件会绑定一个方法,在方法内部处理相关的事件逻辑。 需要在methods属性中定义方法,然后v-on引用对应相关的方法名。
实例:
[code] <head> <meta charset="UTF-8"> <title>事件方法</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> count:{{count}} <button @click="addCount()">add</button> <button @click="downCount">add</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 }, methods:{ addCount:function(){ this.count++; }, downCount:function(){ this.count--; } } }); </script>
3)$event 对象
在事件处理函数中问 访问 DOM 原生事件 event 对象,可以使用特殊变量$event 对象传入。
实例:
[code]<div id="app"> <!-- 传入$event --> <button v-on:click="greet($event)">greet</button> </div> <script> var app = new Vue({ el:'#app', data:{ greetText:'Hello Vue!' }, //定义组件方法 methods:{ //使用 event 对象 greet: function (event) { console.log(event.target.tagName);//BUTTON } } }); </script>
4)事件修饰符
在事件处理程序中调用 event.preventDefault()(阻止元素发生默认行为) 或 event.stopPropagation()(阻止事件冒泡到父元素) 是非常常见的需求。 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。 stop : 阻止event冒泡,等效于event.stopPropagation() prevent : 阻止event默认事件,等效于event.preventDefault() capture : 事件在捕获阶段触发 self : 自身元素触发,而不是子元素触发 once : 事件只触发一次
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>$event</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <div @click="father"> <div @click="child">child</div> </div> <hr /> <!--stop : 阻止event冒泡,等效于event.stopPropagation(--> <div @click="father"> <div @click.stop="child">child</div> </div> <hr /> <!--prevent : 阻止event默认事件,等效于event.preventDefault()--> <a href="http://www.baidu.com" @click.prevent="prevent1">百度</a> <hr /> <!--capture : 事件在捕获阶段触发--> <div @click.capture="father"> <div @click.capture="child">child</div> </div> <!--self : 自身元素触发,而不是子元素触发--> <hr /> <div @click.self="father"> father <div @click="child">child</div> </div> <hr /> <!--once : 事件只触发一次--> <div @click.once="child">child</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ }, methods:{ father:function(){ console.log("父元素..."); }, child:function(){ console.log("子元素..."); }, prevent1:function(){ console.log("666...."); } } }); </script> </html>
5)键值修饰符
键值修饰符 在监听键盘事件时,我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>键值修饰符</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <form action="http://www.shsxt.com"> <input v-on:keyup.enter="submit"> <!-- 只有在 keyCode 是 13 时调用 submit() --> <input v-on:keyup.13="enterKey"> </form> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ }, methods:{ enterKey:function(){ console.log("enter..."); } } }); </script> </html>
4.条件渲染
条件渲染 1、v-if 当条件返回true时,执行 2、v-else 当if条件不满足时,执行(要结合v-if一起使用) 3、v-else-if 当满足条件时执行(要结合v-if一起使用) 4、v-show 满足条件时显示,不满足隐藏 v-if 和 v-show 两者的区别是v-if是“真正”的条件渲染,只有为true时才会被渲染。v-if也是“惰性”的,假如初始条件为false,那么条件变为true时才会发生第一次渲染。 v-show只是CSS的display属性的切换,不论初始条件是否成立,都会进行html渲染,然后改变display的值为none或者block。 一般来说v-if开销比较大,如果需要频繁切换显示不显示使用v-show,需要进行条件判断的但是改变很少的使用v-if。
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div v-if="flag">你能看见我!</div> {{flag}} <hr /> <h3 v-if="age==18"> 张三是18岁 </h3> <h3 v-else> 张三不是18岁 </h3> <hr /> <h3 v-if="age>18"> 成年啦 </h3> <h3 v-else-if="age==18"> 刚成年 </h3> <h3 v-else> 小屁孩 </h3> <hr /> <h4 v-show="flag">你能看见我!</h4> </div> </body> <script type="text/javascript"> new Vue({ el:"#app", data:{ flag:false, age:18 } }); </script> </html>
5.列表渲染
列表渲染 v-for 可以把一组值进行列表渲染,语法形式: item in items, items 是源数据数组并且 item 是数组元素迭代的别名。 在 v-for 块中,对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。 v-for也可以遍历对象,可以指定三个形参: 形式: v-for="(value, key, index) in object" value: 对象的值 key: 对象的键 index: 遍历的索引
实例:1
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表渲染</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <li v-for="item in items">{{item.name}}</li> </ul> <hr /> <ul> <li v-for="(item,index) in items">{{type}}--{{index}}--{{item.name}}</li> </ul> <hr /> <ul> <li v-for="(value,key,index) in person">{{index}}--{{key}}--{{value}}</li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el:"#app", data:{ type:"水果", items:[ {name:'西瓜'}, {name:'苹果'}, {name:'菠萝'} ], person:{ name:'Tim', age:12, love:'music' } } }); </script> </html>
实例2:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>key属性</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <li v-for="item in items" :key="item.id">{{item.name}}</li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el:"#app", data:{ items:[ {id:1,name:'西瓜'}, {id:2,name:'苹果'}, {id:3,name:'菠萝'} ], } }); </script> </html>
实例3:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>取值范围</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root"> <h3 v-for="index in 10">{{index}}</h3> </div> </body> <script type="text/javascript"> new Vue({ el:"#root" }); </script> </html>
6.表单输入绑定
1)表单校验
修饰符 使用v-model绑定数据后,可以使用修饰进行数据处理: .lazy:绑定数据默认实时更新,lazy可以在onChange触发 .number:返回数字类型的值,转换不成返回NaN .trim:去除数据的前后空格
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修饰符</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <p><input type="text" v-model.lazy="name">{{name}}</p> <p><input type="text" v-model.number="age"></p> <p><input type="text" v-model.trim="cont"></p> <p><button @click="show();">显示值</button></p> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ name:"", age:"", cont:"" }, methods:{ show:function(){ console.log(this.name); console.log(typeof this.age); console.log(this.age); console.log(this.cont); } } }); </script> </body> </html>
2)表单输入框绑定
v-model 用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。 单个使用时v-model是逻辑值:true和false,多个一起使用需要指定value值,选中结果绑定v-model的数组。
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单输入绑定</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root"> <!--文本框--> <input type="text" v-model="txtMsg" placeholder="请输入用户名..." /> 文本值:{{txtMsg}} <br /><hr /><br /> <!--复选框--> <input type="checkbox" v-model="ck" /> 选中状态:{{ck}} <br /> <input type="checkbox" value="HTML5" v-model="lesson"> <label>HTML5</label> <input type="checkbox" value="JavaScript" v-model="lesson"> <label>JavaScript</label> <input type="checkbox" value="Vue" v-model="lesson"> <label>Vue</label> <p>多选结果:{{lesson}}</p> <br /><hr /><br /> <!--单选框--> <input type="radio" value="yes" v-model="love"><label>喜欢</label> <input type="radio" value="no" v-model="love"><label>不喜欢</label> <input type="radio" value="all" v-model="love"><label>都喜欢</label> <p>是否喜欢: {{love}}</p> <br /><hr /><br /> <!--下拉框--> <select v-model="selected"> <option>西瓜</option> <option>苹果</option> <option>菠萝</option> </select> <h3>结果: {{selected}}</h3> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#root", data:{ txtMsg:"", ck:"", lesson:[], love:"", selected:"" } }); </script> </html>
3)下拉框绑定
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单输入绑定</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root"> <select v-model="selected"> <option v-for="item in list" :value="item.value">{{item.text}}</option> </select> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#root", data:{ list:[ {text:'西瓜', value:'1'}, {text:'苹果', value:'2'}, {text:'菠萝', value:'3'} ], selected:3 } }); </script> </html>
4)修饰符
修饰符 使用v-model绑定数据后,可以使用修饰进行数据处理: .lazy:绑定数据默认实时更新,lazy可以在onChange触发 .number:返回数字类型的值,转换不成返回NaN .trim:去除数据的前后空格
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修饰符</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <p><input type="text" v-model.lazy="name">{{name}}</p> <p><input type="text" v-model.number="age"></p> <p><input type="text" v-model.trim="cont"></p> <p><button @click="show();">显示值</button></p> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ name:"", age:"", cont:"" }, methods:{ show:function(){ console.log(this.name); console.log(typeof this.age); console.log(this.age); console.log(this.cont); } } }); </script> </body> </html>
四.组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
1.定义组件
1、定义组件 Vue自定义组件分为两种:全局注册和局部注册,全局组件可以在任何地方引用,局部组件只能在当前Vue实例使用。 1)全局注册 使用Vue.component(tagName, options)来定义: 2)局部注册 在Vue实例中使用components属性来定义: 注意:HTML 特性是不区分大小写的,所有在定义组件时尽量使用中划线“-”来指定组件名。 即使,使用了驼峰标示命名如:myComponent,在页面引用时仍然要使用<my-component>进行引用。
全局实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定义组件</title> <script type="text/javascript" src="../js/vue.js" ></script> </head> <body> <div id="app"> <!--使用组件--> <my-hello></my-hello> </div> </body> <script type="text/javascript"> new Vue({ el:"#app" }); /*定义全局组件*/ Vue.component("my-hello",{ template:"<h3>Hello Vue</h3>" }); </script> </html>
2.is属性
is属性 在table标签中直接使用自定义组件,无法正常显示。DOM解析时会解析到<table>标签的外部: 原因是:table/ol/ul/select 这种html标签有特殊的结构要求,不能直接使用自定义标签。他们有自己的默认嵌套规则,比如: table> tr> [th, td]; ol/ul > li; select > option
[code]<html> <head> <meta charset="UTF-8"> <title>is属性</title> <script type="text/javascript" src="../js/vue.js" ></script> </head> <body> <table id="app"> <tr is="my-hello"></tr> </table> </body> <script type="text/javascript"> /*定义全局组件*/ Vue.component("my-hello",{ template:"<h3>Hello Vue</h3>" }); new Vue({ el:"#app" }); </script> </html>
3.模板
模板 当模板的html结构比较复杂时,直接在template属性中定义就不现实了,效率也会很低,此时我们可以使用模板,定义模板的四种形式: 1)直接使用字符串定义 2)使用<script type="text/x-template"> 3)使用<template>标签 4)使用.vue组件,需要使用模块加载机制 在使用直接字符串模板时、x-template和.vue组件时,不需要is进行转义。
实例:
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> <script type="text/javascript" src="../js/vue.js" ></script> </head> <body> <div id="app"> <my-hello1></my-hello1> <my-hello2></my-hello2> <my-hello3></my-hello3> <my-hello4></my-hello4> </div> <!--2)使用<script type="text/x-template">--> <script type="text/x-template" id="tpl3"> <ul> <li>01</li> <li>02</li> </ul> </script> <!--3)使用<template>标签--> <template id="tpl4"> <ul> <li>011</li> <li>022</li> </ul> </template> </body> <script type="text/javascript"> /*1)直接使用字符串定义*/ var tpl = "<div><button>按钮</button><span>Hello</span></div>"; var tpl2 = ` <div> <button>按钮2</button> <span>Hello2</span> </div> `; console.log(tpl2); // 定义组件 Vue.component("my-hello1",{ template:tpl }); Vue.component("my-hello2",{ template:tpl2 }); Vue.component("my-hello3",{ template:"#tpl3" }); Vue.component("my-hello4",{ template:"#tpl4" }); new Vue({ el:"#app" }); </script> </html>
- Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
- vue学习第4天,表单输入绑定 组件
- 学习使用vue.js(二)声明式渲染 和 指令绑定
- Vue.js实例学习:表单输入绑定
- [js框架]Vue框架的基础学习 一、模板语法的使用
- vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
- [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件
- 5.2.vue入门基础学习笔记-基础指令介绍(表单绑定v-model)
- vue.js 表单控件 输入绑定 v-model的使用
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- 5.3.vue入门基础学习笔记-基础指令介绍(属性绑定v-bind)
- vue使用自定义事件的表单输入组件(日期组件与货币组件)
- vue基础 学习之v-model (表单控件绑定)
- Vue语法、指令、事件和表单的双向数据绑定
- Vue基础(表单输入绑定)
- VUE学习笔记五:基础语法之样式绑定
- 又一款MVVM组件 Vue基础语法和常用指令(1)
- Vue学习笔记之表单输入控件绑定
- Vue------第四天(事件处理:事件监听、修饰符等;表单输入绑定:基础用法、值绑定)
- React.js学习1——基础知识、JSX语法、组件、React State、React Props、React事件处理、React 条件渲染、条件渲染、React 组件 API