vue及脚手架

在非脚手架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`
  }

 

 

 

 

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片