精华内容
下载资源
问答
  • 有时候需要写一些简单的页面小交互,用node 构建前端项目总有那么不合适,感觉有点大材小用,所以用html 引入 静态js,构建简单的单页面,写一些小功能
  • html页面基于script标签引入vue使用时,将此js放在项目路径中引用即可离线使用vue框架,避免在线引用网络延迟。 具体使用方法可参考我的博客
  • 主要介绍了vue页面引入three.js实现3d动画场景操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 首先还是按照常规的来 引入Vue.js和Swiper.js以及Swiper.css 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src=...

    首先还是按照常规的来 引入Vue.jsSwiper.js以及Swiper.css

    直接上代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    		
    		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    		
    		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    		
    	</head>
    	<body>
    
    		<div id="All">
    			
    			<div class="swiper-container">
    			  <div class="swiper-wrapper">
    					<div class="swiper-slide">slider1</div>
    					<div class="swiper-slide">slider2</div>
    					<div class="swiper-slide">slider3</div>
    			  </div>
    			</div>
    			
    		</div>
    		
    		<script type="text/javascript">
    			
    			new Vue({
    				el:"#All",
    				
    				data(){
    					return{
    						a:[1,2,3]
    					}
    				},
    				
    				methods:{
    					
    				}
    					
    			})
    			
    			var mySwiper = new Swiper('.swiper-container', {
    				pagination: {
    				    el: '.swiper-pagination',
    					clickable :true,
    				},
    				autoplay: true,//可选选项,自动滑动
    				loop : true,
    				delay: 3000,
    			})
    			
    			
    		</script>
    		
    	</body>
    </html>
    

    过程中遇到一点小困难就是我一开始swiper实例在vue实例之前

    也就是

    <script type="text/javascript">
    			
    			var mySwiper = new Swiper('.swiper-container', {
    				pagination: {
    				    el: '.swiper-pagination',
    					clickable :true,
    				},
    				autoplay: true,//可选选项,自动滑动
    				loop : true,
    				delay: 3000,
    			})
    			
    			new Vue({
    				el:"#All",
    				
    				data(){
    					return{
    						a:[1,2,3]
    					}
    				},
    				
    				methods:{
    					
    				}
    					
    			})
    			
    		</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>
    

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

    展开全文
  • html页面直接引入vue.js,并用运用

    千次阅读 2020-05-13 18:49:17
    HTML <divid="app"> {{msg}} </div> JS <scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> <script> window.onload=function(){ newVue({ el:'#app', ...

    HTML

        <div id="app">

            {{msg}}

        </div>

    JS

        <script src="https://unpkg.com/vue/dist/vue.js"></script>

        <script>

            window.onload = function(){

                new Vue({

                    el: '#app',

                    data(){

                        return{

                            msg: 'abc'

                        }

                    }

                })

            }

        </script>

    当然也可以通过npm指令实现创建vue项目 https://mp.csdn.net/console/editor/html/106104590

    展开全文
  • 有时候需要写一些简单的页面小交互,用node 构建前端项目总有那么不合适,感觉有点大材小用,所以用html 引入 静态js,构建简单的单页面,写一些小功能 demo 地址 引入必要的插件 <link rel="stylesheet" href...
    • 有时候需要写一些简单的页面小交互,用node 构建前端项目总有那么不合适,感觉有点大材小用,所以用html 引入 静态js,构建简单的单页面,写一些小功能
    • demo 地址

    引入必要的插件

    		<link rel="stylesheet" href="plugins/element-ui/index.css">
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/axios.min.js"></script>
    		<script src="js/httpRequest.js"></script>
    		<!-- element-ui -->
    
    		<script src="plugins/element-ui/index.js"></script>
    		<!-- element-ui -->
    
    展开全文
  • HTML引入 vue.js页面

    千次阅读 热门讨论 2019-12-05 15:00:04
    突然说要写两个页面(只有两个页面,不是一个完整的项目。。),有点懵,不知道从哪下手,而且只对 vue 熟悉那么一丢丢。但是没办法鸭,只能硬着头皮去做了!在这里做一下笔记。 一、前期准备 1. 新建文件夹,并且...
  • html直接引入vue.js错误(Uncaught ReferenceError: vue is not defined) 学习vue的时候打算自己敲会代码,关于vue的数据绑定的,但是没有预期的效果。检查网页发现报错Uncaught ReferenceError: vue is not ...
  • 今天学习ElasticSearch相关项目,跟着B站狂神说做了一个京东搜索的实战项目,其中有一个直接将vue.js和axios引入html中并结合thymeleaf使用的方法挺好,在此做一个记录。 1.下载vue.js与axios.js npm init 首先...
  • .html引入vue.js及axios

    2020-11-05 19:01:40
  • 前端原生html引入vue.js

    2021-05-20 13:59:22
    原生html文件中引入vue.js的方法 head标签下 通过script先引入vue.js文件 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...
  • Vue第二篇之在HTML引入Vue.js,快速使用Vue

    万次阅读 多人点赞 2018-10-16 11:19:27
    直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。 下载vue.js 地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入v...
  • vue项目直接引入vue.js

    千次阅读 2018-11-12 17:34:19
    二是直接在项目引入vue.js 最近一个项目里用layUI做的,到我手上的时候想用vue,又不想重新搬页面,所有就引用的vue.js,遇到以下一些问题,和大家分享以下 1.使用方法说一些,在页面引用vue.js以后 var vm = new ...
  • 因为在项目中临时增加两个页面,就没有用 vue-cli 搭框架,直接在 HTML引入vue.js 文件。发现其他浏览器都能正常显示,ie 下显示不正常,vue部分没有编译。 IE不兼容Vue的原因无非就是编译不了高于ES5的语法,因此...
  • 由于各种原因,需要在原有的html页面中通过script标签引入的方式进行部分页面开发 但是由于开发过程中存在许多公共部分需要进行组件封装。所以遇到了一些问题。最后通过讲组件提取为单独js文件进行解决。 具体解决...
  • 引入vue,js vue相信大家都不陌生,他是前端最主流框架之一,也是目前市场上运用最广泛的前端框架之一,今天我们主要讲解vue,js的用法而不是vue框架的讲解。 vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套...
  • 使用插件 vxe-table 编辑表格,文档给出例子,可以这样写 其他浏览器没有问题,ie报错 参考:https://www.yht7.com/news/115207 修改后: ok了
  • HTML引入vue.js,在ie浏览器中不显示

    千次阅读 热门讨论 2019-12-03 13:00:59
    因为只有两个页面,所以我没有用 vue-cli 搭框架,直接在 HTML引入vue.js 文件。发现其他浏览器都能正常显示,ie 下显示不正常,而且还报错,错误信息如下: 原因: 主要是因为 ie 不支持 ES6 的语法。 在 vue-...
  • Inspections,右侧找到Html->Unknown HTML tag attribute,在右边Options->Custom HTML tag attributes里面添加如下代码 @tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click....
  • vuejs学习笔记(一),直接引入vue.js

    千次阅读 2018-10-29 15:54:56
    html&gt; &lt;head&gt; &lt;title&gt;声明式渲染&lt;/title&gt; &lt;/head&gt; &lt;style&gt; &lt;/style&gt; &lt;script src="...
  • 一、页面引入方式: 组件的注册引入: 采用render函数来渲染组件: 二、webpack引入方式 vue的安装: 1、组件的注册引入 2、render函数渲染方式 三、使用.vue自定义组件文件 一、页面引入方式: 组件的...
  • 如何在HTML引入vue.js

    2020-11-30 19:25:52
    官网下载vue.js,然后将vue.js文件放入项目文件夹中。 #script标签引入 // An highlighted block <script src="./vue.js"></script> 错误的原因是 路径应该是 ./ 而不是 …/ ./ 与 …/ 的区别是 ./ 是...
  • 直接使用的vue.js

    2019-03-05 16:40:54
    vue.js,可以直接下载引用至项目目录,引用至html页面进行样式的加载使用
  • YDOOK: Vue: 怎样快速使用 Vue.js, 引入CDN 在线版本的 Vue.js 1. 什么时候需要引入版本的 Vue.JS? >> 在进行原型设计与练习训练的时候,您可以通过在 HTML 页面代码中引入 2. HTML 中快速引入 Vue.js 进行...
  • [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. ...
  • Vue.js用cdn方式引入

    万次阅读 2019-11-29 08:36:42
    Vue.js用cdn方式引入 前言 注意本次用cdn形式引入js学习,有node.js的玩家可以用node.js。CDN下载地址:https://vuejs.org/js/vue.min.js以及Node.jsVue系列: windows下npm安装vue 今天博主将为大家分享Vue.js用...
  • 整合springboot+vue.js--安装vue.js

    千次阅读 2019-04-29 20:52:32
    业余时间想整理一个基于springboot2.x+mybatis+redis(二级缓存)+vue.js的小系统,随着工作经验的增加慢慢去完善它 废话不多说,安排一个node.js,回归最老版的命令行编码! vue.js是什么?为什么要使用它? Vue.js...
  • 主要介绍了详解vue文件中使用echarts.js的两种方式,主要介绍了两种使用方式,一种是以组件的形式另一种直接引入,非常具有实用价值,需要的朋友可以参考下
  • 1、main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2、App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,898
精华内容 19,559
关键字:

html页面引入vue.js

vue 订阅