在非脚手架vue页面中页面加载时渲染的数据会闪烁，我们可以添加以下css来解决
[v-cloak] {
display: none;
}
脚手架开发时如何给每个页面设置标题呢?
下载安装依赖
npm install vue-wechat-title --save
在main.js引入插件
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
//路由文件中给路由定义meta属性
{
path: '/login',
component: Login,
meta: {
title: '用户登录'
}
}
//路由渲染时添加v-wechat-title
<router-view v-wechat-title="$route.meta.title" />
如何让css只在当前组件起作用
在当前组件style标签中添加 scoped
1.基本使用
new Vue({
el: '#box',//挂载点
data: {
//属性
},
methods: {
//方法
},
mounted() {
// 挂载完成
},
})
2.基本指令及作用
v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for=”字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容 （同angular中的ng-show） display:none
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）惰性加载
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?”red”:”blue”‘
3.监听与计算属性
Watch只能监听data中的数据变化，computed不需要，watch可以进行异步操作，computed不可以，computed不修改原始数据，通过return返回处理的数据，可以包含大量的逻辑运算
使用场景：
computed ：当一个属性受多个属性影响的时候就需要用到computed，最典型的例子： 购物车商品结算的时候
watch：当一条数据影响多条数据的时候就需要用watch，搜索数据，输入框 搜索框 聊天窗口（机器人） 数据的实时变化
4.常用表单修饰符
.number 将用户输入值转为数值类型 v-model.number
.trim 过滤首尾空白字符
.lazy 值与数据同步
5.生命周期
brforeCreate：创建之前el,data,methods,都为undefind
created：创建完成 data,methods初始化完成，el为undefind
beforeMount：挂载之前，el为加载标签，但是{{}}还在
mounted：挂载完成，页面完成
beforeUpdate：更新之前
updated：更新完成
beforeDestroy：销毁之前
destroyed：销毁完成
页面一加载触发了创建之前、创建、挂载之前、挂载这四个生命周期函数
6.创建组件
第一种局部创建组件
在vue实例中创建一个components方法 用来你注册组件 这里面可以创建多个组件
在组件中 有template模板 这个template模板要求 有且只能有一个根标签 建议用<div></div> 不写标签 template内容无法渲染
组件嵌套 你在哪个组件中应用该组件 就把这个组件注册到哪个组件中 一定要先注册后引用 否则你无法渲染 在注册的过程中引用的变量 必须是已经声明过的变量 记住js代码是从上到下执行的
第二种全局创建组件
调用Vue中component方法
Vue.component(组件名称，{组件相关的属性和方法}) 再单独创建一个全局组件自己的template模板
再哪一个组件中应用直接调用组件名称即可 不需要单独注册 因为它已经挂载到了Vue实例上
7.is的用法
第一个 解决固定搭配问题 比如 table 里面嵌套组件 可以写成 <tr is=’one’></tr>
第二个 动态组件切换
如果想实现两个组件之间内容的切换 我们可以选择这个方法
定义一个公共的变量 赋值的是组件名称
通过事件改变变量的值
写一个div 用:is（动态is）去渲染 组件
使用场景：改变html标签的默认规则，比如ul里放li，dl里放dt等，
动态切换组件：<component v-bind:is=”currentView”></component>
特殊嵌套：
<table>
<tr is=”my-row”></tr>
</table>
<div :is='show'></div>
//......
<script>
import bottomTab from './bottomtab'
import userNo from './userno'
import userLogin from './userlogin'
export default {
data(){
return{
show:'userNo'
}
},
methods:{},
mounted(){
if(sessionStorage.getItem('userId')){
this.show='userLogin'
}else{
this.show='userNo'
}
},
components:{
bottomTab,
userNo,
userLogin
}
}
</script>
8.脚手架
1.安装webpack
npm install webpack -g
2.安装vue-cli
npm install vue-cli -g
3.初始化一个vue项目
vue init webpack demo
4.进入文件夹
cd demo
5.运行
npm run dev
9.路由
vue-router 是什么？ 它有哪些核心的组件
vue-router 是vue的核心插件
<router-link></router-link>
<router-view></router-view>
路由模式
vue-router默认hash模式 —使用url的hash来模拟一个完整的url，当url改变时，页面不会重新加载
如果不想要很丑的hash，我们可以用路由的history模式
const router = new VueRouter({
mode:'history',
routes:[]
})
路由重定向
{//重定向
path: '*',
redirect: '/index/rec'
}
路由嵌套
//一级路由
{
path: '/detail',
component: Detail
},
//二级路由
{
path: '/index',
component: Index,
children: [
{
path: 'rec',
component: Recommend
},
]
},
编程导航
编程式导航进行跳转路由
router.push() 向历史记录中添加一条记录
push()写法
① 直接跳转路径 不携带参数
push(‘/路径’)
② 跳转路径 带参数
push(‘/路径?query=’+ 值)
③跳转路径 带参数
push({
path:’/路径’,
query:{
id:id
}
})
router.replace() 替换当前的历史记录
与push() 一样
router.go(n) n 代表前进或者后退的步数 一般写-1 上一条记录
query取值方法
$route.query.名字
动态路由
动态params
动态路由如何配置
第一步 在路由中配置动态路由
比如： {
path:’/foodD/:id’,
component:FoodD
},
第二步
声明式
如果是router-link 标签跳转
<router-link :to=”‘/foodD/’+item.id”>
编程式
① this.$router.push(‘/foodD/’+n)
//replace 写法一模一样
② this.$router.push({
name:’foodD’,
params:{
//a:n
id:n
}
})
第三步取值 $route.params.id
路由的过渡动效
首先安装 animate库
npm install animate
路由切换的时候：
<transition enter-active-class=”animated bounceInLeft”>
<router-view/>
</transition>
路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
路由懒加载的两种方式
第一种 const Index(组件名称) = ()=>import(‘组件的地址’)
第二种 运用 promise方法
const Index(组件名称) = （）=> Promise.resolve(import(‘组件的地址’))
10.axios
axios是基于promise的http库 可以用于浏览器和node.js
axiso then 里面拦截的是http：200 成功的回调
200中 比如密码错误登录失败 删除失败等等 这个都是业务逻辑错误 后端会返给前端 code值 成功的时候 可能是0
catch 里面拦截的是 http错误状态码
//引入 import axios from 'axios' Vue.prototype.$axios = axios
详细方法还请看axios中文文档
如果是post方式我们还需要引入qs，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库（get方式可以不用安装qs）
npm install qs
//引入 import qs from "querystring";
//使用
this.$axios({
url: api.captcha,
method: "post",
data: qs.stringify({
username: this.username
})
})
//.....
调取接口 如果出现以下问题：
/* Access to XMLHttpRequest at ‘https://www.osuu.net’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. */
代表当前接口有跨域问题
那么我们需要解决跨域问题 config – index.js
比如
proxyTable: {//本地解决跨域
'/api':{
target:'https://www.osuu.net',//目标地址(要解决的目标)
changeOrigin:true, //改变起源
pathRewrite:{
'^/api':'https://www.osuu.net'
}
}
},
配置完成之后 重启服务器
11.常用导航钩子函数
第一 全局守卫
前置守卫
router.beforeEach((to,from,next)=>{
//判断是否已登录 判断flag是否存在 存在的时候 继续执行 否认强制跳转到登录页面
if (sessionStorage.getItem('token') || to.path == '/login') {
next()
} else {
next('/login')
}
})
后置守卫
router.afterEach((to,from)=>{
//.....
})
第二个 路由独享守卫
{
path: '/forget',
component: Forget,
beforeEnter:(to,from,next)=>{
if (sessionStorage.getItem('token')) {
next()
} else {
next('/login')
}
},
},
第三个组件级别守卫
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
暂无评论内容