zoukankan      html  css  js  c++  java
  • 前台vue的使用简单小结

    前台vue的使用简单小结

            

    本项目要求:
    安装有node.js 6.0以及以上
    安装npm
    使用vue.js官方安装方法初始化项目
    npm install
    安装VueResurce:npm install vue-resource
    安装element-ui:npm i element-ui -S

    说明:
    一个基本的前端项目除了基本的HTML/Css/JS等外,不同的框架的组成部分都需要包括以下几部分:
    1.UI模块 2.路由模块 3.Http模块 4.状态模块

    本项目是用vue-cli + webpack创建项目
    项目的代码写在目录下的src目录内
    项目中已经用了VueRute和VueResurce两个插件来管理前端路由以及前端的Http请求。

    注:
    从整个项目来讲,除了上面两个插件外,还需要以下几个方面的插件
    1.UI界面框架,暂时在PC端选用element-ui或是vueStrap或是iview,keen-ui,移动端待定,可能会考虑兼容微信选用Vux,不过mint-ui、vue-material也在考虑之内
    2.本地存储
    3.前端状态管理,会使用最为成熟的vuex
    4.关于移动端的开发,我们将会是使用基于Vue或是同一系列的前端框架。在当前流行的框架中微信公众号开源了他们的WeUI,但是它不是基于Vue的,
    如果我们有前端项目不是Vue框架而是JQuery框架,这是个不错的选择。另一个是Weex,这是阿里开源的移动前端库,已经在全套的阿里系APP上使用了,
    有人说它里面对阿里的业务有点想引入,这个看需要了,但我想基础框架应当还是不错的。另外有在PC前端上开源做的很好的饿了么团队的移动端前端
    开源项目mint-ui,它是一套组件库,引用很方便,流行度很高。另外一个是国内的个人项目Vux,它的组件更丰富,结合了WeUI的很多基础组件,在微信公众号
    等场景下使用很多。最后还有一个国外项目Vue-material,流行度很高,组件丰富,但没去查它是由哪个公司或个人运维的。
    从国内流行度上讲,我们的前端框架应当从Weex,Vux,Mint-ui三者中选一个。不过Weex是一个具备混合开发能力的大体系,学习曲线可能会高一点点。但是Weex和
    其它两个相比,明显在层次上要高一级,事实上,是可以同时使用这三者的,因为Mint-ui是一个组件库,而Vux也是一个组件库,这两个才是有重合部分的。但
    它们都是基于Vue的,所以可以共同,而Weex是一种基于Vue实现现的跨平台环境,因此一种合理的设想是以Weex为基础,来实现App的跨平台以及和源生代码的融合
    在开发组件上,可以适当引用Vux和mint-ui.不过事实上Weex改变了很多Vue的基本语法,致使原有的Vue项目很难直接使用。因此想将三者融合,可能并不好处理。
    Weex事实上,从趋势来看,它已经正在向着跳出Vue而自成体系的方向发展。如果准备做Vue项目,可能从一开始就要想好是否要采用Weex。
    Weex其实应当和Ract Native是同一个物种。其它类似的还有Wex5,ApiCloud,DCloud,HBuilder等。

    /*
    Vue的基本知识点说明:
    一个典型的Vue实例包括了以下的基本结构:
    Tips:Vue(parma) 是一个构造函数。它的参数是一个js对像。这个js对像就是下面讲的Vue对像实例。
    var vm=new Vue(
    {
    el:'这里写的是Vue实例挂载的容器元素(Html元素,一般是一个Div)的Id。',
    template:'这里写的是这个实例的HTML模板,这是一个HTML片段',
    data:'Vue实例里定义的数据。一般也定义为一个js对像。但对像中只有数据',
    watch: 'Vue的数据监视器功能。一般会定义一个js对像,其成员格式是定义一个和要监视的数据同名的functon。例如{myData:function(){};}',
    methods:'Vue实例定义的方法集合。一般也会定义为一个js对像。其成员按需要定义function',
    computed:'Vue的计算属性。效果有点像watch,但是在对数据成员的处理上写法更简洁,效率更好(它们之间的区别可以看官方文档)。它默认定义了getter,你可依据需要自行定义setter',
    components:'Vue对像的子组件清单。清单最好是一个js数组,它的每一项是一个Vue对像或是一个Vew.component对像',

    //Tips:以下三个是定义组件时对外公开的重要接口
    events:'',
    slot:'',
    props:'自定义组件的自定义属性,可以像html元素的属性一样使用。这里通常会定义为一个js数组以便定义多个属性',

    //Tips:Vue实例中的各成员一般定义为一个js对像不是意味着必须定义为一个js对像。它完合可以按js的语法直接定义一个数据或是function;
    //Tips:Vue实例的构造函数中定义的这个对像要求的成员不都是必须的。可按需要来写;

    }
    );


    Tips:
    Vue组件的生命周期共会触发以下几个函数
    create:
    beforeCompile:
    compiled:
    ready:
    beforeDestroy:
    destoryed:


    Vue在Html上的一些基本知识点:
    Tips:这部分的知识在官方文档内叫做模板语法。
    V-标识:在Html的元素属性上要应用Vue,必须有V-标识前缀的属性修饰。
    常用的标识(它修是Vue预定义好的指令):v-on(可缩写为@),v-if,v-bind(可缩写为:),v-html,v-for,v-model,v-show
    */

  • 相关阅读:
    定义 : angular view 和controller 之前的 ng-init 由谁来负责
    pl/sql如何在云端服务器上新建数据库
    oracle连接服务器上数据库
    svn check下来的代码在eclipse中没有run on server
    sql server在修改表结构后不能保存
    用mybatis-generator自动生成代码报“前言中不允许有内容”
    启动Tomact时报failed to start conponent
    spring MVC中controller失效
    maven项目中连接sqlserver和mysql的区别
    DBCP连接池的配置
  • 原文地址:https://www.cnblogs.com/daiwei1981/p/8599279.html
Copyright © 2011-2022 走看看