vue:渐进式javascript框架 渐进式声明式渲染→组件系统->客户端路由>集中式状态管理- >项目构建
vue的基本使用:
传统开发模式对比 原生js jquery js框架
vue helloword初步实现
创建vue()对象-》el:对象选择器data:数据对象{{}}:插值表达式
前端渲染 模板(html)+数据(ajax获取) = 渲染
原生js 字符串拼接的方式添加到html标签中 风格差异大,后期维护困难
前端模板引擎 thinkphp框架 代码规范,方便维护;没有提供专门的事件机制
模板语法
模板语法
如何动态处理属性
如何处理事件
<input type="button" v-on:click='handle()'/>//简写形式<input type="button" @click="handle()"/>
事件的函数绑定
事件参数传递
<div v-text="num"></div><button @click="handle('ww',$event)">按钮</button>var vm =new vue({ el:"#app". data:{ num:0 }, methrods{ handle:function(t,event){ //获取事件对象的值 //event为事件对象 console.log(event.target.innerHTML) } } });
事件修饰符
//阻止冒泡<button @click.stop="handle()"></button>\//阻止默认行为 将不再执行页面跳转而执行handle()方法<a href="www.baidu.com" @click.prevent="handle()"></a>
按键修饰符
<button @keyup.enter="handle()">//自定义按键修饰符定义按键a,当按下a建时执行该操作<button @keyUp.a="handle()"></ <script> Vue.config.keyCodes.a = 65; </script>
v-clock指令 插值表达式存在“闪动”问题,该指令先通过样式隐藏,替换完值之后再显示最终的值。
[v-clock]{ display:none }<div v-clock>{{}}</div>
v-text:填充纯文本
<div v-text="msg"></div>
v-html:填充html文本,存在跨域安全问题,信任本网站内容,不可信任用户提交内容。
<div v-html="msg"></div>var vm = new vue({ el:"", data:{ msg:"<h1>好好学习</h1>" } });
v-pre:原样输出内容,跳过编译过程
<div v-pre>{{msg}}</div>//输出内容 :{{msg}}
v-once:只编译一次,不再参与数据的响应式,提高性能 1.数据的响应式:页面的变化引起数据的变化
<div v-once v-text="msg"></div>
双向数据绑定:
添加v-clock样式
差值表达式
指令 指令的本质就是自定义属性
//动态绑定数据,inpt值发生变化,div值随着变化,相应div值发生变化,input值同时发生变化 <div id='app'> <div v-text='msg'></div> <input type='text' v-model/> </div> var vm = new vue( el:"#app", data:{ msg:'好好学习' } );
事件绑定
<div id="app"> <div v-text="num"></div> <button @click="handle()">按钮</button> </div> <script> var vm = new vue({ el:"#app", data:{ num:0 }, methods:{ handle:function(){ //this 即vm对象 this === vm this.num++ } } }); </script>
属性绑定 :动态改变属性的值
//简写形式<a :href="url">百度</a><a v-bind:href="url">百度</a><button @click="handle()"></button><script> methods:{ handle:function(){ this.url = "http://www.google.com" } } </script
样式绑定:动态修改页面样式
//demo是class名,isTrue是属性值,通过方法改变样式//对象语法<div :class="{demo:isTrue}"></div>//数组语法 同时绑定两个属性<div :class="[demo,demo1]"></div>
分支循环结构
表单操作 用户交互
获取表单数据的基本操作
表单修饰符
//number :转化为数值 <input type="number" v-model.number='age'> //trim :去掉开始和结尾的空格//lazy:将input事件切换为change事件 失去焦点再触法
自定义志指令 13个内置指令不能满足业务需求
自定义指令的语法规则
//默认获取文本框焦点//带参数的全局自定义指令 v-color必须是对象类型的参数<input type='text' v-color="{c1:'red',c2:'blue'}"<script> Vue.directive('color',{ inserted:function(el,color){ el.style.backgroundColor = color.value.c1//给对象el的背景色赋值为红色 } });</script>//自定义局部指令var vm = new vue({ el:'', data:{ }, directives:{ color:{ inserted:function(el,c){ el.style.backgroundColor = c.value.c1 } } } })
计算属性 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁
//过去方法//使用计算属性<div>{{reserve}}</div>new Vue({ el:'', data:{ msg:"hello" }, cumputed:{ reserve:functtion(){//调用方法名reserve完成hello的字符串翻转 retuen this.msg.split('').reverse().join(''); } } })
计算属性与方法的区别 计算属性会基于依赖的数据存在缓存中,多次调用执行一次,若数据发生变化,则调用一次之后存在缓存当中;函数每次调用都会执行
过滤器 格式化数据,如将字符串首字母转换成大写,格式化时间日期
<div>{{msg | filt1 | fil2}}</div}//可同时使用两个过滤器<div :abc='msg | filt1 | filt2'>//v-bind也可以绑定过滤器 //两种创建过滤器的方法Vue.filter('filt3',function(val){ })new Vue({ el:'', data:{ msg:'hello' }, filters:{ filt1:function(val){ return val+'123' //显示结果为hello123 }, filt2:function(val){ return val+'456' //显示结果为hello456 } } })
侦听器 数据发生变化,即调用侦听器绑定的方法 应用在数据执行时异步的操作,或者是内存开销较大的操作
<div id="app"> <input type="text" name="" id="" value="" v-model="firstname"/> <input type="text" name="" id="" value="" v-model="lastname"/> <div >{{fullname}}</div> </div>new Vue({ el:'#app', data:{ firstname:'', lastname:'', fullname:'' }, watch:{ //侦听器监听data中的数据变化,数据发生变化则调用方法,并保存在缓存中 firstname:function(val){ }, lastname:function(val){ } } })
生命周期
响应式修改数组数据
vm.$set(vm.arr,id,值)Vue.set(vm.arr,id,值)
组件化开发思想 标准 分治 重用 组合
组件化规范: Web Components
组建注册
Vue.component('组件名称',{ data:'组件数据', template:组件模板内容}) <div id='#app'> <button-count></button-count> </div> Vue.component('button-count'{ data:function(){ return{ count:0 } }, template:'<button @click="addNum()">点击了{{count}}次</button>, methrods:{ addNum:function(){ this.count++ } } })
<div id='app'> <button-msg></button-msg></div>new Vue({ el:'#app', data:{ msg:'heollo' }, component:{ 'button-msg':buttonmsg, } })var buttonmsg={ data:function(){ return { this.msg } } template:'<div>{{msg}}</div>', }
命名方式 驼峰 -
如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件
注意
局部组件注册 只能在父组件中使用
全局组件注册语法
Vue调试工具用法
组件间数据交互
props属性值类型 字符串String 数值Number 布尔值Boolean 数组Array 对象Object 传递数据原则:单向数据流
子组件向父组件传值
<div id='app'> <div>{{msg}}</div> <btn-max @btn='handle($event)'></btn-max>//子组件通过固定形式的$event传值</div> Vue.component('btn-max',{ template:'<button @click="$emit('btn',5)"></button>'})new Vue({ el:"#app", data:{ }, methords:{ handle:function(val){ } } })
单独的事件管理中心管理组件间的传值 兄弟之间的信息传递
非父子组件的传值
子组件通过自定义事件向父组件传递信息,父组件监听子组件的事件
父组件向子组件传值
<div id='app'> <div>{{str1}}</div> //在父组件中通过给子组件绑定动态属性值的方式向子组件传递数据,子组件中可通过props接收值 <show-msg :info='str2'></div> //显示结果为 好好学习,天天向上---毛主席</div> Vue.component('show-msg',{ props:['info'],//通过props的形式接收父组件已属性的方式传递的值 data:function(){ return { str3:'毛主席' } }, template:'<div>{{info+"----"+str3}}</div>'})new Vue({ el:'#app', data:{ str1:'好好学习', str2:'天天向上' } })
组建插槽
基于组件的案例
本文为李乐童原创文章,转载无需和我联系,但请注明来自李乐童博客liletong.cn