精华内容
下载资源
问答
  • vue安全问题 1使用csrf-token 2axios互传数据监听数据,并在axios跨域配置中判断origin axios.get(’/user’, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function ...

    vue安全问题
    1使用csrf-token
    2axios互传数据监听数据,并在axios跨域配置中判断origin
    axios.get(’/user’, {
    params: {
    ID: 12345
    }
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });
    4跳转路径安全守卫设置

    打包上线问题
    1上线部署npm run build
    前期准备
    基础版
    config/index.js中增加

    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: true,
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
      }
    

    /
    进阶版
    1配置 resolve.modules
    优化原理
    (1)webpack 的 resolve.modules 是用来配置模块库(即 node_modules)所在的位置。当 js 里出现 import ‘vue’ 这样不是相对、也不是绝对路径的写法时,它便会到 node_modules 目录下去找。
    (2)在默认配置下,webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules,且是在项目根目录。为了减少搜索范围,我们可以直接写明 node_modules 的全路径。
    build/webpack.base.conf.js

    ...
    module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        modules: [
          resolve('src'),
           resolve('node_modules') 
        ],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
    ...
    

    2配置装载机的 include & exclude
    (1)webpack 的装载机(loaders)里的每个子项都可以有 include 和 exclude 属性:
    include:导入的文件将由加载程序转换的路径或文件数组(把要处理的目录包括进来)
    exclude:不能满足的条件(排除不处理的目录)
    (2)我们可以使用 include 更精确地指定要处理的目录,这可以减少不必要的遍历,从而减少性能损失。
    (3)同时使用 exclude 对于已经明确知道的,不需要处理的目录,予以排除,从而进一步提升性能。
    build/webpack.base.conf.js 文件

    ...
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig,
          include: [resolve('src')],
          exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src')],
          exclude: /node_modules/
        },
    ...
    

    要配置切割我们需要一个插件CommonsChunksPlugin;
    (1)默认情况下 webpack 使用 UglifyJS 插件进行代码压缩,但由于其采用单线程压缩,速度很慢。
    (2)我们可以改用 webpack-parallel-uglify-plugin 插件,它可以并行运行 UglifyJS 插件,从而更加充分、合理的使用 CPU 资源,从而大大减少构建时间。

    npm i webpack-parallel-uglify-plugin -D
    

    build/webpack.prod.conf.js 文件
    //仅含第三方插件
    const ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin’);

    ....
        // 删掉webpack提供的UglifyJS插件
        //new UglifyJsPlugin({
        //  uglifyOptions: {
        //    compress: {
        //      warnings: false
        //    }
        //  },
        //  sourceMap: config.build.productionSourceMap,
        //  parallel: true
        //}),
        // 增加 webpack-parallel-uglify-plugin来替换
        new ParallelUglifyPlugin({
          cacheDir: '.cache/',
          uglifyJS:{
            output: {
              comments: false
            },
            compress: {
              warnings: false
            }
          }
        }),
    

    4使用 HappyPack 来加速代码构建
    (1)由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的事情只能一件一件地做,不能多件事一起做。
    (2)而 HappyPack 的处理思路是:将原有的 webpack 对 loader 的执行过程,从单一进程的形式扩展多进程模式,从而加速代码构建。
    npm i happypack os -D
    打开 build/webpack.base.conf.js

    const HappyPack = require('happypack');
    const os = require('os');
    const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
            loader: 'happypack/loader?id=happyBabel',
            include: [resolve('src')],
            //排除node_modules 目录下的文件
            exclude: /node_modules/
          },
        ]
      },
      plugins: [
        new HappyPack({
            //用id来标识 happypack处理那里类文件
          id: 'happyBabel',
          //如何处理  用法和loader 的配置一样
          loaders: [{
            loader: 'babel-loader?cacheDirectory=true',
          }],
          //共享进程池
          threadPool: happyThreadPool,
          //允许 HappyPack 输出日志
          verbose: true,
        })
      ]
    }
    
    展开全文
  • vue 路由安全守卫

    千次阅读 2019-02-12 21:43:49
    Tab.vue组件中: 由于不能直接获取到data中的name,所以要用一个箭头函数vm=> data() { return{ name:'小羽' } }, //进入时获取用户名 beforeRouteEnter:(to,from,next)=>{ //alert('hello'+this....

    全局守卫效果:

    1 点击登陆或者注册按钮,跳转至相应登陆或者注册页面

    2 点击导航其他按钮,提示用户未登陆不能跳转,然后默认返回登陆页面

    全局守卫代码:

    index.js的路由配置:

    const router = new Router({
      routes: []
    })

    main.js页面:

    to是要去的页面,from是要离开的,next是个函数,否则就展示哪个页面

    router.beforeEach((to,from,next)=>{
    
      //判断store.gettes.isLogin ===false
      if(to.path == '/linklogin'|| to.path =='/register'){
        next();
      }else{
        alert("还没有登陆,请先登陆")
        next('./linklogin');
      }
    })

     

    路由独享守卫效果1:

    1.其他页面都可访问

    2.先提示用户不能访问此页面

    3.不展示此页面

    路由独享守卫第一种代码:

    index.js路由配置中:

     {
          path: '/Tab',
          name: 'Tab',
          component: Tab,
          beforeEnter: (to, from, next) => {
         
            alert("非登陆状态,不能访问此页面");
            next(false)
          
          }
        },

     

    路由独享守卫效果2:

    1.如果用户不是登陆或者注册状态,点击访问此页面,先提示用户不能访问需要登陆

    2.再跳转至登陆页面

    路由独享守卫第二种代码:

    index.js下

    {
          path: '/Tab',
          name: 'Tab',
          component: Tab,
          beforeEnter: (to, from, next) => {
          
            if (to.path == '/linklogin' || to.path == '/register') {
              next();
            } else {
              alert("还没有登陆,请先登陆")
              next('./linklogin');
            }
          }
        },

     

    组件内部守卫效果1:

    1.用户点击导航xx页面,弹出欢迎xx用户

    2.进入页面

     

    组件内部守卫代码1:

    Tab.vue组件中:

    由于不能直接获取到data中的name,所以要用一个箭头函数vm=>

    data() {
             return{
                name:'小羽'
              }
            },
    
          //进入时获取用户名
            beforeRouteEnter:(to,from,next)=>{
                //alert('hello'+this.name);
              next(vm=>{
                alert("Hello " +vm.name);
              })
    
            },

     

    组件内部守卫效果2:

    1.用户离开此页面时,弹窗询问用户是否要离开

    2.用户点击确认,离开

    3.点击取消,留在此页面

    组件内部守卫代码2:

    Tab.vue组件中:

    export default {
    beforeRouteLeave(to,form,next){
        if(confirm("确定离开吗?")==true) {
          next()
        }else{
          next(false)
        }
    },
    }

     

    展开全文
  • vue-kindergarten, 为 Vue,Vuex,Vue路由器和Nuxt提供模块化安全 kindergarten幼儿园 简介幼儿园是一个用于 VueJS 2.0的插件,它将幼儿园插件集成到你的VueJS应用程序中。 它可以以帮助你在非常模块化的方式下授权...
  • Vue

    2019-11-07 09:13:42
    1. 样式绑定 1.1 class绑定 使用方式:v-bind:class=“expression” expression的类型:字符串、数组、对象 1.2 style绑定 v-bind:style=“expression” expression的类型:字符串、...Vue通过由点(.)表示的指令后缀...

    demo1.html

    1. 样式绑定

    1.1 class绑定
    使用方式:v-bind:class=“expression”
    expression的类型:字符串、数组、对象

    1.2 style绑定
    v-bind:style=“expression”
    expression的类型:字符串、数组、对象

    2. 事件处理器

    事件监听可以使用v-on 指令

    2.1 事件修饰符
    Vue通过由点(.)表示的指令后缀来调用修饰符,

      .stop
      .prevent
      .capture
      .self
      .once 
     
      <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>1:什么是事件冒泡?
           见“事件冒泡模型.png” 
    

    demo2.html
    2.2 按键修饰符

     Vue允许为v-on在监听键盘事件时添加按键修饰符:
    
      <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit">
    
      Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">
    
      全部的按键别名:
      .enter
      .tab
      .delete (捕获 "删除""退格")
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta      
    

    – demo3.html

    3. vue表单

    用v-model指令在表单控件元素上创建双向数据绑定

    3.1 常用控件
    文本框/密码框/文本域/隐藏域

       单选复选框/多选复选框
    
       单选按钮
    
       下拉框
    

    3.2 修饰符
    .lazy
    默认情况下, v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步

       .number
       将用户的输入值转为 Number 类型
    
       .trim
       自动过滤用户输入的首尾空格
    

    注1:H5提供的新方法
    JSON.parse():只能解析json形式的字符串变成json,安全性高一些
    JSON.stringify():json转换为字符串,解析的时候会自动加上引号

    – demo4.html

    4. 自定义指令

    除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令,根据作用范围又分为:全局指令/局部指令

         
       Vue.directive("focus",{});//全局指令
    
       new Vue({
         el:"#d1",
         directives:{//局部指令
           focus:{}
         }
       });   
    

    下面的内容直接百度或查API即可
    指令定义函数提供了几个钩子函数用来帮助实现功能(可选)
    bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
    inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
    update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
    componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
    unbind: 只调用一次, 指令与元素解绑时调用。

    钩子函数的参数有
    el: 指令所绑定的元素,可以用来直接操作 DOM 。
    binding: 一个对象,包含以下属性:
    name: 指令名,不包括 v- 前缀。
    value: 指令的绑定值, 例如: v-my-directive=“1 + 1”, value 的值是 2。
    oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” , expression 的值是 “1 + 1”。
    arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
    modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
    vnode: Vue 编译生成的虚拟节点。
    oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

    – demo5.html

    5. vue组件

    5.1 组件简介
    组件(Component)是Vue最强大的功能之一
    组件可以扩展HTML元素,封装可重用的代码
    组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

    5.2 全局和局部组件
    全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
    局部组件: new Vue({el:’#d1’,components:{…}})

      注册后,我们可以使用以下方式来调用组件: 
      <tagName></tagName>
    

    5.3 props
    props是父组件用来传递数据的一个自定义属性。
    父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 “prop”

    注1:因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods
    以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

    注2:当我们定义这个 组件时,你可能会发现它的data并不是像这样直接提供一个对象
    data: {
    count: 0
    }

        取而代之的是,一个组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
    
      data: function () {
          return {
            count: 0
          }
        } 
    
    注3:定义组件名的方式有两种
         短横线分隔命名(建议使用) 
         Vue.component('my-component-name', { /* ... */ }),引用方式:<my-component-name>
    
         首字母大写命名
         Vue.component('MyComponentName', { /* ... */ }),引用方式: <my-component-name>和<MyComponentName>都是可接受的   
    
    注4:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,
         camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
         props: ['postTitle'],<my-tag post-title="hello!"></my-tag>
    
    注5:props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
    
         希望每个 prop 都有指定的值类型
    
    props: {
       title: String,
       likes: Number,
       isPublished: Boolean,
       commentIds: Array,
       author: Object,
       callback: Function,
       contactsPromise: Promise // or any other constructor
     }
    

    – demo6.html

    6. 自定义事件

       监听事件:$on(eventName) 
       触发事件:$emit(eventName) 
    

    注1:Vue自定义事件是为组件间通信设计
    vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定

        父Vue实例->Vue实例,通过prop传递数据
        子Vue实例->父Vue实例,通过事件传递数据 
    

    注2:事件名
    不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
    建议使用“短横线分隔命名”,例如:three-click

    展开全文
  • 原因:Awesome Vue.TS旨在尽可能提高类型安全性,同时仍保持TypeScript的简洁性。Awesome Vue TS在浏览器中尝试av-ts! 原因:很棒的Vue.TS旨在尽可能提高类型安全性,同时仍保持TypeScript简洁明了。 为此,av-ts...
  • <input v-model="val" @input="input()"> <div>{{level==0?'弱':level == 1 ? '弱' : level == 2? '中':'高'}}</div> getLvl(val) { var level = 0; if (val.length <... .
    	<input v-model="val" @input="input()">
    	<div>{{level==0?'弱':level == 1 ? '弱' : level == 2? '中':'高'}}</div>
        getLvl(val) {
            var level = 0;
            if (val.length < 6) return 0;
            if (/\d/.test(val)) level++; //数字
            if (/[a-z]/.test(val)) level++; //小写
            if (/[A-Z]/.test(val)) level++; //大写 
            if (/\W/.test(val)) level++; //特殊字符
            
            return level;
        },
        input(){
        	this.level = this.getLvl(this.val)
    	}
        
    
    展开全文
  • vue

    2017-03-07 14:12:35
    饿了么安全应急响应中心 )也有移动端(比如 饿了么招聘 ),有面向用户的,也有后台系统。 实践方案的话,vue + webpack + vue-router + vue-resource。 就我个人而言,vue 的开发体验还是比较愉悦的。首先...
  • Vue全家桶之Vue基础

    千次阅读 多人点赞 2021-05-11 22:11:36
    Vue全家桶之Vue基础 文章目录Vue全家桶之Vue基础1. Vue概述2. Vue的基本使用2.1 传统开发模式对比2.2 Vue.js之HelloWorld基本步骤2.3 Vue.js之HelloWorld细节分析3. Vue 模板语法3.1 模板语法概述3.2 指令3.3 双向...
  • Vue - Vue基础

    千次阅读 2020-08-08 20:40:28
    1. Vue概述 Vue:渐进式JavaScript框架 声明式渲染 -> 组件系统 -> 客户端路由 -> 集中式状态管理 -> 项目构建 官网:https://cn.vuejs.org/v2/guide 易用:熟悉HTML、CSS、JavaScript知识后可以快速...
  • Vue基础

    2020-11-04 08:08:26
    Vue基础 Vue:渐进式JavaScript框架 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建 Vue的基本使用 ​ vue的基本使用步骤: 1.需要提供标签用于填充数据 2.引入vue.js库文件 3.可以使用...
  • 在谷歌浏览器是可以复制成功的,但在360安全浏览器(极速模式或兼容模式)复制不成功,浏览器都已更新到最新版本。 安装: npm install vue-clipboard2 --save-dev 在main.js文件中: import Vue from 'vue'; //...
  • Vue自定义组件 Vue.component

    千次阅读 2018-09-16 23:32:35
    Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教程还是写的简单易懂的。 Component是Vue.js最核心的功能,...
  • @ geist-ui / vue-用于构建现代网站和应用程序的开源设计系统。 寻找React组件吗? 尝试 。 快速开始 运行yarn add @geist-ui/vue或npm i @geist-ui/vue安装它。 导入到项目: import Vue from 'vue' import ...
  • VUE+PostgreSQL+PostgREST实现用户权限安全分级-附件资源
  • vue入门

    千次阅读 2017-09-21 22:00:41
    Vue入门之概念及HelloworldVue简介Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方式都很有创新,另外...
  • Vue知识(一)Vue基础语法

    千次阅读 多人点赞 2021-05-03 16:16:46
    Vue是一个渐进式的框架,什么是渐进式的呢? - 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 - 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。 - ...
  • 骨干集合和模型可以与Vue实例vue-backbone Vue.js插件安全集成,以促进从Backbone的逐步迁移。 骨干集合和模型可以安全地与Vue实例和组件集成在一起,并专注于干净代码和将来采用的Flux库(例如Vuex / Redux / Flux...
  • vue-cli cdn方式引入Vue模块

    万次阅读 2019-10-30 11:44:30
    文章目录选择Vue的cdn从那儿引入?是否需要删除 import Vue 语句?打包测试 选择Vue的cdn 引入的 vue 文件必须是游览器版本,最少需要包含 vue 的运行时源码,也就是 vue.runtime.min.js 这个文件,可以到各大cdn...
  • Vue-resource和Vue-axios

    2018-11-27 21:12:11
    vue是数据驱动的,在vue中实现异步加载需要使用vue-resource库,vue-resource是Vue.js中的一款插件,它通过XMLHttpRequest或JSONP发起请求并进行处理。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,...
  • Vue简介

    2019-07-25 11:15:22
    认识Vue.js Vue是一个渐进式的javascript框架 它的作者是 尤雨溪 发布于 Vue 1.x 在2014 Vue 2.x 在2016 Vue是一个个人项目【React是facebook的团队项目】 Vue是单数据流的框架 Vue是一个MVVM框架, MVVM是MVC...
  • 最近在整理Vue的一些内容,包括Vue 3.0新特性,Vue 2.0的一些特性以及实现方法,还有Vue全家桶的内容,涉及到的内容较多所以找个机会发篇文章,把要点全部讲出来.综合整理下这样看着也舒服,好了废话不多说开始开始. 正文...
  • vueProjects-源码

    2021-03-11 04:53:59
    vueProjects
  • BootstrapVue使用入门

    万次阅读 2019-07-08 16:28:12
    网站: ... ... 入门 开始使用BootstrapVue,它基于世界上最流行的框架 - Bootstrap v4,用于使用Vue.js构建响应迅速,移动优先的站点。 Vue.jsv2.6是必需的,v2.6.10建议 引导v4.3是必需的,...
  • 来源:https://css-tricks.com作者:Anthony Gore想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Compositi...
  • vue-context-menu vue上下文菜单组件演示:https://vmaimone.github.io/vue-context-menu示例用法
  • VUE基础

    2018-06-14 10:02:28
    安装vue脚手架 cnpm install -g vue-cli 安装完成后打印vue,可打印出相关信息 初始化项目 vue init webpack my-vue-project npm install 安装所有的依赖(貌似项目本身有node_modules) 运行项目 npm run dev ...
  • Vue高级 - Vue全家桶技术 1. vue-cli 脚手架 2. vue-router 路由 3. vuex 多组件状态管理 vue-cli 它是vue提供的一个用于构建vue项目的脚手架,目前它的版本已经到了4.x 版本 vue-cli 2.x 版本 vue-cli 2以上...
  • 基于Vue.js hackernews克隆的服务器端渲染/渐进式Web应用程序模板 文献资料 如果您对本模板中SSR的工作方式有任何疑问,请阅读 请查看以获取有关Vue的常规信息,该信息并非特定于此模板。 强烈建议您了解webpack的...
  • vue latex 公式显示插件,适用于 Vue2/Vue3。 简单封装katex。 也是的vue3版本,参考了很多代码,在此感谢。 安装 安装 vue-katex 与 katex 作为对等依赖 # With NPM npm i vatex katex # With Yarn yarn add ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,471
精华内容 15,388
关键字:

vue安全吗

vue 订阅