vue基础
v-if和v-show的区别
- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-html
v-html谨慎使用，容易被攻击，尤其表单提交不要用，保证页面安全性。
v-model三个修饰符
.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。
v-bind
v-bind:src="",缩写：src
其他内部指令
v-pre:直接输入原始值，v-cloak:页面都渲染完成后再显示，v-once:只渲染一次，不改变
vue全局变量
全局变量，简单的来说就是在构造器外部用Vue提供给我们的API函数来定义新的功能。
自定义标签v-directive
自定义标签的三个参数
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
自定义标签的五个生命周期
1.bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2.inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3.update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5.unbind:只调用一次，指令与元素解绑时调用。
bind:function(){//被绑定
console.log('1 - bind');
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('5 - unbind');
}
vue.set
由于Javascript的限制，Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时，vue不会为我们自动更新。
当你修改数组的长度时，vue不会为我们自动更新。
vue的生命周期
beforeCreate:function(){
console.log('1-beforeCreate 初始化之后');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted 被创建');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
activated:function(){
console.log('7-activated');
},
deactivated:function(){
console.log('8-deactivated');
},
beforeDestroy:function(){
console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){
console.log('10-destroyed 销毁之后')
}
组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。
propsData Option 全局扩展的数据传递
propsData三步解决传值： 1.在全局扩展里加入props进行接收。propsData:{a:1} 2.传递时用propsData进行传递。props:[‘a’] 3.用插值的形式写入模板。
作用：在单页应用中保持状态和数据的。
Mixins一般有两种用途：
1.在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2.很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
路由
vue-router入门
第一步，在src/components目录下新建 Hi.vue 文件
第二步，修改index.js里面路由配置,
引入 Hi组件：我们在router/index.js文件的上边引入Hi组件,
增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hi',
name: 'hi',
component: hi
}
]
})
- router-link制作导航
在 src/App.vue文件中的template里加入下面代码，实现导航
<p>导航 ：
<router-link to="/">首页</router-link>
<router-link to="/hi">Hi页面</router-link>
</p>
vue-router配置子路由
- 第一步，建立hi1,hi2页面
- 第二步，修改index.js路由配置，
注意children:与后面内容加空格，children下的path值不能加 ' / ',
import引入模板，
代码如下：
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hi',
name: 'hi',
component: hi,
children: [
{
path: '/hi',
name: 'hi',
component: hi
},
{
path: 'hi1',
name: 'hi1',
component: hi1
},
{
path: 'hi2',
name: 'hi2',
component: hi2
}
]
}
]
})
- 第三步，hi.vue增加代码
<router-view></router-view>
- 第四步，app.vue增加代码
<router-link to="/hi/hi1">-Hi页面1</router-link>
<router-link to="/hi/hi2">-Hi页面2</router-link>
vue-router传参
- 传递name参数，直接在模板中写
<p>$route.name</p>
- 通过标签中的to进行传参，最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.,语法如下：
<router-link :to="{name:xxx,params:{key:value,key:value}}">valueString</router-link>
name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形式，在对象里可以传递多个值。
单页面多路由区域操作
app.vue里面可以有多个<router-view ></router-view>，代表页面内的多个模块，配置路由注意component字段变成components
vue-router 利用url传递参数
:冒号的形式传递参数 我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定，:后面是参数的名称,参数名称后面的括号内是正则表达式。 -. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
}
在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。
<router-link to="/params/198/jspang website is very good">params</router-link> |
在页面中通过插值的形式获取参数值，eg
{{$route.params.newsId}}
重定向
- 只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。
export default new Router({
routes: [
{
path: '/',
component: Hello
},{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goback',
redirect:'/'
}
]
})
- 重定向时传递参数,我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了,之后在模板正常接收就可以了
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}
alias别名
在index.js文件下给需要的模板起一个别名，
{
path: '/hi1',
component: Hi1,
alias:'/jspang'
}
起过别名之后，可以直接使用<router-link>标签里的to属性，进行重新定向。
redirect和alias的区别
redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。
注意：别名请不要用在path为’/’中，如下代码的别名是不起作用的。
{
path: '/',
component: Hello,
alias:'/home'
}
路由的过渡动画
需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。
<transition name="fade" mode="out-in">
<router-view ></router-view>
</transition>
css过渡类名： 组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：
fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
过渡模式mode：
in-out:新元素先进入过渡，完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
mode的设置和404页面的处理
1.mode有两个值，可以在index.js下面修改
export default new Router({
mode: "history",
routes: [
{
path: '/',
component: HelloWorld
}
]
})
history:像普通url一样，不带#
hash:有#
2.404页面设置
在路由器配置文件index.js下面修改
{
path:'*',
component:Error
}
路由中的钩子
有两种写法
- 在/src/router/index.js中写，只有一种
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
},
- 在模板中写
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}
三个参数：
to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数，常用的有next(true)和next(false)。
编程式导航
<script>
export default {
name: 'app',
methods:{
//返回上一级
goback(){
this.$router.go(-1);
},
//下一级
goGo () {
this.$router.go(1)
},
//随便跳转到其他页面，用push('/路径')
gosuiji () {
this.$router.push('/error')
}
}
}
</script>
