zoukankan      html  css  js  c++  java
  • Vue总结

    vue到底是什么?
    一个mvvm框架(库)、和angular类似
    面向数据的思想

    vue和angular区别?
    vue——简单、易学
    指令以 v-xxx
    一片html代码配合上json,在new出来vue实例

    适合: 移动端项目,小巧

    vue的发展势头很猛,github上start数量已经超越angular


    angular——上手难
    指令以 ng-xxx
    所有属性和方法都挂到$scope身上
    angular由google维护

    合适: pc端项目

    共同点: 不兼容低版本IE
    -------------------------------------------
    vue基本雏形:

    vue:
      html:
        <div id="box">
          {{msg}}
        </div>
      js:
        var c=new Vue({
        el:'#box', //选择器 class tagName
        data:{
          msg:'welcome vue'
          }
        });
      注:this---> 指向new的vue对象

    常用指令:

    指令: 扩展html标签功能,属性

    v-model 一般表单元素(input) 双向数据绑定


    事件:
    v-on:click="函数"
    v-on:click="show()"
    注:如果不传参可以把括号省略
    简写:@click=""

    v-on:click/mouseout/mouseover/dblclick/mousedown.....

    new Vue({
      el:'#box',
      data:{ //数据
        arr:['apple','banana','orange','pear'],
        json:{a:'apple',b:'banana',c:'orange'}
      },
      methods:{
        show:function(){ //方法
          alert(1);
        }
      }
    });


    显示隐藏:
    v-show="true/false"
    v-show="bShow"
    v-show="a>1"
    v-show="真/假"

    真:true,非空字符串,非0的数字,非空对象
    假:false,空串('',' '),0,null,undefined,NaN

     

    -----------------------------------------

    事件对象:
    @click="show($event)"


    阻止冒泡:
    a). ev.cancelBubble=true;
    b). @click.stop 推荐


    阻止默认行为:
    a). ev.preventDefault();
    b). @contextmenu.prevent 推荐


    键盘:
    @keydown 【$event】 ev.keyCode

        @keyup="show($event)"

        show:function(ev){
          ev.keyCode
        }

     

    常用键:
    回车
    a). @keyup.13
    b). @keyup.enter
    上、下、左、右
    @keyup/keydown.left
    @keyup/keydown.right
    @keyup/keydown.up
    @keyup/keydown.down
    .....
    -----------------------------------------
    属性:
    v-bind:src=""
    width/height/title....

    简写:
    :src="" 推荐

    <img src="{{url}}" alt=""> 效果能出来,但是会报一个404错误
    <img :src="url" alt=""> 效果可以出来,不会发404请求
    -----------------------------------------
    class和style:
    :class=""   v-bind:class=""
    :style=""    v-bind:style=""

    --------------------------
    style:
    :style="[c]"
    :style="[c,d]"
    注意: 复合样式,采用驼峰命名法
    :style="json"
    -----------------------------------------
    模板:
    {{msg}} 数据更新模板变化
    {{*msg}} 数据只绑定一次,初始化是什么就是什么

    {{{msg}}} HTML转译输出  【2.x中已删除】
    -----------------------------------------
    过滤器:-> 过滤模板数据

    {{msg| filterA}}
    {{msg| filterA | filterB}} 可以多个过滤器同时用

    uppercase 

      {{'welcome'| uppercase}}
    lowercase
    capitalize

    currency 货币

      {{msg| filterA 参数}}

    debounce 配合事件,延迟执行

    limitBy 2 0

      只写一个参数,截取数组几个
      写两个参数,第一个是截取几个,第二位是下标从哪里开始

    filterBy  'li'    获取包含li的

    orderBy -1    倒序排列,1为正序排列

    json  把json解析成字符串

    -----------------------------------------
    交互:
    $http (ajax)

    如果vue想做交互

    引入: vue-resouce

    get:
    获取一个普通文本数据:

      this.$http.get('aa.txt').then(function(res){
          alert(res.data);
        },function(res){
          alert(res.status);
        });

    给服务发送数据:√

      this.$http.get('get.php',{
          a:1,
          b:2
        }).then(function(res){
          alert(res.data);
        },function(res){
          alert(res.status);
        });

    -----------------------------------------

    post:
      this.$http.post('post.php',{
          a:1,
          b:20
        },{
          emulateJSON:true
        }).then(function(res){
          alert(res.data);
        },function(res){
          alert(res.status);
        });

    -----------------------------------------

    jsonp:
      this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
        wd:'a'
      },{
        jsonp:'cb' //callback名字,默认名字就是"callback"
      }).then(function(res){
        alert(res.data.s);
      },function(res){
        alert(res.status);
      });

    https://www.baidu.com/s?wd=s

    https://sug.so.360.cn/suggest?callback=suggest_so&word=a

    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

    ================================================================


    vue制作weibo
    交互

    vue-> 1.0
    vue-resource ajax 

    this.$http.get()/post()/jsonp()

    this.$http({
      url:地址
      data:  给后台提交数据,
      method:'get'  /post/jsonp
      jsonp:'cb'   //cbName (jsonp的时候用)
      emulateJSON :true   //设置文档头(post的时候用)
    });
    ----------------------------------

    vue生命周期————钩子函数:
    1.x
      初始化实例 init
      实例已经创建 created √
      编译之前 beforeCompile
      编译之后 compiled
      数据插入到页面 ready √

      销毁之前 beforeDestroy
      销毁之后 destroyed

    2.x
      创建之前 beforeCreate
      创建之后 created
      编译之前 beforeMount
      编译之后 mounted
      更新之前 beforeUpdate
      更新之后 updated
      销毁之前 beforeDestroy
      销毁之后 destroyed
    ----------------------------------

    用户会看到花括号标记:

      v-cloak 防止闪烁, 比较大段落

      html中加 v-cloak

      style 中加    [v-cloak] { display:none; }

    ----------------------------------

    <span>{{msg}}</span> ---> v-text

    <span v-text = 'msg'></span>
    <span v-html = 'msg'></span>


    注:二者都会把标签中原有内容清空

    ----------------------------------

    计算属性的使用:
    computed:{
      b:function(){    //默认调用get
        return 值
      }
    }
    --------------------------

    完整的写法:
    computed:{
      b:{
        get : function(){

          return this.a+2;

        },
        set : function(val){

           this.a=val;

        }

      }
    }

    * computed里面可以放置一些业务逻辑代码,一定记得return
    ---------------------------------
    vue实例简单方法:
    vm.$el -> 就是元素      【vm.$el.style.background='red'】
    vm.$data -> 就是data  【vm.$data.msg】
    vm.$mount -> 手动挂在vue程序  【new Vue({ ... }).$mount('#box')】

    vm.$options -> 获取自定义属性  【vm.$options.my_info】
    vm.$destroy -> 销毁对象

    vm.$log(); -> 查看现在数据的状态
    vm.$watch('要监控的数据',function(newVal, oldVal){
    变化后干得事情
    },{deep:true})
    ---------------------------------
    循环:
    v-for="value in data"

    会有重复数据?
    track-by='索引' 提高循环性能

    track-by='$index/uid'
    ---------------------------------

    自定义过滤器: model ->过滤 -> view
      Vue.filter(name,function(input){

      });

    双向过滤器:*
    Vue.filter('filterHtml',{
      read:function(input){     //model-view
        return input.replace(/<[^<+]>/g,'');
      },
      write:function(val){   //view -> model
        return val;
      }
    });

    数据 -> 视图
    model -> view

    view -> model
    ---------------------------------

    自定义指令:(属性指令)

    Vue.directive(指令名称,function(参数){
      this.el ---> 原生DOM元素
    });

    <div v-red="参数"></div>

    指令名称: v-red ---> red

    * 注意: 必须以 v-开头

    自定义键盘指令:


    ------------------------------------------------
    v-for:
    1.0之前
    数组:$index json:$key
      (i,v) in arr
      (k,v) in json

      track-by="$index"

    2.0
    参数的顺序调换了
    去掉了$index
    去掉了$key
      (v,i) in arr
      (v,k) in json
      (v,k,index) in json

    可以写重复的数据 如果也想改 :key="i"

    还可以循环数字
      <li v-for="n in 10">{{n}}</li>

    ------------------------------------------------
    监听数据变化:
    vm.$el/$mount/$options/....

    vm.$watch(name,fnCb);      //浅度
    vm.$watch(name,fnCb,{deep:true});    //深度监视
    ------------------------------------------------
    vue组件:
      组件间各种通信
      slot
      vue-loader   webpack    .vue
      vue-router


    =======================================================

    引入 vue.js

    bower ---> (前端)包管理器
    npm install bower -g
    查看版本信息: bower --version

    bower install <包名>
    bower uninstall <包名>
    bower info <包名> 查看包版本信息

    <script src="bower_components/vue/dist/vue.js"></script>
    -------------------------------------
    vue-> 过渡(动画)
    本质走的css3: transtion ,animation

    <div id="div1" v-show="bSign" transition="fade"></div>

    动画:
      .fade-transition{

      }
    进入:
      .fade-enter{
        opacity: 0;
      }
    离开:
      .fade-leave{
        opacity: 0;
        transform: translateX(200px);
      }
    ----------------------------------------
    vue组件:

    全局组件:
    Vue.component('ccc',{
      data(){
        return {      //组件里面放数据必须使用函数的方式,且要return出去一个json对象
          msg:'^_^'
        }
      },

      methods:{

        show(){

          alert(1);

        }

      },
      template:'<p>这是第三种组件{{msg}}</p>'
    });


    var Home={
      template:'<h2>这是2.0组件的定义新方法</h2>'
    };
    --------------------------------------

    局部组件:
      var vm=new Vue({
        el:'#box',
        components:{
          'ccc':{
            template:'<p>第四种组件</p>'
          }
        }
      });

    --------------------------------------------

    动态组件:
    <component :is="组件名称"></component>

    --------------------------------------------
    组件中模板的写法
    1. 字符串:
      template:'<p>第四种组件</p>'

    2.script标签:
      <script type="x-template" id="ddd">
        <div>
          <i>这是第二种模板</i>
          <span>你好</span>
        </div>
      </script>

    3.html标签:
      <template id="eee">
        <div>则是第三个模板</div>
      </template>

    --------------------------------------------

    vue默认情况下,子组件也没法访问父组件数据


    组件数据传递: √
    1. 子组件想获取父组件data
      在父级模板中:
        <template id="aaa">
          <h1>111</h1>
          <bbb :mmm="msg"></bbb> //msg是父级的数据,命名如果有-在子组件调用的时候改为驼峰
        </template>
      在子组件的对象中:
        props:['mmm'],
        template:'<p>我是子组件--->{{mmm}}</p>'

    2. 父组件获取子组件的数据
      1.子组件把自己的数据,发送到父级

        vm.$emit( "child-msg" , this.msg );  //msg就是子级的数据

      2.父组件去接受数据

        在父组件模板中
          <span>我是父组件--->{{msg}}</span>
          <bbb @child-msg="get"></bbb>
        在父级方法中
          methods:{
            get:function(msg){
              //alert(msg)
            }
          }
    --------------------------------------------
    vm.$dispatch(事件名,数据) 子级向父级发送数据
    vm.$broadcast(事件名,数据) 父级向子级广播数据
    配合: event:{}

    在vue2.0里面已经废除。
    --------------------------------------------
    slot:
    类似ng里面 transclude (指令)

    多个占位符
      <ul slot="ul-slot">
        ......
      </ul>
      <ol slot="ol-slot">
        ......
      </ol>


      <slot name="ul-slot"></slot>
      <h1>我是h1</h1>
      <slot name="ol-slot"></slot>
    --------------------------------------------
    vue-> SPA应用,单页面应用
    vue-resouce 交互
    vue-router 路由


    2.0版的路由嵌套:

    <div id="box">
      <div>
        <router-link to="/home">首页</router-link>
        <router-link to="/user">用户</router-link>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>

    // 定义组件
    var Home={
      template:'<h1>This is Home</h1>'
    };
    var User = {
      template:`
        <div>
          <h1>This is User</h1>
          <ul>
            <li><router-link to="/user/username1">show username1</router-link></li>
            <li><router-link to='/user/username2'>show username2</router-link></li>
          </ul>
          <router-view></router-view>
        </div>
       `
    };
    var Username1={
      template:'<p>I am username1</p>'
    };
    var Username2={
      template:'<p>I am username2</p>'
    };

    // 配置路由 变量routes是固定的
    var routes=[
      {path:'/home',component:Home},
      {path:'/user',component:User,children:[
        {path:'username1',component:Username1},
        {path:'username2',component:Username2}
      ]},
      {path:'*',redirect:'/home'}
    ];

    // 使用路由实例,变量router是固定的
    var router = new VueRouter({
      routes
    });

    // 挂载到Vue
    new Vue({
      el:"#box",
      router
    });

     


    --------------------------------------

    路由嵌套(多层路由):

    主页 home
    登录 home/login
    注册 home/reg
    新闻页 news

    subRoutes:{
      'login':{
        component:{
          template:'<strong>我是登录信息</strong>'
        }
      },
      'reg':{
        component:{
          template:'<strong>我是注册信息</strong>'
        }
      }
    }
    路由其他信息:
    /detail/:id/age/:age

      {{$route.params | json}} -> 当前参数

      {{$route.path}} -> 当前路径

      {{$route.query | json}} -> 数据
    --------------------------------------------
    vue-loader:
      其他loader -> css-loader、url-loader、html-loader.....

    后台: nodeJs -> require exports
      broserify 模块加载,只能加载js
      webpack 模块加载器, 一切东西都是模块, 最后打包到一块了

      require('style.css'); -> css-loader、style-loader


    vue-loader基于webpack


    .vue文件:
    放置的是vue组件代码

    <template>
      html
    </template>

    <style>
      css
    </style>

    <script>
      js (平时代码、ES6) babel-loader
    </script>
    -------------------------------------
    简单的目录结构:
    |-index.html
    |-main.js       入口文件
    |-App.vue      vue文件,官方推荐命名法
    |-package.json    工程文件(项目依赖、名称、配置)
    npm init --yes     生成
    |-webpack.config.js   webpack配置文件

    ES6: 模块化开发
    导出模块:
      export default {}
    引入模块:
      import 模块名 from 地址
    --------------------------------------------

      cnpm install webpack --save-dev
      cnpm install webpack-dev-server --save-dev

    App.vue -> 变成正常代码 vue-loader@8.5.4
    cnpm install vue-loader@8.5.4 --save-dev

    vue-html-loader
    css-loader
    vue-style-loader
    vue-hot-reload-api@1.3.2

    babel-loader
    babel-core
    babel-plugin-transform-runtime
    babel-preset-es2015
    babel-runtime

    // Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。


    ==================================================

     webpak 搭建脚手架工作:

     

    开发环境基于nodejs
    npm
    webpack
    vue的组件都是通过.vue文件来实现,这些文件无法被浏览器解析的,需要webpack


    vue-cli 脚手架
    用来生成vue的模板(架子),相当于按照设计图搭建好房子的架子。
    ---------------------------------
    开发步骤
    1、下载node
    2、下载webpack
      npm install webpack -g
    3、安装脚手架
      npm install vue-cli -g
    4、根据模板创建项目
      simple 完全没用
      webpack-simple 用他
      webpack 有校验
      browserify-simple
      browserify

      找到文件夹进去
        vue init <模板的名称> 工程的名称(不用用中文)
        vue init webpack-simple[#1.0]  demo

      项目名称
      项目描述
      作者
      是否用sass
    5、进入项目文件夹
    6、npm install
      下载依赖项(各种loader)
    7、安装路由和交互
      npm install vue-router vue-resource --save
    8、启动项目
      npm run dev
    ------------------------------
    编写项目
    App.vue 主文件

    所有的html写在 template
    模板里面必须有一个根文件

    所有的js
    <script>
      export default {
        name: 'app',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        },
        methods:{
        }
       }
    </script>
    数据必须放在函数的返回值中
    -----------------------------------
    组件的写法
    1、创建文件 .vue结尾
    2、写文件
      <template>
        写html
      </template>

      <script>
        export default {
          data(){
            return {}
          },
          methods:{

          }

        }
    </script>

    <style>
      写样式
    </style>
    3、在主组件中引用
      a)import XXX from ‘上面创建的文件的路径’
      b)挂在js里

        data(){

        },
      components:{XXX}
      c)在template里面用


      <XXX></XXX>
    ----------------------------
    路由
    1、修改文件
      找到webpack.config.js
      看有没有
        resolve: {
          alias: {
            'vue$': 'vue/dist/vue.esm.js'
          }
        }

    如果没有
      resolve: {
        alias: {
          'vue':'vue/dist/vue.js'
        }
      }
    2、再准备一些组件
    3、修改main.js(入口文件)
      a)引入路由文件
        import VueRouter from 'vue-router'
      b)开启路由
        Vue.use(VueRouter);
      c)写模板,或者是引入模板
        const First={
          template:'<div>我是第一个模板</div>'
        };
       import second from './component/second.vue';
      d)配置路由
        const router=new VueRouter({
          routes:[
            {path:'/first',component:First},
            {path:'/second',component:second}
          ]
      })
      e)在vue中把路由挂载上
        new Vue({
          router,
          el: '#app',
          render: h => h(App)
        })
    f)在主模板中写路由的按钮和展示
      <router-link to="/first">111</router-link>
      <router-link to="/second">111</router-link>
      <router-view></router-view>


    项目打包
      npm run build
    会生成一个文件dist文件


    别人拿到代码
    npm install
    npm run dev
    上线【上线要用dist文件】

     ==========================================

    vue中引入base.css的时候,需要在APP.vue中使用@import  url('./base.css');

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    Cron表达式说明
    exe4j 使用记录(二):jar打包exe
    exe4j 使用记录(一):下载、安装及注册
    Sublime Text3添加右键
    jenkins 入门教程
    Visual Studio设置字体及护眼背景色
    Visual Studio 设置C#语言代码格式
    Visual Studio 常用快捷键
    Maven中使用本地JAR包
    oracle 查看锁表及解锁的语句
  • 原文地址:https://www.cnblogs.com/chiangyibo/p/7061828.html
Copyright © 2011-2022 走看看