js 引入Vue.js实现vue效果

最新推荐文章于 2024-08-19 23:31:20 发布
最新推荐文章于 2024-08-19 23:31:20 发布
阅读量346 收藏
点赞数 1
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/linjiangxian/p/11460870.html
版权

拆分组件为单个js见：https://www.jianshu.com/p/2f0335818ceb

效果：

 

 

 

 

 

 

 

 

 

 

 

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>js引入vue.js实现vue</title>
        <link rel="stylesheet" href="css/1.css">
        <script src="js/jquery.js"></script>
        <script>
            function htmlFont(standardWid) {
                var explorer = navigator.userAgent,
                    html = document
                    .getElementsByTagName('html')[0];
                standardWid = (typeof standardWid == 'number') ? standardWid : 375;
                if (explorer.indexOf("Opera") >= 0) {
                    winwid = screen.width;
                } else {
                    winwid = html.offsetWidth;
                }
                if (winwid > 750) {
                    fosi = 200;
                } else {
                    winwid = winwid > standardWid * 2 ? standardWid * 2 : winwid;
                    fosi = winwid / standardWid * 100;
                }
                html.style.fontSize = fosi + 'px';
            }
            htmlFont();
        </script>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
        <script src="js/1.js"></script>
    </head>
    <body>
        <div id="app" v-cloak>
            <transition :name="transitionName">
                <keep-alive>
                    <router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
            </transition>

            <transition :name="transitionName">
                <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
            </transition>
        </div>
    </body>
</html>

 

js:

'use strict';
$(document).ready(function() {
    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
    Vue.use(VueRouter);

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来

    Vue.prototype.$fun1 = function() { //全局函数1
        console.log('fun1');
    };

    var Vue1 = Vue.extend({
        data() {
            return {}
        },
        computed: {},
        methods: {
            toVue2: function() {
                this.$router.push({
                    name: 'Vue2'
                })
            }
        },
        template: "<div class='d-vue1'><p class='redBc' @click='toVue2'>组件1</p>" +
            "<p class='orangeBc' @click='$fun1'>点击</p></div>"
    })

    Vue.component(Vue1)

    const Vue2 = Vue.extend({
        template: "<div class='d-vue2'><p class='greenBc'>组件2</p>" +
            "<p class='orangeBc' @click='$fun1'>点击</p></div>"
    })

    Vue.component(Vue2)

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    const routes = [{
            path: '/',
            component: Vue1
        },
        {
            path: '/vue2',
            component: Vue2
        }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes: [{
                path: '/',
                name: 'Vue1',
                meta: {
                    index: 0,
                    keepAlive: true,
                    title: '组件1'
                },
                component: Vue1
            },
            {
                path: '/vue2',
                name: 'Vue2',
                meta: {
                    index: 1,
                    keepAlive: false,
                    title: '组件2'
                },
                component: Vue2
            }
        ]
    })

    router.beforeEach((to, from, next) => {


        const toDepth = to.meta.index;
        const fromDepth = from.meta.index;

        if (to.meta.title) {
            document.title = to.meta.title;
        }

        if (toDepth < fromDepth) { //返回
            from.meta.keepAlive = false;
            to.meta.keepAlive = true; //相当于缓存
        }
        next()
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        data: {
            transitionName: ''
        },
        watch: {
            $route(to, from) {
                if (to.meta.index > from.meta.index) {
                    this.transitionName = 'slide-left';
                } else {
                    this.transitionName = 'slide-right';
                }
            }
        },
        router
    }).$mount('#app')
})

 

css:

.child-view {
    position: absolute;
    width: 100%;
    transition: all .5s cubic-bezier(.55, 0, .1, 1);
}

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
}

.slide-left-leave-active,
.slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
}

body,
div,
p {
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-weight: 500 !important;
}

[v-cloak] {
    display: none
}

p {
    margin-top: .5rem;
}

.redBc {
    background-color: red;
}

.orangeBc {
    background-color: orange;
}

.greenBc {
    background-color: green;
}

 

若需请求接口，html增加引入：

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用：

function getData(){
       var param1 = {
       　　　　param: {
              　　　　id:'1',
                     sex:'male'
                }
       }
        axios.get( "url", {params: param1}).then(function (res) { //url为请求接口, 当请求需要参数为JSON数据时
        // axios.get( "url?param2="+"XXX").then(function (res) {  //当请求参数无需用JSON时，param2为请求需要参数
                if (res.status == 200 && res.data.result == 0) {
                 var _data = res.data.message;
            }else{}
        })
        .catch(function (error) {
             console.log(error);
         });
}

 

 

'use strict';
$(document).ready(function() {
    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
    Vue.use(VueRouter);

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来

    Vue.prototype.$fun1 = function() { //全局函数1
        console.log('fun1');
    };

    var Vue1 = Vue.extend({
        data() {
            return {}
        },
        computed: {},
        methods: {
            toVue2: function() {
                this.$router.push({
                    name: 'Vue2'
                })
            }
        },
        template: "<div class='d-vue1'><p class='redBc' @click='toVue2'>组件1</p>" +
            "<p class='orangeBc' @click='$fun1'>点击</p></div>"
    })

    Vue.component(Vue1)

    const Vue2 = Vue.extend({
        template: "<div class='d-vue2'><p class='greenBc'>组件2</p>" +
            "<p class='orangeBc' @click='$fun1'>点击</p></div>"
    })

    Vue.component(Vue2)

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    const routes = [{
            path: '/',
            component: Vue1
        },
        {
            path: '/vue2',
            component: Vue2
        }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes: [{
                path: '/',
                name: 'Vue1',
                meta: {
                    index: 0,
                    keepAlive: true,
                    title: '组件1'
                },
                component: Vue1
            },
            {
                path: '/vue2',
                name: 'Vue2',
                meta: {
                    index: 1,
                    keepAlive: false,
                    title: '组件2'
                },
                component: Vue2
            }
        ]
    })

    router.beforeEach((to, from, next) => {


        const toDepth = to.meta.index;
        const fromDepth = from.meta.index;

        if (to.meta.title) {
            document.title = to.meta.title;
        }

        if (toDepth < fromDepth) { //返回
            from.meta.keepAlive = false;
            to.meta.keepAlive = true; //相当于缓存
        }
        next()
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        data: {
            transitionName: ''
        },
        watch: {
            $route(to, from) {
                if (to.meta.index > from.meta.index) {
                    this.transitionName = 'slide-left';
                } else {
                    this.transitionName = 'slide-right';
                }
            }
        },
        router
    }).$mount('#app')
})

转载于:https://www.cnblogs.com/linjiangxian/p/11460870.html

Macdull2014
关注
基于script标签引入vue.js
08-21
html页面基于script标签引入vue使用时，将此js放在项目路径中引用即可离线使用vue框架，避免在线引用网络延迟。 具体使用方法可参考我的博客
js引入vue
qq_46126672的博客
01-28 1997
使用JavaScript引入vue的方法
原生javascript和Vue.js混用发生冲突，尝试用一种最简单的方法解决
最新发布
秋窗的博客
08-19 265
但是，Vue.js在实例化时会重新渲染DOM，如果Vue.js的初始化在原生JavaScript之后，它可能会覆盖或忽视原生JavaScript的绑定，导致事件失效。将原生JavaScript代码放在Vue.js之后执行，可以确保Vue.js已经设置好其响应式系统和事件监听器，原生代码在这个基础上运行，则不会与Vue.js的机制冲突。今天在写代码时遇到一个问题，我一开始没有使用Vue.js而是使用原生JS为DOM元素绑定事件，后来加上了Vue.js发现之前绑定的事件失效了，我的解决方法是，
VUE学习(一）、基于简单js引入的Vue快速入门——简单实例使用
醉瑾_的博客
12-29 2477
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
在js文件中调用vue组件
weixin_50622621的博客
03-30 3198
【代码】在js文件中调用vue组件。
【转】Vue.js入门教程（二）在页面中引入vue的方式
sinolover的专栏
12-23 2488
第二章：安装和基础效果展示 页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法，所以我们不一定需要通过npm工程化进行安装，你直接用script在页面中引用也完全没有问题。 第一种引入方式，script直接引入： <script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script> 直接引入的好处是，随用随引，不需要的包在页面上就不加载。并且通过外链访问比打包压缩访问的速度更.
vue.min.js 文件直接引入就可以
12-30
vue源文件vue.js
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置...
bootstrap vue.js实现tab效果
10-20
`<ul>` 列表中的 `<li>` 标签内有 `<a>` 链接，其 `href` 属性为空，实际的切换效果是通过 JavaScript 或 Vue.js 的数据绑定来实现的。选项卡内容使用 `<div>` 包裹，并为每一个内容区域设置了 `tab-pane fade` 类，...
关于引入vue.js 文件的知识点总结
11-21
在本文中，我们将深入探讨如何在项目中引入Vue.js文件，并了解相关的关键知识点。Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。它的轻量级和可扩展性使其成为许多开发者的首选。以下是对引入Vue.js文件...
在JS文件中使用或扩展已有的vue文件
weixin_42971933的博客
02-03 2146
在JS文件中使用或扩展已有的vue文件
Vue.js初体验（引入Vue.js）
qq_43189389的博客
04-17 454
一、 新建一个html，在script标签引入Vue.js **第一种方法**： 在官方网站下载vue.js到本地然后引入，[vue.js](https://cn.vuejs.org/) **第二种方法**： 使用 CDN 方法 以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。 Staticfile CDN（国内） : https:/...
在js文件中使用Vue.extend与new Vue().$mount 实现挂载vue文件？
韩旭的博客
05-25 4036
Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
vue 导入js中的方法
xwnxwn的专栏
03-16 516
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。4.2 vue 导入js文件 -->XXX 是一个自定义的变量名。4.2 vue 导入js文件 -->XXX 是一个自定义的变量名。2 方法二：使用 import 语句。2 方法二：使用 import 语句。5 修改文件后一定要保存 在运行。5 修改文件后一定要保存 在运行。3.2 vue 导入js文件。3.2 vue 导入js文件。1 方法一：使用 标签。1 方法一：使用 标签。
第一篇：原生JS到Vue前端工程化开发
weixin_63566741的博客
08-02 1686
当前最为主流的开发模式是前后端分离开发：前端工程和后端工程。前端工程要通过发送异步请求消息，后端工程进行处理后再返回响应消息，实现前后端的数据交互。 这样前端工程与后端工程就由独立的团队进行开发，所以在开发过程中要实现对接功能必须遵守开发规范，开发规范根据产品经理提供的页面原型与功能需求，定义在专门的文档当中，称为接口文档。接口文档中定义了各个接口功能，描述功能的基本信息，请求参数，响应数据。
js文件中使用Vue组件定义的方法
qq_37800258的博客
02-22 1092
js文件中使用Vue组件定义的方法 在created或mounted钩子函数中将methods里面定义的方法, 赋值给window，以便外部js调用，例如： methods: { callCamera () { ...... } }, created(){ window.callCamera = this.callCamera; } js中调用： callCamera(); ...
js给某类型扩展方法 vue 自定义方法
lichengwei816的博客
11-01 260
1.方法 var pluginUtil = {} pluginUtil.install = function (Vue) { Array.prototype.gRemove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }; Vue.prototype.$gUtil = new (function () { // 获取当前时间 this.getTimeNow =
Vue.js与Velocity.js结合实现JavaScript过渡效果
5.2.2 在Vue.js中实现JavaScript过渡，需要在`<transition>`组件内编写钩子函数，比如`enter`和`leave`，并在这些钩子函数中调用Velocity.js的方法来执行动画，并确保通过`done`回调函数通知Vue.js过渡已完成，避免...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值