Powered by md-Blog  文 - 篇  访客 -

  • Vue Router 配置教程及嵌套路由、传参、动画效果等

    安装yarn add vue-router -D入口配置main.jsimport Vue from 'vue' import router from './router' // 添加 new Vue({ el: '#app', router, // 添加 render: h => h(App) });配置文件router/index.jsimport Vue from 'vue' import Router from 'vue-router' import Home from '@/Home' import Cart from '@/Cart' import Me from '@/Me' import NoPage from '@/NoPage' Vue.use(Router) const originalPush = Router.proto

    2020-04-02 20:37:35   2020-04-01 09:44:47
    分类:Vue / 浏览:015857054875021
  • vue-router的多种跳转方法

    this.$router.push()描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。// 字符串 this.$router.push('home'); // 对象 this.$router.push({ path: 'home' }); // 命名的路由,带参数 this.$router.push({ name: 'user', params: { userId: 123 }}); // 带参数,变成 /user?id=123 this.$router.push({ name: 'user', query: { userId: 123 }}

    2020-04-02 14:28:03   2020-04-02 14:22:44
    分类:Vue / 浏览:015858085644585
  • Vue.js防止xss攻击实例

    安装yarn add xssmain.jsimport xss from 'xss' // xss Object.defineProperty(Vue.prototype, '$xss', { value: xss })App.vue<template> <div> <p v-html="test"></p> <!-- 点击后有弹框 --> <p v-html="$xss(test)"></p> <!-- click事件被过滤,点击无效果 --> </div> </template> <script> export default { data

    2020-04-02 13:36:11   2020-04-02 13:36:11
    分类:Vue / 浏览:015858057714365
  • Vue.js父组件直接调用子组件方法实例

    父组件通过 noticeAAA 识别调用 子组件 xxx 的方法父组件<template> <my-notice ref="noticeAAA"></my-notice> </template> <script> import myNotice from './Notice' export default { methods: { // 调用通知 DisplayNotice(){ this.$refs.noticeAAA.xxx('success') } }, } </script>子组件<script> export default { methods: {

    2020-04-02 13:09:41   2020-04-02 13:09:41
    分类:Vue / 浏览:015858041812790
  • Vue.js创建项目之 vue init 和 vue create 的区别

    vue init是 Vue-cli2.x 的初始化方式,可以使用 Github 上面的一些模板来初始化项目webpack 是官方推荐的标准模板名使用方式:vue init webpack 项目名称electron-vue 的模板使用方式:vue init simulatedgreg/electron-vue 项目名称vue create是 Vue-cli3.x 的初始化方式,模板是固定的,模板选项可自由配置使用方式:vue create 项目名称

    2020-04-02 11:00:10   2020-04-02 11:00:10
    分类:Vue / 浏览:015857964104005
  • Vue.js流畅过渡切换动画的实现

    先看效果模板文件<transition name="myfade"> <router-view></router-view> </transition>样式文件/* myfade */ .myfade-enter, .myfade-leave-to { opacity: 0; } .myfade-leave, .myfade-enter-to { opacity: 1; } .myfade-enter-active { transition: opacity .5s; transition-delay: .3s; } .myfade-leave-active { transition: opacity .3s }

    2020-04-01 11:21:27   2020-04-01 11:15:51
    分类:Vue / 浏览:015857109511015
  • 春明


     
    百度站内搜索


  • 晋ICP备18012953号-1
  • 百度统计