精华内容
下载资源
问答
  • 请谈一下你对 使用原生js开发和 使用vue开发的看法 原生js DOM操作频繁,代码繁杂 DOM操作与逻辑代码混合,可维护性差 不同功能区域书写在一起,可维护性低 模块之间的依赖关系复杂 vue 数据驱动视图 组件化...

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

    原生js
    	面向浏览器编程,需要写很多兼容性代码
    	操作dom更繁琐,复杂交互需要频繁操作dom,且代码不够友好
    	可扩展性和可维护性没有保证
    	团队协作困难
    	开发效率低下
    vue
    	1)优点 :
            基于MVVM 实现的数据驱动视图,解放了DOM操作
            View 与 Model 分离处理, 降低代码的耦合度
        2)缺点:
            当双向绑定时,Bug调试难度增大
            大型项目中,View和Model过多,维护成本过高
    
    展开全文
  • vue和原生js的优点分析

    千次阅读 2020-12-30 10:38:35
    我们的这篇文章,帮助大家分析vue相对原生js的优缺点,vue的一些好处如下: 一、控件跟数据自动绑定,可以直接使用data里面的数据值来提交表单,而不需要再使用$("#myid").val()那一套方法来获取控件的值,对控件...

    很多多年经验的程序,习惯了使用原生html和js来开发前端页面,对于很多没用过vue的程序员来说,觉得vue没有必要。

    我们的这篇文章,帮助大家分析vue相对原生js的优缺点,vue的一些好处如下:

    一、控件跟数据自动绑定,可以直接使用data里面的数据值来提交表单,而不需要再使用$("#myid").val()那一套方法来获取控件的值,对控件赋值也方便很多,只需要改变data的值,控件就会自动改变值。将复杂的界面操作,转化为对数据进行操作。

    比如下面的一段代码就可以很简单的实现了select控件的里面的列表的动态管理:

    html代码:

    <el-select v-model="mType" style="flex: 1;">
      <el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
    </el-select>

    js代码:

    data(){
        return{
        mType:'',
        enums:[{value:0,label:'正常'},{value:1,label:'拉黑'}]
      }
    }

    二、页面参数传递和页面状态管理。

    页面传值对于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操作。分享给大家供大家参考,具体如下: vue 使用外部JS 概要 在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js,然后进行使用。 实现方法 我们在开发的...
  • vue和原生(ios和android)的交互封装
  • 最近在做安卓混合开发时,遇到几个坑,在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-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  

    展开全文
  • 判断动态添加class // vue版本 ... // 原生 <view class="{{current === index ? 'current' : '' }}"></view> 循环 // vue <view v-for="(item, index) in []" :key="index">
  • vue原生混合开发

    万次阅读 2018-07-06 10:09:08
    前段时间,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为中间沟通桥梁,实现了h5与安卓、iOS的混合开发,由于从事iOS开发,h5也是刚接触不久,很多深入原理还不太清楚,只说下我们这个个项目...
  • 由于原生js采用的是html、css、js是静态资源,没有模块化,在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的...
  • 1.数据的自动绑定 2.页面参数传递页面状态管理。 3.模块化开发、无刷新保留场景参数...比如两个vue路由(页面),它的路径是这样的:index.html#aaa index.html#bbb,但对于搜索引擎来说,都是同一个页面,就是i
  • 很久没更新博客了,最近在项目中遇到了这么一个问题,需要在Vue项目中,引入原生js;也需要在原生js中调用vue组件的函数。 一、Vue中引入原生未封装js 一般情况下对于已封装的js文件,只需要import该js,然后...
  • vue中暴露js方法给app(androidios)调用 首先声明以下例子(代码)适用于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实现双向数据绑定 写在前面 vue.js是mvvm模式的框架,如图: 通过传统mvc模式的对比,我们发现多了个ViewModel,没有控制器(controller)了。ViewModel是mvvm模式的精髓所在它连接了view(视图层)与...
  • 我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。那么不用脚手架,如何进行组件开发呢,本文先介绍一下...
  • 1.vue的事件绑定可以直接传参数,而小程序需要使用自定义属性data <!-- vue --> <button @click="btnClick(123)"> vue的按钮 </button> <!-- 小程序 --> <button bindtap="benClick" ...
  • 最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是...
  • 该插件集成了Vue和NativeScript,允许您使用Vue构建跨平台的iOS和Android应用程序。
  • vue-select 一个原生Vue.js组件提供类似于的Select2功能
  • 为实现APP内嵌H5开发页面与原生页面实现同样的跳转效果,我们利用Vue 提供了 <transition> 组件在单页面应用下来模拟原生的页面跳转。 因为项目需要用<keep-alive> 包裹缓存不活动的组件实例,所以原有...
  • 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>...
  • 小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下。 1.通过url传输数据:(一般是在入口页面传下app的用户信息进来...
  • vue 实现类似 ios 原生picker 效果的组件
  • vue + vue-cli3 + 高德地图 一、AMap.js 项目里的引用文件,css,js链接,都以下列方式引入,重点注意插件的引用 代码如下(示例): // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key...
  • Onsen UI-跨平台混合应用程序PWA框架Onsen UI是一个开放源代码框架,可以轻松创建具有原生感觉的渐进式We Onsen UI-跨平台混合应用程序PWA框架,Onsen UI是一个开放源代码框架易于创建具有本机感觉的渐进式Web...
  • 一个POC开发服务器,允许您通过原生ES模块导入导入`* .vue`文件
  • vue提供的仿原生ios confirm组件
  • Vue axios 本身是不支持调用 jsonp 的,我在不添加第三方js框架(如jQuery)的前提下,实现 axios 跨域调用 jsonp
  • Vue.js项目中封装轮播图组件前言一、了解原生js移动端的事件 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个jquery,而且我还发现自己根本就不清楚移动端的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,891
精华内容 11,156
关键字:

原生js开发和vue

vue 订阅