文章目录
Vue基础语法
1.1 Vue的基本认识
1.1.1 官网
-
1.1.2：介绍描述
-
渐进式JavaScript框架
-
作用：动态构建用户界面
将后台的数据在前台页面动态渲染显示出来
1.1.2：Vue特点
- 遵循MVVM模式
- 编码简洁，体积小，运行效率高，适合移动/PC端开发
- 它本身只关注UI，可以轻松引入vue插件或其他第三方库开发项目
- 声明式开发（非命令式）
1.1.3：Vue扩展插件
- vue-cli:vue 脚手架(下载基于vue的项目，项目已写好了配置，声明了依赖）
- vue-resource(axios):ajax请求
- vue-router:路由
- vuex:状态管理
- vue-lazyload:图片懒加载
- vue-scroller:页面滑动相关
- mint-ui:基于vue的UI组件库（移动端）
- element-ui:基于vue的UI组件库（PC端）
1.2：Vue的基本使用
-
vue浏览器调试使用的工具
1.2.1：效果
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_HelloWorld</title> </head> <body> <!-- 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面可以访问) 3. 双向数据绑定 : v-model 4. 显示数据 : {{xxx}} 5. 理解vue的mvvm实现 --> <!--模板--> <div id="app"> <input type="text" v-model="username"> <p>hello {{username}} </p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#app', // element: 指定用vue来管理页面中的哪个标签区域 data: { username: 'lbs' } }) </script> </body> </html>
1.2.2：理解Vue的MVVM
- MVVM:
- model:模型，数据对象（data）
- view:视图，模板页面
- viewModel:视图模型（Vue的实例）
1.3：模板语法
1.3.1：模板语法
1.3.2：效果
-
代码
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>02_模板语法</title> </head> <body> <!-- 1. 模板的理解: 动态的html页面 包含了一些JS语法代码 大括号表达式 指令(以v-开头的自定义标签属性) 2. 双大括号表达式 语法: {{exp}} 或 {{{exp}}} 功能: 向页面输出数据 可以调用对象的方法 3. 指令一: 强制数据绑定 功能: 指定变化的属性值 完整写法: v-bind:xxx='yyy' //yyy会作为表达式解析执行 简洁写法: :xxx='yyy' 4. 指令二: 绑定事件监听 功能: 绑定指定事件名的回调函数 完整写法: v-on:click='xxx' 简洁写法: @click='xxx' --> <div id="app"> <input type="text" v-model="name"> <p>Hello {{name}}</p> <h2>1. 双大括号表达式</h2> <p>{{name}}</p> <p>{{name.toUpperCase()}}</p> <p v-html="name"></p> <h2>2. 指令一: 强制数据绑定</h2> <img src="imgUrl"> <img v-bind:src="imgUrl"> <img :src="imgUrl"> <h2>3. 指令二: 绑定事件监听</h2> <button v-on:click="test">test1</button> <button @click="test">test1</button> <button @click="test2('lbs')">test2</button> <button @click="test2(name)">test3</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm=new Vue({ el: '#app', data: { name:'<a href="http://www.baidu.com">Lbs will back</a>', imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591783234245&di=e2c168da6e9429007970678541424f60&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Feaf81a4c510fd9f95f48a24b212dd42a2834a4b1.jpg' }, methods:{ test(){ alert('点击') }, test2(y){ alert(y) } } }) </script> </body> </html> -
效果展示
1.4：计算属性和监视
1.4.1：介绍
-
<!-- 1. 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2. 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算 3. 计算属性高级: 通过getter/setter实现对属性数据的显示和监视 计算属性存在缓存, 多次读取只执行一次getter计算 -->
1.4.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03_计算属性和监视</title> </head> <body> <!-- 1. 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2. 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算 3. 计算属性高级: 通过getter/setter实现对属性数据的显示和监视 计算属性存在缓存, 多次读取只执行一次getter计算 --> <div id="demo"> 姓：<input type="text" placeholder="First Name" v-model="firstName"><br> 名：<input type="text" placeholder="Last Name" v-model="lastName"><br> 姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br> 姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br> 姓名三（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br> <p>{{fullName1}}</p> <p>{{fullName2}}</p> <p>{{fullName3}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el: '#demo', data: {//数据 firstName:'A', lastName:'B', //fullName1:'A B' }, computed:{//计算,初始化显示，/相关属性改变 fullName1(){ return this.firstName+' '+this.lastName }, fullName3: { //回调函数：定义了；没调用，自动执行 //回调函数，当需要读取当前属性值时回调，计算并非返回当前属性的值 get(){ return this.firstName+' '+this.lastName }, //当属性值发生改变时回调，更改相关的属性数据 set(value){//value就是fullName3的最新属性值,监视当前属性的变化 const names=value.split(' ') this.firstName=names[0] this.lastName=names[1] } } }, watch:{//监视 firstName: function (value) { console.log(this) this.fullName2=value+' '+this.lastName } } }) vm.$watch('lastName',function (value) { //更新fullName2 this.fullName2=this.firstName+' '+this.lastName }) </script> </body> </html> -
效果展示
1.5：class与style绑定
1.5.1：介绍
-
<!-- 1. 理解 在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术 2. class绑定: :class='xxx' xxx是字符串 xxx是对象 xxx是数组 3. style绑定 :style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize是data属性 -->
1.5.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04_class与style绑定</title> <style> .aClass{ color: #89e230; } .bClass{ color: #49ffee; } .cClass{ font-size:40px; } </style> </head> <body> <!-- 1. 理解 在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术 2. class绑定: :class='xxx' xxx是字符串 xxx是对象 xxx是数组 3. style绑定 :style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize是data属性 --> <div id="demo"> <h2>1:class绑定： ：class='xxx'</h2> <p class="cClass" :class="a">xxx是字符串</p> <p :class="{aClass:isA,bClass:isB}">xxx是对象</p> <p :class="['aClass','cClass']">xxx是数组</p> <h2>2:style绑定: : style="{color:activeColor,fontSize:fontSize + 'px'}"</h2> <p :style="{color:activeColor,fontSize: fontSize + 'px'}">123</p> <button @click="update">更新</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { a:'aClass', isA:true, isB:false, activeColor:'red', fontSize:20 }, methods: { update () { this.a='bClass' this.isA=false this.isB=true this.activeColor='green' this.fontSize=40 } } }) </script> </body> </html> -
效果展示
-
点击更新
1.6：条件渲染
1.6.1：介绍
-
<!-- 1. 条件渲染指令 v-if //移除 v-else v-show //通过样式隐藏 2. 比较v-if与v-show 如果需要频繁切换 v-show 较好 -->
1.6.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08_条件渲染</title> </head> <body> <!-- 1. 条件渲染指令 v-if //移除 v-else v-show //通过样式隐藏 2. 比较v-if与v-show 如果需要频繁切换 v-show 较好 --> <div id="demo"> <p v-if="ok">成功了</p> <p v-else>失败了</p> <p v-show="ok">表白成功</p> <p v-show="!ok">表白失败</p> <button @click="ok=!ok">切换</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { ok:false } }) </script> </body> </html> -
效果展示
-
点击切换
1.7：列表渲染
1.7.1：列表渲染-1
1.7.1.1：介绍
-
<!-- 1. 列表显示 数组: v-for / index 对象: v-for / key 2. 列表的更新显示 删除item 替换item -->
1.7.1.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06_列表渲染</title> </head> <body> <!-- 1. 列表显示 数组: v-for / index 对象: v-for / key 2. 列表的更新显示 删除item 替换item --> <div id="demo"> <h2>测试: v-for 遍历数组</h2> <ul> <li v-for="(p,index) in persons" :key="index"> {{index}}---{{p.name}}------{{p.age}} -------<button @click="deleteP(index)">删除</button> -------<button @click="updateP(index, {name: 'Cat', age: 20})">更新</button> </li> </ul> <h2>测试: v-for 遍历对象</h2> <ul> <li v-for="(value,key) in persons[1]" :key="key">{{value}}----{{key}}</li> </ul> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { persons:[ {name:'Tom',age:18}, {name:'Jack',age:19}, {name:'Bob',age:20}, {name:'Rose',age:21}, ] }, methods: { deleteP (index){ this.persons.splice(index,1) }, updateP (index, newP) { //vue只监视了person的改变，并没有监视person数据内部的改变，所以此方法不可以 //this.persons[index] = newP this.persons.splice(index,1,newP) //增加 //this.persons.splice(index,0,newP) } } }) </script> </body> </html> -
效果展示
1.7.2：列表渲染-2（过滤与排序）
1.7.1.1：介绍
-
<!-- 1. 列表过滤 2. 列表排序 -->
1.7.1.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06_new列表渲染_过滤与排序</title> </head> <body> <!-- 1. 列表过滤 2. 列表排序 --> <div id="demo"> <input type="text" v-model="searchName"> <ul> <li v-for="(p, index) in filterPersons" :key="index"> {{index}}--{{p.name}}--{{p.age}} </li> </ul> <div> <button @click="setOrderType(2)">年龄升序</button> <button @click="setOrderType(1)">年龄降序</button> <button @click="setOrderType(0)">原本顺序</button> </div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { searchName: '', orderType: 0, // 0代表不排序, 1代表降序, 2代表升序 persons: [ {name: 'Tom', age:18}, {name: 'Jack', age:17}, {name: 'Bob', age:19}, {name: 'Mary', age:16} ] }, computed: { filterPersons () { debugger // 取出相关数据 const {searchName, persons, orderType} = this let arr = [...persons] // 过滤数组 if(searchName.trim()) { arr = persons.filter(p => p.name.indexOf(searchName)!==-1) } // 排序 if(orderType) { arr.sort(function (p1, p2) { if(orderType===1) { // 降序 return p2.age-p1.age } else { // 升序 return p1.age-p2.age } }) } return arr } }, methods: { setOrderType (orderType) { this.orderType = orderType } } }) </script> </body> </html> -
效果展示
- 原本顺序
- 升序
- 降序
- 原本顺序
1.8：事件处理
1.8.1：介绍
-
<!-- 1. 绑定监听: v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参: event 隐含属性对象: $event 2. 事件修饰符: .prevent : 阻止事件的默认行为 event.preventDefault() .stop : 停止事件冒泡 event.stopPropagation() 3. 按键修饰符 .keycode : 操作的是某个keycode值的健 .enter : 操作的是enter键 -->
1.8.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07_事件处理</title> </head> <body> <!-- 1. 绑定监听: v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参: event 隐含属性对象: $event 2. 事件修饰符: .prevent : 阻止事件的默认行为 event.preventDefault() .stop : 停止事件冒泡 event.stopPropagation() 3. 按键修饰符 .keycode : 操作的是某个keycode值的健 .enter : 操作的是enter键 --> <div id="example"> <h2>1. 绑定监听</h2> <button @click="test1">test1</button> <button @click="test2('lbs')">test2</button> <button @click="test3">test3</button> <button @click="test4(123,$event)">test4</button> <h2>2. 事件修饰符</h2> <div style="width:200px;height:200px;background:red" @click="test5"> <div style="width:100px;height:100px;background:blue" @click.stop="test6"></div><!--//阻止事件冒泡--> </div> <!--//阻止事件默认处理--> <a href="http://www.baidu.com" @click.prevent="test7">去百度</a> <h2>3. 按键修饰符</h2> <input type="text" @keyup.13="test8"> <input type="text" @keyup.enter="test8"> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#example', data: { test1(){ alert('test1') }, test2(msg){ alert(msg) }, test3(event){ alert(event.target.innerHTML) }, test4(number,event){ alert(number+'---'+event.target.innerHTML) }, test5(){ alert('out') }, test6(){ //event.stopPropagation() alert('inner') }, test7(){ //event.preventDefault() alert("点击了") }, test8(event){ // if(event.keyCode===13) { alert(event.target.value+' '+event.keyCode) // } } }, methods: { }, }) </script> </body> </html> -
效果展示
1.9：表单输入绑定
1.9.1：介绍
-
<!-- 1. 使用v-model(双向数据绑定)自动收集数据 text/textarea checkbox radio select -->
1.9.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08_表单输入绑定</title> </head> <body> <!-- 1. 使用v-model(双向数据绑定)自动收集数据 text/textarea checkbox radio select --> <div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名：</span> <input type="text" v-model="userName"><br> <span>密码：</span> <input type="password" v-model="pwd"><br> <span>性别：</span> <input type="radio" id="female" value="女" v-model="sex"> <label for="female">女</label> <input type="radio" id="male" value="男" v-model="sex"> <label for="male">男</label><br> <sapn>爱好：</sapn> <input type="checkbox" id="basket" value="basket" v-model="likes"> <label for="basket">篮球</label> <input type="checkbox" id="foot" value="foot" v-model="likes"> <label for="foot">足球</label> <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"> <label for="pingpang">乒乓</label><br> <span>城市：</span> <select v-model="cityId"> <option value="">未选择</option> <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option> </select><br> <span>介绍：</span> <textarea rows="10" v-model="desc"></textarea><br><br> <input type="submit" value="注册"> </form> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { userName:'', pwd:'', sex:'女', likes:['pingpang'], allCitys:[{id:1,name:'bj'},{id:2,name:'sh'},{id:3,name:'gs'}], cityId:'3', desc:'' }, methods: { handleSubmit(){ console.log(this.userName,this.pwd,this.sex,this.likes,this.cityId,this.desc) } } }) </script> </body> </html> -
效果展示
2.0：Vue实例_生命周期
2.0.1：介绍
-
<!-- 1. vue对象的生命周期 1). 初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2). 更新状态 * beforeUpdate() * updated() 3). 销毁vue实例: vm.$destory() * beforeDestory() * destoryed() 2. 常用的生命周期方法 created()/mounted(): 发送ajax请求, 启动定时器等异步任务 beforeDestory(): 做收尾工作, 如: 清除定时器 -->
2.0.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09_Vue实例_生命周期</title> </head> <body> <!-- 1. vue对象的生命周期 1). 初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2). 更新状态 * beforeUpdate() * updated() 3). 销毁vue实例: vm.$destory() * beforeDestory() * destoryed() 2. 常用的生命周期方法 created()/mounted(): 发送ajax请求, 启动定时器等异步任务 beforeDestory(): 做收尾工作, 如: 清除定时器 --> <div id="test"> <button @click="destoryVm">destory vm</button> <p v-show="isShow">it教育</p> <p v-show="isShow">{{isShow}}</p> <p v-show="isShow">{{isShow}}</p> <p v-show="isShow">{{isShow}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#test', data: { isShow:true }, //1：初始化阶段 beforeCreate(){ console.log('beforeCreate()') }, created(){ console.log('created()') }, beforeMount(){ console.log('beforeMount()') }, mounted(){//初始化显示之后立即调用1次 this.intervaId= setInterval(()=>{ console.log('mounted()') console.log('-----------') this.isShow=!this.isShow },1000) }, //2，更新阶段 beforeUpdate(){ console.log('beforeUpdate()') }, updated(){ console.log('updated()') }, //3,死亡阶段 beforeDestroy(){//死亡之前调用一次 clearInterval(this.intervaId) }, destroyed(){ console.log('destoryed()') }, methods:{ destoryVm(){ this.$destroy() } } }) </script> </body> </html> -
效果展示
2.1：过渡&动画
2.1.1：过渡&动画1
2.1.1.1：介绍
-
<!-- 1. vue动画的理解 操作css的trasition或animation vue会给目标元素添加/移除特定的class 2. 基本过渡动画的编码 1). 在目标元素外包裹<transition name="xxx"> 2). 定义class样式 1>. 指定过渡样式: transition 2>. 指定隐藏时的样式: opacity/其它 3. 过渡的类名 xxx-enter-active: 指定显示的transition xxx-leave-active: 指定隐藏的transition xxx-enter: 指定隐藏时的样式 -->
2.1.1.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10_过渡&动画1</title> <style> /*显示/隐藏的过渡效果*/ .fade-enter-active,.fade-leave-active{ transition:opacity 1s; } .fade-enter,.fade-leave-to{ opacity:0; } /*显示的过渡效果*/ .move-enter-active{ transition: all 1s } /*隐藏的过渡效果*/ .move-leave-active { transition: all 3s } /*隐藏的样式*/ .move-enter,.move-leave-to{ opacity: 0; transform: translateX(20px); } } </style> </head> <body> <!-- 1. vue动画的理解 操作css的trasition或animation vue会给目标元素添加/移除特定的class 2. 基本过渡动画的编码 1). 在目标元素外包裹<transition name="xxx"> 2). 定义class样式 1>. 指定过渡样式: transition 2>. 指定隐藏时的样式: opacity/其它 3. 过渡的类名 xxx-enter-active: 指定显示的transition xxx-leave-active: 指定隐藏的transition xxx-enter: 指定隐藏时的样式 --> <div id="demo"> <button @click="isShow=!isShow">toogle</button> <transition name="fade"> <p v-show="isShow">hello</p> </transition> </div> <div id="demo2"> <button @click="isShow=!isShow">toogle</button> <transition name="move"> <p v-show="isShow">hello</p> </transition> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data(){ return{ isShow:true } } }) new Vue({ el: '#demo2', data() { return { isShow: true } } }) </script> </body> </html> -
效果展示
2.1.2：过渡&动画2
2.1.2.1：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10_过渡&动画2</title> <style> .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(3); } 100% { transform: scale(1); } } </style> </head> <body> <div id="example-2"> <button @click="show = !show">Toggle show</button> <br> <transition name="bounce"> <p v-if="show" style="background:blue;display: inline-block">Lorem</p> </transition> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> new Vue({ el: '#example-2', data: { show: true } }) </script> </body> </html> -
效果展示
2.2：过滤器
2.2.1：介绍
-
<!-- 1. 理解过滤器 功能: 对要显示的数据进行特定格式化后再显示 注意: 并没有改变原本的数据, 可是产生新的对应的数据 2. 编码 1). 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue }) 2). 使用过滤器 <div>{{myData | filterName}}</div> <div>{{myData | filterName(arg)}}</div> --> <!--需求: 对当前时间进行指定格式显示--> -->
2.2.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>11_过滤器</title> </head> <body> <!-- 1. 理解过滤器 功能: 对要显示的数据进行特定格式化后再显示 注意: 并没有改变原本的数据, 可是产生新的对应的数据 2. 编码 1). 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue }) 2). 使用过滤器 <div>{{myData | filterName}}</div> <div>{{myData | filterName(arg)}}</div> --> <!--需求: 对当前时间进行指定格式显示--> <div id="test"> <h2>显示格式化的日期时间</h2> <p>{{date}}</p> <p>完整版：{{date | dateStr}}</p> <p>年月日：{{date | dateStr('YYYY-MM-DD')}}</p> <p>时分秒：{{date | dateStr('HH:mm:ss')}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script> <script> // 定义过滤器 // Vue.filter('dateStr',function (value,format) { // return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss') // }) Vue.filter('dateStr',function (value,format='YYYY-MM-DD HH:mm:ss') {//形参默认值 return moment(value).format(format) }) new Vue({ el: '#test', data: { date:new Date() }, mounted () { } }) </script> </body> </html> -
效果展示
2.3：指令
2.3.1：内置指令
2.3.1.1：介绍
-
<!-- 常用内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-if : 如果为true, 当前标签才会输出到页面 v-else: 如果为false, 当前标签才会输出到页面 v-show : 通过控制display样式来控制显示/隐藏 v-for : 遍历数组/对象 v-on : 绑定事件监听, 一般简写为@ v-bind : 强制绑定解析表达式, 可以省略v-bind v-model : 双向数据绑定 ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象 v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none } -->
2.3.1.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak]{//属性选择器 display:none; } </style> </head> <body> <!-- 常用内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-if : 如果为true, 当前标签才会输出到页面 v-else: 如果为false, 当前标签才会输出到页面 v-show : 通过控制display样式来控制显示/隐藏 v-for : 遍历数组/对象 v-on : 绑定事件监听, 一般简写为@ v-bind : 强制绑定解析表达式, 可以省略v-bind v-model : 双向数据绑定 ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象 v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none } --> <div id="example"> <p ref="content">lbs</p> <button @click="hint">提示</button> <p v-cloak>{{msg}}</p> <!--<p v-text="msg"></p>--> </div> <div id="test1"> <p v-upper-text='msg1'></p> <p v-lower-text='msg1'></p> </div> <div id="test2"> <p v-upper-text="msg2"></p> <p v-lower-text="msg2"></p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> //定义全局指令 //el：指令属性所在的标签对象 //binding:包含指令相关信息数据的对象 Vue.directive('upper-text',function (el,binding) { console.log(el,binding) el.textContent=binding.value.toUpperCase() }) new Vue({ el: '#example', data: { msg: 'xy' }, methods: { hint(){ alert(this.$refs.content.textContent) } } }) new Vue({ el: '#test1', data: { msg1: 'GAme' }, directives:{//注册局部指令,只在当前vm范围有效 'lower-text':function(el,binding) { el.textContent = binding.value.toLowerCase() } } }) new Vue({ el: '#test2', data: { msg2: 'working' }, }) </script> </body> </html> -
效果展示
2.3.2：自定义指令
2.3.2.1：介绍
<!--
1. 注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2. 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3. 使用指令
v-my-directive='xxx'
-->
2.3.2.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_自定义指令</title> </head> <body> <!-- 1. 注册全局指令 Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase() }) 2. 注册局部指令 directives : { 'my-directive' : { bind (el, binding) { el.innerHTML = binding.value.toupperCase() } } } 3. 使用指令 v-my-directive='xxx' --> <!-- 需求: 自定义2个指令 1. 功能类型于v-text, 但转换为全大写 2. 功能类型于v-text, 但转换为全小写 --> <div id="test"> <p v-upper-text="msg"></p> <p v-lower-text="msg"></p> </div> <div id="test2"> <p v-upper-text="msg"></p> <p v-lower-text="msg"></p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> // 注册一个全局指令 // el: 指令所在的标签对象 // binding: 包含指令相关数据的容器对象 Vue.directive('upper-text', function (el, binding) { console.log(el, binding) el.textContent = binding.value.toUpperCase() }) new Vue({ el: '#test', data: { msg: "I Like You" }, // 注册局部指令 directives: { 'lower-text'(el, binding) { console.log(el, binding) el.textContent = binding.value.toLowerCase() } } }) new Vue({ el: '#test2', data: { msg: "I Like You Too" } }) </script> </body> </html> -
效果展示
2.4：插件
2.2.1：插件
2.2.2：效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17_插件</title> </head> <body> <div id="test"> <p v-my-directive="msg"></p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="./vue-myPlugin.js"></script> <script type="text/javascript"> // 声明使用插件(安装插件: 调用插件的install()) // 内部会调用插件对象的install() Vue.use(MyPlugin)//内部会执行MyPlugin.install Vue.myGlobalMethod() const vm = new Vue({ el: '#test', data: { msg: 'love you' } }) vm.$myMethod() </script> </body> </html> -
效果展示
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
