vue的一些总结

他是渐进式JavaScript框架

实例化vue 初始化的时候有的参数是必须的比如:el data

New vue({

El:”指定的id名字” //挂载点 el相当于element

Data{

//数据

Message:“hello world”

}

})

两种显示方式:

{{message}}

V-text 指令

Vue的常用指令

v-bind指令

v-show指令

v-else指令

v-for指令

v-model指令

v-on指令

v-if指令

Vue的双向数据绑定

在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据。

循环

V-for=”变量名 in 被循环的数组”

触发事件

V-on:click=(“go()”)
//点击事件

@click=(fun) //点击事件

组件vue.component 里面有两个参数 一个是自定义的组件的名字另一个是对象里面有一个重要的属性就是template
它里面写的是你要把什么装到组件里面 还有一个props对象 里面有一个type属性检测这个对象是什么类型的 还有一个default可以设置他的默认。

Methods对象里面设置的是事件 例如删除 添加等等

vue-cli脚手架

Vue-cli

1.安装脚手架

npm install vue-cli -g 全局安装

2.初始化Vue项目

vue init webpack (项目名称,不能是中文)

3.npm install (安装配置文件)

4.Npm run dev 打开运行环境

路由:

路由在src下的router里

   页面在src 下的components里

   src 下的main.js是整个项目启动的入口文件

   src 下的App.vue是整个项目的跟组件

   index.js项目的入口文件

   src项目的开发源码目录

   config 项目相关的配置文件

   build 也是相关配置文件的相关信息

   static 项目的静态页面 

   vue-router路由使用

          1安装vue-router

     npm install vue-router--save-dev

          2 在入口文件载入 vue-router

            import VRouter from ‘vue-router’

使用

  Vue.use(VRouter)
  先需要导入Vue

   定义路由跳转连接

          

   路由激活时组件显示的位置

   

可以吧导航路由写在APP.vue里面然后在components文件里创建要跳转的路由,在index.js里面添加路由,有两种方法(1)可以在上面import导入一个文件,也可以写箭头函数:path:'/mintPage',

  component:resolve=>{require(['@/mint/mintPage'],resolve)}

第二种方法是按需加载,按需取数据 更好的节省了用户的操作时间。

子路由嵌套:在父路由里面写一个children然后里面配置子路由

跨域

解决跨域

  第一步

在config 下的index.js 里找到proxyTable进行修改 //proxyTable//代理转发

  修改后

     proxyTable:

{

     只要是带/api 就会认为访问的是target真是路径

     '/api':{

     target: 'http://api.douban.com/',//访问的地址

            changeOrigin: true, //改变源 是否改变

            pathRewrite: {

            '^/api':'/'  看见/api的就会把它修改成/

                  }

            }

      },

  第二部

安装 axios vue-axios
//做ajax请求

    npm    install axios vue-axios --save-dev

  第三部

     在main.js中引入模块 并做使用

        import  Axios from 'axios'

        import VueAxios from 'vue-axios'

        Vue.use(VueAxios,Axios)//使用



  第四步    export

default {

 data() {

                  return
          {

  movieList:[]

               }

            },

            methods:{

               getData(){

                  this.axios({                                                
                   url:'/api/v2/movie/in_theaters',

                     method:'get'

                  }).then((res)=>{

         this.movieList=res.data.subjects

          console.log(this.movieList)

      })
    }
  }

}

第五步

  
![](m.images.large)

{{m.title}}

动画

点击显示隐藏

data()返回一个属性,在需要显示隐藏的元素上用v-show=“返回的该属性名”或者用v-if=“返回的该属性名" 在点击按钮上用@click执行取反 返回的该属性名=!返回的该属性名

                

        v-enter:进入开始  
        v-enter-active:进入完成

        v-leave:开始离开  
        v-leave-active:离开完成

        .in-enter-active,.in-leave-active{
            transition:0.5s;
        }

        .in-enter{

            opacity:0;

            transform:translateX(300px);
        }

        .in-leave-active{
               opacity:0;
               transform:translateY(300px);
        }

mint-toast

  使用 Mint Ul

  安装

  1  npm install --save mint-ui

  2 在main.js中引入 import MintUI from 'mint-ui'  

  import 'mint-ui/lib/style.css'

  3 Vue.use( Mint-UI )

  如果想按需加载需要 babel-plugin-component 插件来管理

  安装babel-plugin-component插件

  npm install babel-plugin-component -D

  4 修改配置,static下的babelrc 里的plugins "plugins":["istanbul",["component",[{"libraryName":"mint-ui","style":true}]]]

  5  如果想使用button和Cell需要导入

  在main.js下导入  import {Button,Cell} from 'mint-ui

下拉刷新 上拉加载

可以使用mint-ui里面的模板制定html结构

mt-loadmore
ref="loadmore" :bottom-method="loadBottom"
:top-status.sync="topStatus">

     

{{m.title}}


可以自定义也可以用定义好的

进口import{loadmore}from “mint-ui”

import { Toast } from 'mint-ui';

export default{

  data(){

     return{

        topStatus:"",

        movieList:[]

     }

  },

  methods:{

     loadBottom(){

        *let

*start = this.movieList.length;

        *this*.axios({

            *url*:'/api/v2/movie/in_theaters?start='+start+'&count=10',

            method:'get'

        }).then((res)=>{

            *let *temp = res.data.subjects;

            if(temp.length==0){

               Toast('莫有了,不要再拉了大哥');

               return;

            }

            *this*.movieList = *this*.movieList.concat(temp);

            *this*.allLoaded = true;// if all data are loaded

            this*.$refs.loadmore.onBottomLoaded();

        })

     }

  },

  mounted(){

     *this*.axios({

        *url*:'/api/v2/movie/in_theaters?count=10',

        method:'get'

     }).then((res)=>{

        *this*.movieList = res.data.subjects;

        *console*.log(this*.movieList)

     })

  }

}

你可能感兴趣的:(vue的一些总结)