Vue学习
一、Vue基础指令
-
插值表达式 {{msg}} 直接读取data中的数据
-
v-cloak 用法:直接在标签上加v-cloak属在css中设置[v-cloak]{ display: none;}
-
V-text 用法:v-text=“msg” 读取data中的msg属性的值,会覆盖标签里面的内容,不会渲染标签,还是以字符串的形式渲染出来
-
V-html 用法:v-html=“msg2” 读取data中的msg2属性的值,会覆盖标签里面的内容,渲染会msg2中的标签
-
V-bind 用法v-bind:title=“myTitle” 读取data中的mytitle 并设置title=”myTitle”,可省略v-bind 直接写为:title
-
V-on 用法 v-on:click=“go” 读取methods 中的go方法 可简写为@click=“go” 可以在click后面加上
事件修饰符 用法 @click.prevent=“go” 如下
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
键盘修饰符: 用法和事件修饰符一样(可以自定义键盘修饰符)
.enter .tab .delete（捕获“删除”和”退格“键）.esc .space .up .down .left .right -
V-model 用法 v-model=“result” 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 且只能用在input(radio, text, address, email…) select checkbox textarea 这一类的表单元素中
-
v-bind:class简写为:class 注意在使用的时候 双引号里面的必须是字符 串,否者为变量,会到data中去寻找;
用法① :class="[‘red’, ‘thin’]" 数组中使用
用法② :class="[‘red’, ‘thin’, isactive? ‘active’:’’]" 使用三元表达式 isactive 不加引号是变量
用法③ :class="[‘red’, ‘thin’, {‘active’: isactive}]" 数组中套对象
用法④ :class="{red:true, italic:true, active:true, thin:true}" 直接使用对象 或者直接使用变量,在data中定义这个变量的值为这个对象
用法⑤ :class="‘red’" 一个的时候直接在双引号内部加单引号 作为字符 串 -
V-bind:style 简写为:style 使用方法与class大致一致
用法① :style="{color: ‘red’, ‘font-size’: ‘40px’}" 对象的形式书写
用法② :style=“h1StyleObj” 变量的方式data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } }用法③
:class="[h1StyleObj,h1StyleObj2]"引用多个对象 -
V-for
用法①v-for="(item,i) in list"item是每一项中的数据 i为索引 list是data中的数据(普通数组)
实例:索引值是:{{i}}----每一项是:{{item}}
用法② v-for="(item,i) in list" item是每一项中的数据 i为索引 list是data中的数据(对象数组)
实例:id:{{item.id}}-----name:{{item.name}}---索引为:{{i}}
data:{ list:[ {id: 1, name: 'zs'}, {id: 2, name: 'ls'}, {id: 3, name: 'ww'}, {id: 4, name: 'zl'} ] }用法③ v-for 循环对象
实例:键是:{{key}}---值是:{{value}}-----索引为:{{i}}
data:{ user:{ id:1, name:'zs', age:18 } }用法④ 迭代数字用法:
这是第 {{ count }} 次循环
注意:v-for 循环的时候，key 属性只能使用 number或者string -->
key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
例如:复选框选择的时候,如果不设置key,新添加一组的时候,会导致勾选之后有bug(√的不是之前√的) -
v-if和v-else 用法: v-if=“flag” v-else=“flag”
如果flag为true则执行前面的,否则执行v-else中的 -
v-if与v-show 用法: v-if=“flag” v-show=“flag”
- 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
- v-if 的特点：每次都会重新删除或创建元素
- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
- 可以直接后面传入布尔类型值或者表达式
- vue中提供的标签
component(组件占位符,用来展示组件), template(组件模板), transition(单个动画), transitionGroup(多个动画)
二、Vue中的方法
-
可以在方法后面直接传递参数
用法: @click.prevent=“del(item.id)”
这里可以传递事件源参数 $event 在methods可以用形参来接收这个事件源参数e -
过滤器
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示 |
html中: {{item.ctime | dataFormat(‘yyyy-mm-dd’)}}
上面的dataFormat为过滤器名称
js中定义过滤器:
全局过滤器的定义:
Vue.filter(‘过滤器名称’, function(data[,msg]){ })
函数中第一个参数 data 是管道符前面的数据 已经被规定死了
在html的过滤器名称后面可以传参数,传递的参数可以在function的形参中接收,msg为形参 'yyyy-mm-dd’为实参 (参数可以传递多个)
函数的返回值(return)将会在html中渲染私有(局部)过滤器的定义:
filters: 同为new Vue({ }) 里面的参数,与data,methods同级
私有过滤器中可以定义多个,
用法:
filters:{
dataFormat:function(data[,msg]){ },
dataFormat2:function(data[,msg]){ }
}过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器 名称一致了，这时候 优先调用私有过滤器.
在一个位置可以使用多个过滤器 过滤器从前往后执行,执行完第一个过滤器,把返回值作为第二个过滤器的data
实例:{{ dt | dateFormat | dataFormate2}} -
自定义键盘修饰符
Vue.config.keyCodes.f2 = 113 113位键盘码值 -
自定义指令
自定义全局指令Vue.directive() 与过滤器相同
参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,
参数2 : 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段， 执行相关的操作
常用钩子函数有:
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
用法:Vue.directive('focus', { bind: function (el) { el.focus() (不会触发) }, inserted: function (el) { el.focus() }, updated: function (el) { } })
注意:
- 和样式相关的操作，一般都可以在 bind 执行 和JS行为有关的操作，最好在 inserted 中去执行，防止 JS行为不生效 元素还在内存没有渲染到dom树中时,就可以设置属性了,但是事件在内存中执行了,在dom中就看不见,需要在插入dom树中后才能执行 例如focus
bind:function(el,binding){}
- el 是指令所绑定的元素，可以用来直接操作 DOM
- binding 一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
自定义私有指令 : 与过滤器一致
directives:{
'fontweight':function (el, binding) {
el.style.fontWeight=binding.value
},
'fontsize':{
bind:function (el, binding) {
el.style.fontSize = binding.value + 'px'
}
}
}
注意: 如果在bind 和 update中触发行为,可以省略对象,直接后面接处理函数 如上述的 fontweight;
指令名称如果驼峰命名 fontWeight 则需要在html中书写成v-font-weight
-
生命周期函数
①beforeCreate 刚初始化了一个Vue空的实例对象,这时候,对象身上,只有默认的一些生命周期函数和默认的时间,其它的东西都未创建
注意: 在beforeCreate生命周期函数执行的生活,data和methods中的 数据还没有被初始化
②created 在created中,data和methods都已经被初始化好了!如果要调用methods的方法或者操作data中的数据,最早,只能在created中操作
③beforeMount 此函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时,页面还是旧的
④mounted 将内存中编译好的模板真实 的替换到浏览器的页面中去,整个vue实例化完毕,组件脱离创建阶段,进入到运行阶段
⑤beforeUpdate 页面中显示的数据还是旧的,但是data中的数据已经更新了
⑥updated data与页面已经同步,都是最新的
⑦beforeDestory Vue实例已经从运行阶段,进入到了销毁阶段,实例上的data和methods过滤器,指令都处于可用状态,还没有真正的校徽
⑧destroyed 全部销毁 -
vue-resource的使用
① 请求方式的用法get(url,[config]) head(url,[config]) delete(url,[config])
jsonp(url, [config]) post(url, [body], [config])
put(url,[body], [config]) patch(url, [body], [config])② 用法post get jsonp
this.$http.get('url').then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
this.$http.post('url', {数据}, { emulateJSON: true }).then(result => {
})
手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
第一个参数： 要请求的URL地址
第二个参数： 要提交给服务器的数据 ，要以对象形式提交给服务器 { name: this.name }
第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result =>
})
③ 请求数据注意事项
在methods中定义的方法需要调用,可用在生命周期函数created中调用,beforeCreate中,data与methods还没有初始化,不能调用.
④ 全局配置数据接口的根域名
用法: Vue.http.options.root = ‘http://vue.studyit.io/’;
如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /
⑤全局启用 emulateJSON 选项
用法: Vue.http.options.emulateJSON = true;
- Vue中的动画
①vue中的过度类名实现动画
用法: 在css中定义如下 单个动画的标签用transtion包裹
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
html中:
这是一个H3
vue实例的data中定义 flag=false
点击按钮,使flag的值发生改变
1)v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2)v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3)v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4)v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5)v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6)v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
②. 自定义-v前缀
用法: 在transition标签中添加name属性
这是一个H6
此时,在css中的v-enter就可以更改为my-enter
③. 使用第三方animate.css
用法: 在transition中添加enter-active-class和leave-active-class属性
class值是动画的名字,可以在animate中查看动画名
这是一个H3
必须带上animated这个class类名 需要写在上述位置或在动画元素身上 加上class类名 animated
:duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场 的时长;只设置一个值表示进场出场时间都是 :duration=" 200"
④. 钩子函数实现半场动画
在html中定义事件以及事件的处理函数名
在js的methods中写出对应的处理函数
methods: {
beforeEnter(el){
el.style.transform="translate(0,0)";
},
enter(el,done){
el.offsetWidth;
el.style.transform="translate(150px,450px)";
el.style.transition='all 1s ease';
done()
},
afterEnter(el){
this.flag=!this.flag
}
}
- done 为第三个处理函数,必须得在第二个处理函数结束之后立即调用done()方法. 如果不调用,第三个处理函数有延时,过一会才调用.
- 必须在动画的过程中设置el.offsetWidth 等属性,这个属性会通知浏览器重新计算元素的宽度，这样，会造成浏览器重绘.
- 每次执行动画,小球都会冲beforeEnter开始执行,每次小球结束在结束位置隐藏,每次开始执行,beforeEnter执行,瞬间到起始位置.
- 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 组件中的多个元素设置 key 是一个更好的选择。
⑤ transition-group 实现列表动画
在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup
.v-move {
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
- 如果要实现离开的动画的时候,下方元素向上缓慢飘上去,需要加上上述属性.固定用法;
- 加上absolute的时候,会使落下的时候,宽度变小,需要设置元素的宽度,如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性;
- {{item.id}} --- {{item.name}}
appear 可以使列表出现的时候缓慢上升,tag可以指定渲染的元素名字
- 组件的学习
1)组件的定义
a.使用 Vue.extend 配合 Vue.component 方法：
2)components定义私有组件var login = Vue.extend({ template: 'hello world
' }); Vue.component('login', login); b.直接使用 Vue.component 方法： Vue.component('register', { template: 'hello world
' }); c.将模板字符串，定义到script标签中 同时，需要使用 Vue.component 来定义组件： Vue.component('account', { template: '#tmpl' }); d.组件的名称如果在定义的时候使用驼峰命名法,在调用的时候要用-分开
a.与filters directives 相同
b.用法:components: { // 定义实例内部私有组件的 login: { template: '#tmpl2' } }
3)组件中的data与methods
a. 组件中的data必须是函数,切数据是函数的返回值,并且返回值必须是对象,data中的数据的使用方法与实例中的data用法一样
b. 如果返回值是一个变量,在多次请求数据的时候,会相互影响数据,而返回值为对象,则相当于新每次都新创建了一个对象,都指向一个新的对象的地址,不相互影响
4)组件的切换
用法:
Vue提供了 component ,来展示对应名称的组件
此处的comName遵循Vue语法 comName为变量 会在实例的data中查找这个变量,如果需要直接使用组件名称需要加单引号
切换动画 可以直接包裹在transition中 与普通动画一致. 可以设置mode属性 ‘out-in’ 先出去,然后再做进入的动画
5)父组件向子组件传值
a. 默认的子组件中,无法访问到父组件中的data和methods中的方法
b. 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用;
例如:v-bind:parentmsg=“msg” 把父组件data中的msg的值传递给了parentmsg属性中
c. 需要在子组件中定义props:[]素组中定义parentmsg
props:[‘parentmsg ’]
d. 然后再通过vue的语法在html中访问parentmsg
e.props中的数据不建议更改,更改会报错
f. 子组件中的data数据可读可写
6)父组件向子组件传事件和方法
a. 需通过事件绑定(v-on:)的形式.把需要传递给子组件的方法,以事件属性的形式传递给子组件内部,供子组件使用;
例如:v-on:func=“show” 把父组件methods中的show方法传递给了func属性中
b. 然后在子组件中,this指的是当前这个组件的实例对象 component Vue提供了一个 e m i t ( ) 方 法 通 过 t h i s . e m i t ( ) 进 行 调 用 emit()方法 通过this.emit()进行调用 emit()方法通过this.emit()进行调用emit()第一个参数为父组件传递的事件属性的名称(func) 后面的参数为数据,可以传递多个
用法: this. e m i t ( ′ f u n c ′ , 123 ) c . 在 子 组 件 中 调 用 子 组 件 的 方 法 , 子 组 件 方 法 中 的 t h i s . emit('func',123) c. 在子组件中调用子组件的方法,子组件方法中的 this. emit(′func′,123)c.在子组件中调用子组件的方法,子组件方法中的this.emit(‘func’)方法同时触发父组件的show方法,从而实现父组件向子组件传事件和方法
7)子组件向父组件传递数据方法
a. 父组件向子组件传递方法的时候,在this. e m i t ( ) 中 可 以 传 递 参 数 , 后 面 的 参 数 可 以 用 t h i s 访 问 到 子 组 件 的 d a t a 数 据 和 m e t h o d s b . 在 子 组 件 中 的 方 法 : t h i s . emit()中可以传递参数,后面的参数可以用this访问到子组件的data数据和methods b. 在子组件中的方法: this. emit()中可以传递参数,后面的参数可以用this访问到子组件的data数据和methodsb.在子组件中的方法:this.emit(‘func’,this.sonshow)
sonshow 为methods中的函数名
this.$emit(‘func’,this.sonshow,this.name)
this.name 是data中的name属性
c. 通过上述方法完成了子组件向父组件传递数据和方法
8)使用ref获取DOM元素和组件引用
在html中 元素或者组件上设置ref属性
这是一个大大的H1
可以通过this.$refs.myh1 获取到当前元素
组件中
- 路由的学习 vue-router
1)路由的基本使用
a.在html中引用vue-router包
b.js中:var router=new VueRouter({ })
创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter;
c.组件模板对象(component):
var login = {
template: '登录组件
'
}
var register = {
template: '注册组件
'
}
d.在 new 路由对象的时候，可以为 构造函数，传递一个配置对象 routes routes是一个数组 里面都是路由规则对象
路由规则对象中必须有两个属性
属性1: 是 path， 表示监听 哪个路由链接地址；
属性2: 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
component 的属性值，必须是一个 组件的模板对 象， 不能是 组件的引用名称
routes:[
{ path: '/', redirect: '/login' }, //用alias:’/’也可以解决
{ path: '/login', component: login, alias:'/' },
{ path: '/register', component: register },
{path:'*',component:login}
]
上述中 redirect是重定向 重定向到’login’
alias指别名 可以使用/就是/login
解决了跳转到没有定义到的地址的情况
vue中的路由是基于hash来跳转的 a标签使用需要加#(锚点)
e. 在Vue实例中挂载router(与data同级):
将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化
router: routerObj
f. 在导入vue-router包之后,html地址栏会自动多#/,在html结构中需要放容易 router-view 标签 是一个占位符
2)router-link的使用
用法:登录
router-link默认渲染为一个a 标签 属性to中放去的地址,里面不需要加#
3)路由高亮的两种方法
①. 给.router-link-active这个类名添加css属性
②. 在new路由对象的时候,配置routes的同时,配置likActiveClass
linkActiveClass:‘myactive’
在css中就可以使用myactive这个类名来设置了
4)路由传递参数的两种方式
html中:
①登录
②注册
{ path: '/login', component: login },
{ path: '/register/:id', component: register }
// 可以在组件中,通过this.$route.query.id 得到id的值
var login = {
template:'登录{{$route.query.id}}{{ $route.query.name }}
',
data(){
return {
msg: '123'
}
},
created(){ // 组件的生命周期钩子函数
console.log(this.$route.query.id)
}
}
组件的模板template中也可以通过{{$route.query.id}}访问到值,前面this就可以省略了,也可以在组件中,通过this.$route.query.id 得到id的值
通过params得到第②中方式传递的值,必须在定义路由的时候,定义为 /:id 这种形式,表示’/’后面传递的是一个参数,其它用法与query相同;
5)路由嵌套
路由规则对象中,除了path和component属性外,还可以传入一个children,children也是一个数组,里面也是路由规则对象,用法与routes相同;html中 如下访问:
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
}
使用 children 属性，实现子路由，同时，子路由的 path 前面， 不要带 / ，否则永远以根路径开始请求，这样不方便我们用户 去理解URL地址
登录
注册
6)命名视图
用法:
html中:给router-view 添加name属性,router-view则会在路由规则对象中,查找name为对应名字的组件,name中的是字符串,不是变量
7)watch属性(与data,methods同级)
watch属性可以监视data中指定数据的变化,当数据发生改变的时候,就会触发这个watch里面相应的处理函数;
函数中有两个参数,第一个是新的data值,第二个为旧的data值;
用法:
watch:{
firstname:function(newval,oldval){
console.log(‘数据改变了’)
}
}
//watch监听路由地址的改变: $route.path 可以获取到路由参数,只需要在watch中监听这个数据,就可以监听到路由地址的改变,前面不带this.
watch:{
'$route.path':function (newVal,oldVal) {
console.log(newVal+'----'+oldVal);
if(newVal==='/login'){
console.log('欢迎进入登录页面')
}else if(newVal==='/register'){
console.log('欢迎进入注册页面')
}
}
}
8)computed
在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】
注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性 的值
注意3： 计算属性的求值结果，会被缓存起来，方便下次直接 使用； 如果 计算属性方法中，所以来的任何数据，都没有发生 过变化，则，不会重新对 计算属性求值；
注意4: 能用computed则用computed;监听路由 必须使用watch;