原生js开发和vue

页面传值对于vue来说，可供选择的方法非常多。比如使用子组件实现，通过对props属性传值；也可以使用页面url参数的方法传值；或使用vuex全局状态管理的方法页面传值等等。而原生开发的时候，在页面有多个参数的时候，页面传值和初始化，要复杂很多。而vue直接将参数保存在对象里面，直接给子组件的属性或vuex存储一个对象就行了，比如<Ctrl :userinfo="userinfo" ></Ctyrl> , 这样就可以将userinfo传到自定义组件。

三、模块化开发、无刷新保留场景参数更新

比如一个列表页面里面有添加功能，有修改功能，这时候我们可以通过引用子组件的形式，当子组件内容更新的时候，修改主组件的数据，比如修改了一条数据后，我们需要列表页同时刷新，但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个，需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数，但假如你用vue开发，将变得非常简单。

四、代码的可阅读性

vue天生具有组件化开发的能力，因此不同的功能基本都是写在不同的模块里面，因此代码的可阅读性非常高。当一个新手接手一个旧项目的时候，基本上可以做到一天就能定位到要修改的代码，进行修改，快速接手项目。

五、基于强大的nodejs，添加新的组件库，基本一句npm命令就能安装，比如当我需要使用axios组件的时候，直接npm install axios安装一下，就可以使用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。

六、主路由、子路由、主页面、子组件的方式，可以让我们彻底抛弃iframe。写过前端的同学都知道，因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构友好。而且使用vue非常简单方便的实现系统菜单、导航等固定布局。

七、各子组件样式不冲突：各个组件之间，可以使用相同的样式名，但有不同的样式属性。比如组件A和组件B的button都绑定了class="btn", 但在两个组件里，我们可以实现两个不同的btn样式属性，互不影响。

vue的不足：

当然，vue也有不足，不足的地方如下：

一、vue是单页面页面，对于搜索引擎不友好，影响seo.因此不适合做公司官网。比如两个vue路由（页面），它的路径是这样的：index.html#aaa 和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。

二、vue门槛较高，使用vue，需要先学习和摸索vue大概3天左右的时候，建议使用vue的时候，不需要看node.js自动帮你生成的js文件。你只需要编写你自己页面的代码就行了。具体nodejs帮你生成的框架代码，其实是不用看的。

收起

展开全文

原生

vue 使用外部JS与调用原生API操作示例
2020-12-13 23:49:05
本文实例讲述了vue 使用外部JS与调用原生API操作。分享给大家供大家参考，具体如下： vue 使用外部JS 概要在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js，然后进行使用。实现方法我们在开发的...
收起
vue和原生ios和android的交互封装
2019-08-10 08:48:04
vue和原生（ios和android）的交互封装
收起

vue里面写原生JS函数,安卓agentweb、webview与js操作，移动应用调用JS，移动混合开发JS互动

千次阅读 2020-01-07 10:57:26

最近在做安卓混合开发时，遇到几个坑，在vue写的界面里面调用原生js去调用安卓插件agentweb的安卓条码扫描功能，最后是agentweb调用web的原生JS出问题，问题1：在vue界面里面放原生的function在哪里？经过多轮研究...

    最近在做安卓混合开发时，遇到几个坑，在vue写的界面里面调用原生js去调用安卓插件agentweb的安卓条码扫描功能，最后是agentweb调用web的原生JS出问题，
 问题1：在vue界面里面放原生的function在哪里？经过多轮研究，问题1终于解决了，但又遇到个问题2：原生函数把值给了input控件，但vue取不到input的值。查查资料又解决了。 
解决问题一：原生JS函数放在哪里?要放在导出html模板文件里面，而不是放在写的vue界面里面 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>SCAN_Demo</title>
    <script type="text/javascript">
      function SCANRsult(key){
          document.getElementById("SCANText"

收起

展开全文

vue.js原生组件化开发（一）——组件开发基础

2018-09-26 15:46:23

我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。那么不用脚手架，如何进行组件开发呢，本文先介绍一下...

前言 
vue作为一个轻量级前端框架，其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。那么不用脚手架，如何进行组件开发呢，本文先介绍一下基础知识吧。 
组件使用流程 
1.组件构建 
1.1 extend构建法 
调用Vue.extend()方法，构建一个名字为myCom的组件 
var myCom = Vue.extend({
    template: '<div>这是我的组件</div>'
})
 
其中template定义模板的标签，模板的内容需写在该标签下 
1.2 template标签构建法 
template标签构建，需在标签上加id属性用以后期注册 
<template id="myCom">
    <div>这是template标签构建的组件</div>
</template>
 
1.3 script标签构建法 
script标签同样需加id属性，同时还得加type="text/x-template"，加这个是为了告诉浏览器不执行编译里面的代码 
<script type="text/x-template" id="myCom1">
    <div>这是script标签构建的组件</div>
</script>
 
2.注册组件 
（1）全局注册：一次注册，可在多个vue实例中使用，需调用Vue.component()方法，这个方法需传2个参数，第一个参数为组件名称，第二个参数为组件构造时定义的变量。 
我们先用全局注册注册上面例子中创建的myCom组件 
Vue.component('my-com',myCom)
 
还有一种不需构建直接注册的写法——注册语法糖 
Vue.component('my-com',{
    'template':'<div>这是我的组件</div>'
})
 
'my-com'为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。 
 
 注意命名规范，一般组件名字以短横线分隔或一个小写单词。
 例：footer-nav，footernav 
 
如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值 
Vue.component('my-com',{
    template: '#myCom'
})
 
（2）局部注册：只能在注册该组件的实例中使用 
var app = new Vue({
    el: '#app',
    components: {
        'my-com': myCom
    }
})
 
注册语法糖 
var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '<div>这是我的组件</div>'
        }
    }
})
 
template及script构建的组件 
var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '#myCom'
        }
    }
})
 
3.调用组件 
我们只需在需要调用组件的地方写上组件名字的标签即可 
<div>
    /*调用组件*/
    <my-com></my-com>
</div>
 
4.例子 
4.1 全局注册 
新建一个html文件，引入vue.js，并且定义2个vue实例app1和app2 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app1">
        <my-com></my-com>
    </div>
    <div id="app2">
        <my-com></my-com>
    </div>

    <script>
        /*构建组件*/
        var myCom = Vue.extend({
            template: '<div>这是我的组件</div>'
        });
        /*全局注册组件*/
        Vue.component('my-com',myCom);

        /*定义vue实例app1*/
        var app1 = new Vue({
            el: '#app1'
        });

        /*定义vue实例app2*/
        var app2 = new Vue({
            el: '#app2'
        });
    </script>
</body>
</html>
 
打开浏览器查看效果 
 
  
可以看到全局注册的组件在实例app1和实例app2中都可以被调用 
 
 一次注册，多处使用 
 
4.2 局部注册 
修改上面例子的html代码，将全局注册的组件改为局部注册，注册到实例app1下 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app1">
        <my-com></my-com>
    </div>
    <div id="app2">
        <my-com></my-com>
    </div>

    <script>
        var myCom = Vue.extend({
            template: '<div>这是我的组件</div>'
        });

        // Vue.component('my-com',myCom);
        /*局部注册组件*/
        var app1 = new Vue({
            el: '#app1',
            components:{
                'my-com':myCom
            }
        });

        var app2 = new Vue({
            el: '#app2'
        });
    </script>
</body>
</html>
 
打开浏览器查看效果 
 
  
可以看到只渲染了app1实例下的组件，app2实例虽然调用了该组件，但是因为这个组件没有在其内部注册，也没有全局注册，所以报错说找不到该组件。 
 
 一次注册，一处使用 
 
4.3 template及script标签构建组件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app1">
        <my-com></my-com>
        <my-com1></my-com1>
    </div>

    <template id="myCom">
        <div>这是template标签构建的组件</div>
    </template>

    <script type="text/x-template" id="myCom1">
        <div>这是script标签构建的组件</div>
    </script>

    <script>
        Vue.component('my-com1',{
            template: '#myCom1'
        });

        var app1 = new Vue({
            el: '#app1',
            components:{
                'my-com':{
                    template: '#myCom'
                }
            }
        });
    </script>
</body>
</html>
 
打开浏览器查看效果 
  
 
异步组件 
当项目比较大型，结构比较复杂时，我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境，使用单文件组件，开发更简单，易上手，尤其是在对组件的处理上。对于原生vue.js，我们就得将组件构建在同一个html的script标签下或者html的外部js中，所有组件集中在一块，不容易管理，这也是原生vue,js的一点不便之处。
 当然，在不使用脚手架的情况下想将一个个组件分别独立成一个个html文件，再去引用注册它们，也是可以实现的，但一般不推荐这样做。
 vue.js可以将异步组件定义为一个工厂函数。
例子
 新建一个head.html 
<div>
    这是头部
</div>
 
在index.html中异步引入head.html作为组件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div id="app1">
        <head-com></head-com>
    </div>
    <script>
        Vue.component('head-com', function (resolve, reject) {
            $.get("./head.html").then(function (res) {
                resolve({
                    template: res
                })
            });
        });

        var app1 = new Vue({
            el: '#app1'
        });

    </script>
</body>
</html>
 
 
 当然要注意一点，使用$.get获取本地文件是会跨域的，所以我们要把项目部署到服务器环境中。 
 
我这里用的是xampp集成环境，将项目文件夹component放置在xampp/htdocs下，然后访问localhost/component/index.html，
 效果如下 
 
  
可以看到在index.html中引入的head.html里的内容已经被添加进去 

 转载至简书：https://www.jianshu.com/p/3504a1edba42

收起

展开全文

原生小程序和vue（使用uniapp开发小程序）的语法区别
千次阅读 2020-11-17 17:25:58
判断动态添加class // vue版本 ... // 原生 <view class="{{current === index ? 'current' : '' }}"></view> 循环 // vue <view v-for="(item, index) in []" :key="index">
收起
小程序 uni-app
vue与原生混合开发
万次阅读 2018-07-06 10:09:08
前段时间，做了一个混合开发的项目，主要是以vue框架开发h5页面，使用cordova作为中间沟通桥梁，实现了h5与安卓、iOS的混合开发，由于从事iOS开发，h5也是刚接触不久，很多深入原理还不太清楚，只说下我们这个个项目...
收起
记一次在vue中引入原生js文件
2021-07-29 14:27:59
由于原生js采用的是html、css、js是静态资源，没有模块化，在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现: 1.在index.html页面使用script标签引入当然也可以使用cdn的...
收起
Vue相较于原生js的优点分析
2021-05-11 08:28:40
1.数据的自动绑定 2.页面参数传递和页面状态管理。 3.模块化开发、无刷新保留场景参数...比如两个vue路由（页面），它的路径是这样的：index.html#aaa 和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是i
收起
Vue：vue组件与原生未封装js的相互调用
2020-10-21 16:17:13
很久没更新博客了，最近在项目中遇到了这么一个问题，需要在Vue项目中，引入原生的js；也需要在原生的js中调用vue组件的函数。一、Vue中引入原生未封装js 一般情况下对于已封装的js文件，只需要import该js，然后...
收起
vue+原生App混合开发（vue中暴露js方法给android和ios调用）
千次阅读 2020-01-08 16:19:45
vue中暴露js方法给app(android和ios)调用首先声明以下例子（代码）适用于h5通过采用自定义Url拦截，JS回传数据的方式调取原生方法（即H5通过window.location=url的方式调用接口）。话不多说直接上代码： mounted...
收起
前端
用原生JS搞懂VUE的响应式原理，这篇文章就够了
千次阅读 多人点赞 2020-03-12 18:17:15
在实现之前我们先了解下VUE的响应式是什么；它是Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 ...VUE中实现响应式运用到了JavaScript中object的一个很重要的属性Object.defineProper...
收起
原生js模拟vue实现双向数据绑定
2019-09-05 14:29:20
原生js模拟vue实现双向数据绑定写在前面 vue.js是mvvm模式的框架，如图: 通过和传统mvc模式的对比，我们发现多了个ViewModel,没有控制器(controller)了。ViewModel是mvvm模式的精髓所在它连接了view(视图层)与...
收起
js
[笔记][转] vue.js原生组件化开发（一）—— 组件开发基础
2019-11-04 00:32:55
我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。那么不用脚手架，如何进行组件开发呢，本文先介绍一下...
收起
组件化
uniapp框架和原生小程序开发的区别以及和vue、react框架的相似之处
千次阅读 2020-11-27 21:52:34
1.vue的事件绑定可以直接传参数,而小程序需要使用自定义属性data  <button @click="btnClick(123)"> vue的按钮 </button>  <button bindtap="benClick" ...
收起
小程序 uni-app reactjs
vue.js开发实现全局调用的MessageBox组件实例代码
2020-11-28 23:08:25
最近在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是...
收起
NativeScriptVue使用NativeScript和Vue开发原生iOS和Android移动App
2019-08-08 02:46:08
该插件集成了Vue和NativeScript，允许您使用Vue构建跨平台的iOS和Android应用程序。
收起
vueselect一个原生Vuejs组件提供类似于的Select2功能
2019-08-10 09:42:28
vue-select 一个原生Vue.js组件提供类似于的Select2功能
收起
vue模拟原生页面跳转的最优解决方案
2021-01-05 20:24:25
为实现APP内嵌H5开发页面与原生页面实现同样的跳转效果，我们利用Vue 提供了 <transition> 组件在单页面应用下来模拟原生的页面跳转。因为项目需要用<keep-alive> 包裹缓存不活动的组件实例，所以原有...
收起
app
vue调取手机原生摄像头和相册
千次阅读 2020-05-06 10:28:37
个人总结的移动端拍照和相册原生方法 1. 图片显示 <div class="imgBox name"> <img :src="imgSrc" /> </div> 2.这里引用的vant插件样式 <van-action-sheet v-model="show1"> <ul>...
收起
html5 css
vue与原生app的对接交互的方法(混合开发)
万次阅读 2018-12-09 15:18:25
小伙伴们在用vue开发h5项目特别是移动端的项目，很多都是打包后挂载在原生APP上的，那就少不了与原生交互了，我把我踩的一些坑，拿出来给大家分享下。 1.通过url传输数据：（一般是在入口页面传下app的用户信息进来...
收起
app
vue实现类似ios原生picker效果的组件
2019-08-08 05:50:38
vue 实现类似 ios 原生picker 效果的组件
收起
vue+高德地图系列二 Vue项目引入原生高德地图
2020-12-23 10:27:02
vue + vue-cli3 + 高德地图一、AMap.js 项目里的引用文件，css，js链接，都以下列方式引入，重点注意插件的引用代码如下（示例）： // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key...
收起
vue-onsenui-使用HTML5和JavaScript的移动应用程序开发框架和SDK。创建美观，高性能的跨平台移动应用程序...
2021-05-27 21:05:13
Onsen UI-跨平台混合应用程序和PWA框架Onsen UI是一个开放源代码框架，可以轻松创建具有原生感觉的渐进式We Onsen UI-跨平台混合应用程序和PWA框架，Onsen UI是一个开放源代码框架易于创建具有本机感觉的渐进式Web...
收起
一个POC开发服务器允许您通过原生ES模块导入导入vue文件
2019-08-10 09:03:23
一个POC开发服务器，允许您通过原生ES模块导入导入`* .vue`文件
收起
为vue提供的仿原生iosconfirm组件
2019-08-12 02:27:08
为vue提供的仿原生ios confirm组件
收起
用原生js 实现 Vue axios AJAX 跨域调用 jsonp
2020-05-19 14:58:10
Vue axios 本身是不支持调用 jsonp 的，我在不添加第三方js框架(如jQuery)的前提下，实现 axios 跨域调用 jsonp
收起
vue.js项目中用原生js实现移动端的轮播图
千次阅读 2020-05-01 23:33:41
Vue.js项目中封装轮播图组件前言一、了解原生js移动端的事件前言今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题，因为不想因为一个轮播图而引用整个jquery，而且我还发现自己根本就不清楚移动端的...
收起
html

请谈一下你对 使用原生js开发和 使用vue开发的看法

请谈一下你对 使用原生js开发和 使用vue开发的看法

vue和原生js的优点分析

vue 使用外部JS与调用原生API操作示例

vue和原生ios和android的交互封装

vue里面写原生JS函数,安卓agentweb、webview与js操作，移动应用调用JS，移动混合开发JS互动

vue.js原生组件化开发（一）——组件开发基础

前言

组件使用流程

1.组件构建

1.1 extend构建法

1.2 template标签构建法

1.3 script标签构建法

2.注册组件

3.调用组件

4.例子

4.1 全局注册

4.2 局部注册

4.3 template及script标签构建组件

异步组件

原生小程序和vue（使用uniapp开发小程序）的语法区别

vue与原生混合开发

记一次在vue中引入原生js文件

Vue相较于原生js的优点分析

Vue：vue组件与原生未封装js的相互调用

vue+原生App混合开发（vue中暴露js方法给android和ios调用）

用原生JS搞懂VUE的响应式原理，这篇文章就够了

原生js模拟vue实现双向数据绑定

[笔记][转] vue.js原生组件化开发（一）—— 组件开发基础

uniapp框架和原生小程序开发的区别以及和vue、react框架的相似之处

vue.js开发实现全局调用的MessageBox组件实例代码

NativeScriptVue使用NativeScript和Vue开发原生iOS和Android移动App

vueselect一个原生Vuejs组件提供类似于的Select2功能

vue模拟原生页面跳转的最优解决方案

vue调取手机原生摄像头和相册

vue与原生app的对接交互的方法(混合开发)

vue实现类似ios原生picker效果的组件

vue+高德地图 系列二 Vue项目引入原生高德地图

vue-onsenui-使用HTML5和JavaScript的移动应用程序开发框架和SDK。 创建美观，高性能的跨平台移动应用程序...

一个POC开发服务器允许您通过原生ES模块导入导入vue文件

为vue提供的仿原生iosconfirm组件

用原生js 实现 Vue axios AJAX 跨域调用 jsonp

vue.js项目中用原生js实现移动端的轮播图

原生js开发和vue

请谈一下你对使用原生js开发和使用vue开发的看法

请谈一下你对使用原生js开发和使用vue开发的看法

vue+高德地图系列二 Vue项目引入原生高德地图

vue-onsenui-使用HTML5和JavaScript的移动应用程序开发框架和SDK。创建美观，高性能的跨平台移动应用程序...