精华内容
下载资源
问答
  • Vue第二篇之在HTML中引入Vue.js,快速使用Vue
    万次阅读 多人点赞
    2018-10-16 11:19:27

    对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。

    先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。

    下载vue.js  地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入vue.js包。

    <script src="${path}/web/constant/vue.js"></script>

     在当前html中,写入js代码:

    <script type="text/javascript">
        new Vue({
            el:'#app',
            data: {
                message:'hello vue.js.'
            }
        });
    </script>

    html中,加入如下代码:

    <h1>Vue demo</h1>
        <div id="app">
        <div>{{message}}</div>
        <input type="text" v-model="message">
    </div>
    

    修改文本框中的内容,可以看到文本框上方的内容也在相应改变;这就是vue的双向绑定。

    更多相关内容
  • Vue嵌入本地html页面

    千次阅读 2021-05-13 19:17:11
    问题描述:向vue项目中嵌入html页面#嵌入代码 失败原因:代码结构不同,需要放到指定位置 解决:把本地html、css\js\img都放到与src同级的public\static下 #嵌入代码 <template> <div style="width...

    问题描述:向vue项目中嵌入html页面

    失败原因:代码结构不同,需要放到指定位置

    解决:把本地html、css\js\img都放到与src同级的public\static下
    1

    #嵌入代码

    
    <template>
    
         <div style="width: 100%">
        <!--静态html资源-->
    
        <div>
          <iframe src="/static/demo01.html" scrolling="auto" frameborder="0" style="width: 100%;height: 900px;"></iframe>
        </div>
    </div>
    
    
    </template>
    
    
    <script>
      export default {
        
        data() {
          return {
          
          }
        },
        methods: {
          
        },
        created() {
           
        }
      }
    </script>
    
    
    展开全文
  • html 引入 vue.js

    千次阅读 2020-06-13 23:01:21
    html 引入 vue.js 1 vue官网 下载 vue.js 目录结构 编码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...

    html 引入 vue.js
    1 vue官网 下载 vue.js
    或者cdn 引入 我们这里采用下载的方式

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    

    在这里插入图片描述

    1. 目录结构
      在这里插入图片描述
    2. 编码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./js/vue.js"></script>
        <title>html引入vue.js</title>
    </head>
    <body>
        <div id="app">
            <div>{{hello}}</div>
        </div>
        <script>
            new Vue({
                el: '#app',   // 选择器
                data: {
                    hello: 'hello vue'
                }
            })
        </script>
    </body>
    </html>
    

    效果
    在这里插入图片描述

    调整位置
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./js/vue.js"></script>
        <title>html引入vue.js</title>
    </head>
    <body>
        <script>
            new Vue({
                el: '#app',   // 选择器
                data: {
                    hello: 'hello vue'
                }
            })
        </script>
        <div id="app">
            <div>{{hello}}</div>
        </div>
    </body>
    </html>
    

    页面报错

    vue.js:597 [Vue warn]: Cannot find element: #app
    

    在这里插入图片描述

    再次调整位置
    将 vue.js 引入位置放在最后

    </body>
    </html>
    <script src="./js/vue.js"></script>
    

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html引入vue.js</title>
    </head>
    <body>
        <div id="app">
            <div>{{hello}}</div>
        </div>
        <script>
            new Vue({
                el: '#app',   // 选择器
                data: {
                    hello: 'hello vue'
                }
            })
        </script>
    </body>
    </html>
    <script src="./js/vue.js"></script>
    

    效果
    在这里插入图片描述
    报错

    index.html:13 Uncaught ReferenceError: Vue is not defined at index.html:13
    

    所以 引入位置和script标签位置要以第一种为准哦

    适当修改

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>html引入vue.js</title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{{hello}}</div>
        </div>
        <div id="hujiajia">
            <div>{{hello}}</div>
        </div>
        <script>
            var vm1 = new Vue({
                el: '#hujiajia',   // 选择器
                data: {
                    hello: '我是vm1'
                }
            })
            var vm2 = new Vue({
                el: '#app',   // 选择器
                data: {
                    hello: '我是vm2'
                },
                mounted() {
                    //  访问vm1 data的数据
                    console.log(vm1._data.hello)
                    //  修改vm1 data的数据
                    setTimeout(()=>{
                        vm1._data.hello = '修改vm1 data的数据'
                    },2000)
                }
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue 导出html

    万次阅读 2020-04-09 15:53:57
    a.download = "file.html"; a.click(); window.URL.revokeObjectURL(url); } gethtml() { const template = this.$refs.test.innerHTML; let html = ` X-Find迅聘选才 ${template} `; return html; },
    <template>
    <div class="contentsss" ref="test">
    <button @click="export2Excel">导出</button>
    </div>
    </template>
    
    export2Excel() {
    var a = document.createElement("a");
    var url = window.URL.createObjectURL(
    new Blob([this.gethtml()], {
    type: ''
    })
    );
    a.href = url;
    a.download = "file.html";
    a.click();
    window.URL.revokeObjectURL(url);
    }
     
    gethtml() {
    const template = this.$refs.test.innerHTML;
    let html = `<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>X-Find迅聘选才</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
      
    </head>
    <body>
    <div class="resume_preview_page" style="margin:0 auto;width:1200px">
    ${template}
    </div>
    </body>
    </html>`;
    return html;
    },
    
    展开全文
  • 如何利用Vue.js库中的v-html指令添加html元素vue组件中怎么引入html文件?HtmlPanel.vue文件 export default{ // 使用时请使用 :url.sync=""传值 props: { url: { required: true } }, data () { return { loading: ...
  • VUE引入Html页面并进行交互

    千次阅读 2020-10-09 18:25:14
    VUE使用ifram引入html,并且实现页面间传值: 1、VUE页面代码: <template> <divclass=""> <iframe:src="src"width="80%"height="500"ref="iframe"></iframe> <div><button@...
  • Vue3快速入门教程

    千次阅读 2020-12-29 02:22:23
    内的,属于HTML attribute 普通的Mustache语法 : 双大括号-> {{number}} 的文本 v-bind和v-on的使用 创建vm实例时对常用的几个钩子函数的使用方法 created(){} mounted(){} 以下示例: 每秒改变1次msg <...
  • Vue中插入HTML代码的方法

    千次阅读 2021-01-30 13:37:51
    一、使用v-htmlv-html:更新元素的 innerHTMLconst text = `Hello World>`My name is Pjee注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不...
  • html快速使用vue.js

    万次阅读 2019-05-10 11:04:22
    原理很简单就是在html中引入vue.js文件,然后就可以进行vue的模式编写代码了 这是vue.js的文件,也可以去vue官网查询最新的cdn文件 https://cdn.jsdelivr.net/npm/vue 在单个html中使用vue.js 主要就是引入vue.js后...
  • vue 如何打开接口返回的HTML文件

    千次阅读 2021-09-24 12:51:04
    前言:接口测试平台,后端使用django,前端使用vue+element。项目接口平台测试完成,需要把后台产生的测试报告返回给前端展示。 一、后端接口 1、配置下django的template的参数,templates文件夹是放在project的...
  • 当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面,实现他们的交互 首先我们可以再vue页面中使用标签引用html页面 <template> <div> <iframe ...
  • vue起步:用html+js快速构建vue

    万次阅读 多人点赞 2018-07-18 10:27:53
    这几天刚接触vue.js,由于没有接触过es6和webpack,打算直接用html+js构建vue项目,发现虽然官方文档是html+js写的,但是不够详细,网上的例子又都是vue-cli构建的,于是简单总结分享一下这两天的成果,希望能给同样...
  • HTML文件中使用VUE组件

    千次阅读 2020-10-20 01:05:36
    本文的目的是学习如何在html中使用vue组件。主要内容是使用组件以有序列表的形式展示数组的数据。主要知识点有htmlvue,v-for指令,js等等。
  • 一、vue-html5-editor 在安装好脚手架的依赖后,要执行 npminstallvue-html5-editor--save-dev 来安装这个富文本插件,由于这个富文本插件的图标是依赖font-awesome.css的,所以要npm install font-awesome.css ...
  • vue 拼接html添加点击事件

    千次阅读 2020-05-07 13:42:58
    在项目中某些情况不能使用vue的模板,需要拼接出html。在网上看了很多资料发现都不行,最后使用最原始的方法,在此记录一下。 一开始我的思路是点击事件调用vue中的方法,html字符串如下,使用的是es6的模板字符串:...
  • 如何在vue项目中引入html页面

    千次阅读 2021-11-18 11:04:22
    vue项目中引入html页面的两种方法第一种:/static/page.html第二种:通过iframe嵌入 第一种:/static/page.html 在static或public文件夹下,新建html页面,通过/static/page.html或者/page.html即可访问 第二种...
  • vue优缺点详解

    千次阅读 2021-06-19 11:12:26
    Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。本文就来为大家介绍一下vue的优缺点,希望对大家有一定的帮助。一、Vue是什么Vue.js是一个轻巧、高性能、可组件...
  • 获取vue页面内容转为html格式

    千次阅读 2020-05-10 13:03:47
    实现方法: 找到需要转换的页面 用innerHTML 转换 需要在组件标签上加上ref 属性 像这样 <Child class="testDemo" ref="child"></Child>...$el 表示的是 Vue 实例使用的根 DOM 元素。 ...
  • vue 插入html

    千次阅读 2019-07-08 12:53:59
    <div class="test" v-html="'<h1>这是测试</h1>'"></div>
  • html中创建vue组件及引用

    千次阅读 2020-09-30 17:17:48
    html中创建vue组件及引用 需要的js文件 组件vue文件中的代码 <template> <div class="person-infor" @click="addressClick"> <div class="address-wrap" v-if="!data.address_str"> <p>...
  • 1.首先你有一段拼接的html代码 let conten=`<button οnclick="come()">点我</button>`; 2.然后你需要在methods中有一个函数 methods:{ come:function(){ alert('你好,再见!') }, } 3.下一步...
  • html中调用vue中的方法

    千次阅读 2020-07-02 16:38:29
    1.vue中定义addEventListener switchLayer() { window.addEventListener("message",function(e){ debugger; console.log(e.data); }); } 2.js中定义postMessage var myIframe = document.getElem...
  • Vue指令之v-html

    千次阅读 2020-12-01 16:29:26
    Vue指令之v-html v-html指令是设置innerHTML 1.v-html该怎么使用呢??? 我们先在被vue实例挂载的标签div中,放入一个p标签,在p标签内部写入v-html指令,<p v-html="name"></p> ,那么name的值...
  • 我这边有一个已经完成vue项目,如何把这个项目转成原生html文件模式? ![图片说明](https://img-ask.csdn.net/upload/202007/15/1594779889_110698.png)上面这个图转成下面这种格式 ![图片说明]...
  • vue3.0 vue2.0 强!在哪里

    千次阅读 2020-08-13 10:38:42
    为什么要学习 vue3,学习vue3.0还需要学vue2.0吗 ? 当前市场上 vue2 是标配, vue3.0 是加分项, vue3取代vue2是必然的,但是当前工作还是vue2 为主 1.首先 vue2.0很火热, 当前国内前端技术主要有 angular, ...响应速度
  • 怎么在html中引入vue.js文件?

    千次阅读 2021-06-16 11:31:23
    Vue.js是一款流行的JavaScript前端框架,一个用于创建用户界面的开源JavaScript框架,旨在更...那么怎么在html中引入vue.js文件?方法1、可以在 Vue.js 的官网上直接下载 vue.js 文件,并用 标签引入。下载地址:ht...
  • html页面引入vue组件之http-vue-loader.js

    千次阅读 2021-04-05 21:13:16
    首先这种方法不推荐,日常工作中也不会在html里面引入一个vue文件,只是为了有时候方便测试才会这么做 1.创建my-component.vue <template> <div class="hello">Hello {{who}}</div> </...
  • Vue快速入门(一)

    万次阅读 多人点赞 2019-08-11 10:16:30
    一.vue.js的快速入门使用 1.vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的。 另外几个常见的工具库:react.js (Facebook 的内部项目)/angular.js(谷歌) 官方网站: ​ ...
  • 05、Vue基础(html中使用vue

    千次阅读 2020-04-20 15:18:46
    Vue结合了HTML+CSS+JS,有很好的生态系统,Vue体积小,速度,优化到位, 与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用; Vue的核心库只关注视图层,易于上手,便于与第三方库(如:vue-router,...
  • 关键词:Vue打包成单文件,vue single file,Webpack打包成单文件,webpack single file,有些时候项目比较小,就是一个小工具之类啥的。想打包一个成一个HTML文件包含所有的CSS,JS。这样方便部署和分享,就是一个文件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 535,523
精华内容 214,209
关键字:

vue比html快

友情链接: 管理软件.rar