精华内容
下载资源
问答
  • 本人做java的,第一次做vue页面,有很多比较陌生的地方,这里做一下记录。 在一个vue页面调用其他vue页面的方法,可以理解为二步走: 先上代码 ######################**此处为A页面**#################### methods{...

    本人做java的,第一次做vue页面,有很多比较陌生的地方,这里做一下记录。

    在一个vue页面调用其他vue页面的方法,可以理解为二步走:
    先上代码

    ######################**此处为A页面**####################
    methods{	
    start(){
    	//此处为方法体
    }
    }
    
    ######################**此处为B页面**####################
    import A(随便起一个名字,不过最好是A的页面名字) from @XXX/A"(所在路径) 
    
    //此处调用方法
    mounted{
    	A.methods.start()
    }
    

    如上代码,简单的讲就是:

    一、在当前页面导入你想要使用的方法所在的页面路径
    		(此处举例A页面调用B页面的start()方法)
    二、方法的调用,记住要加上“methods”
    

    不太规范,不过完全可以使用~~

    展开全文
  • export default { name: "detail", props: { lastData: { type: Object, required: false, }, },
  • vue如何引用远程js

    千次阅读 2019-09-27 14:02:15
    在html页面引用js只需<script type="text/javascript" src="http://...(url)"></script> vue写法: 通过第三方url地址动态加载远程js let reScript = document.createElement("script"); reScript...

    在html页面引用js只需<script type="text/javascript" src="http://...(url)"></script>

    vue写法:

    通过第三方url地址动态加载远程js

    let reScript = document.createElement("script");
            reScript.setAttribute(
                "src",
                "http://..."
            );
    document.head.appendChild(reScript);

     

     

     

     

    展开全文
  • 引入相关js vue须放在vuetify前面 <script type="text/javascript" src="#(RESOURCE_HOST)/static/js/Vue/Vue.js"></script> <script type="text/javascript" ...页面部分,id为vue的id <div id=.

    引入相关js

    vue须放在vuetify前面

    <script type="text/javascript" src="#(RESOURCE_HOST)/static/js/Vue/Vue.js"></script>
    <script type="text/javascript" src="#(RESOURCE_HOST)/static/js/Vue/vuetify.min.js"></script>
    

    页面部分,id为vue的id

    	<div  id="app">
    			....
    	</div>
    

    模板引擎框架是用的layui

    layui.use(['form'], function () {
            const responseOK = "0";
            const layer = layui.layer;
            const http = axios.create({
                baseURL: '#(ctxPath)/XXX/',
                timeout: 15000,
                withCredentials: true,
                responseType: 'json',
                transformRequest: [
                    function transformRequest (data) {
                        return Qs.stringify(data);
                    }
                ],
                maxContentLength: 2000
            });
            vue = new Vue({
             //初始化vuetify
             vuetify:  new Vuetify(),
                el: '#app',
                data: {
                },
                //vue语法
                ......
           })
    });
    

    完了之后发现IE访问报错
    原因:IE不支持es6
    解决:引入polyfill.min.js将es6解析为es5,先于vue引用

    <script type="text/javascript" src="#(RESOURCE_HOST)/static/js/Vue/browser.min.js"></script>
    <script type="text/javascript" src="#(RESOURCE_HOST)/static/js/Vue/polyfill.min.js"></script>
    
    展开全文
  • Html页面j基于vue.js引入elementUI控件 你好! 这是我第一次在html页面里引入 Vue.js 。如果你想学习了解, 可以仔细阅读这篇文章,了解一下vue.js的基本语法知识。 引入vue,js vue相信大家都不陌生,他是前端最主流...

    Html页面j基于vue.js引入elementUI控件

    你好! 这是我第一次在html页面里引入 Vue.js 。如果你想学习了解, 可以仔细阅读这篇文章,了解一下vue.js的基本语法知识。

    引入vue,js

    vue相信大家都不陌生,他是前端最主流框架之一,也是目前市场上运用最广泛的前端框架之一,今天我们主要讲解vue,js的用法而不是vue框架的讲解。

    vue.js是什么

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    vue的安装

    尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    或者
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    

    安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。

    如果你喜欢交互式的东西,你也可以查阅这个 Scrimba 上的系列教程,它揉合了录屏和代码试验田,并允许你随时暂停和播放。

    声明式渲染

    *Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

    <div id="app">
      {{ message }}
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    

    在这里插入图片描述
    我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

    注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。

    基于vue.js引入elementUI控件

    引入 Element

    引入css:

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    

    引入js:

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

    引入你所需要的控件代码:
    这里一定得是放在你得app dome里面

    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column prop="number" label="序号" width="100"></el-table-column>
                        <el-table-column prop="Number" label="建筑物编号" width="160"></el-table-column>
                        <el-table-column prop="name" label="建筑物名称" width="198"></el-table-column>
                        <el-table-column prop="abbreviation" label="简称" width="160"></el-table-column>
                        <el-table-column prop="address" label="地址" width="198 "></el-table-column>
                        <el-table-column prop="personnel" label="人员数量(位)" width="160"></el-table-column>
                        <el-table-column prop="built" label="建筑面积(m³)" width="160"></el-table-column>
                        <el-table-column prop="air" label="空调面积(m³)" width="160"></el-table-column>
                        <el-table-column prop="heating" label="采暖面积(m³)" width="160"></el-table-column>
                        <el-table-column  label="状态" width="100">
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center">
                                    <span style="width:4px;height: 4px;background: greenyellow;border-radius: 50%;display: inline-block;margin-right:4px"></span><p>显示</p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="operation" label="操作" width="100">
                        </el-table-column>
                    </el-table>
    
     var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                Number: '',
                Name:'',
                drawer:false,
                direction:'rtl',
                currentPage4: 4,
                //表格数据
                tableData:[{
                    number: '01',
                    Number: 'B00000000000001',
                    name:'青海建筑职业技术学院',
                    abbreviation:'DT14256375',
                    address:'青海省西宁市南川西路96号',
                    personnel:'100',
                    built:'123453.42',
                    air:'123453.43',
                    heating:'123453.42',
                    operation:'编辑  删除'
                },{
                    number: '01',
                    Number: 'B00000000000001',
                    name:'青海建筑职业技术学院',
                    abbreviation:'DT14256375',
                    address:'青海省西宁市南川西路96号',
                    personnel:'100',
                    built:'123453.42',
                    air:'123453.43',
                    heating:'123453.42',
                    operation:'编辑  删除'
                }]
            },
            methods:{
                change(){
                    console.error(this.Number)
                },
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                },
                handleClose(done) {
                    this.$confirm('确认关闭?')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                }
    
            },
    
        });
    

    至此,一个基于 Vue 和 Element 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。

    展开全文
  • Vue 渐进式 JavaScript 框架 ** 概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,发布于 2014 年 2 月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注...
  • Vue.js是一款流行的JavaScript前端框架,一个用于创建用户界面的开源JavaScript框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的...
  • 在项目中我们经常会把一些公用的常用的数据放在一个文件里,那么其他vue或者js文件怎么引用这些数据呢?如下: 公用数据文件 // 担保类型 let guaranteeType = [{ text: '抵押', value: '01' }, { text: '...
  • 在html页面引用vue.js时出现闪烁{{}}未加载数据以及默认样式,初始一进来闪动太丑了,使用v-cloak完全不起作用,找了很久,发现下面这个方法可行 在页面最外层div上加上下面这段语句: <div id='app' style=...
  • 页面刷新和vue页面刷新

    万次阅读 2018-05-22 13:07:26
    vue页面刷新: 我 用了一次  location.reload()//刷新 1. location.reload() router.go(0) 这个router是定义的vue-router,例如: const router = new Router({}) 把这个export导出,在...
  • js文件调用vue页面方法

    千次阅读 2020-01-08 16:34:49
    index.vue import { jsmethod } from 'test.js' methods: { qwe(){}, asd(){ jsmethod(this.qwe) } } test.js export function jsmethod(qwe){ if (qwe) { qwe(); } }
  • Vue项目引用百度地图并实现搜索定位等功能

    千次阅读 多人点赞 2019-12-19 22:30:35
    本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位、地址搜索功能。
  • const install = function(Vue) { Vue.directive('el-drag-dialog', drag) } if (window.Vue) { window['el-drag-dialog'] = drag Vue.use(install); // eslint-disable-line } drag.install = install export ...
  • js 插件需要配置 vue.config.js , configureWebpack.externals {组件名: 别名}, 开启全局引用。 可以改变插件引入方式, 将 import App from './App.vue' 改为 const App = () => import(./App.vue') 按组件...
  • vue sass 全局引用

    2020-05-27 09:49:29
    全局引用scss 在使用的过程中,我们有一些固有的颜色字体等等,需要整个网页都统一的,所以 需要放在全局,页面需要使用的时候直接调用即可. 当然也可以使用公共类的方式进行引入样式 但是更加推荐scss的变量方式,这样...
  • Vue引用百度地图教程

    千次阅读 2019-08-30 12:45:10
    npm install vue-baidu-map –save 记得在百度地图开放平台申请百度地图密钥(申请链接:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey)按照网站提示填写应用信息, 申请好之后,记住自己的...
  • 轻松搞定vue项目引用 百度地图 Echart

    千次阅读 2019-10-23 14:56:32
    最近有个项目做数据展示,踩了一波Echart和百度地图的坑,开始的时候用了echart上边的地图,地图一直绘制不出来,还好,还是被我解决了...cnpm install vue-baidu-map --save 3、申请百度地图密钥:http://lbsyun.b...
  • 最近在实习中学习vue框架,踩的坑无数,犯的错无数。昨天整理遇到过的问题时,发现很多小错都已经忘了或者无法记录下来了,所以还是决定写一写博客来记录一下吧。 安装 关于开发环境的安装,可以百度google,应该很...
  • // 创建script标签,引入外部文件 let script = document....script.type = 'text/javascript' script.src = 'http://xxx.xxx.js' document.getElementsByTagName('head')[0].appendChild(script) // 创建s...
  • vue3.0引用原生高德地图进行定位

    千次阅读 2019-11-22 16:23:04
    vue版本 项目用的是vue3.0的版本 搭建项目的过程省略 引入原生高德地图 1.根据官网要求先拿到需要的key 2.vue3.0的版本与2.0的版本存在差别,个别文件的位置也不相同 在我们项目一开始要加载的html页面(也就是...
  • 公司要求在云平台上添加一个页面,调用百度地图,在上面标记相关地点,鼠标滑过是显示该地点的数据,点击标记跳转到详细数据浏览页面。一边做一边百度终于实现了(#.#)。 一、vue中引入百度地图接口 1.下载百度地图...
  • vue引用外部js文件

    2020-09-29 10:31:28
    1.一般在.vue文件引用js文件都是通过import方式,但是这个前提是对应的js有...2.遇到没有npm方式安装的js库时,可直接在index.html引用外部的js库,与传统html页面引入js文件一致,可以在任何一个.vue项目都能访问 ...
  • Vue组件引用以及传值给组件

    千次阅读 2019-03-05 14:28:30
    组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用。 在src目录下新建一个components文件夹,在里面新建一个...
  • vue页面引入three.js创造3d动画场景

    千次阅读 多人点赞 2019-03-16 21:27:00
    three.js是JavaScript编写的WebGL第三方库。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。 首先利用创建一个Vue工程 若对创建vue工程有疑惑,可以...
  • 2、在需要使用的组件引用 import { _debounce } from "@/utils/public";

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,583
精华内容 8,233
关键字:

vue页面引用javascript

java 订阅
vue 订阅