Vue学习总结

2017-07-25 17:55 grows 阅读(1800) 评论(0) 编辑收藏举报

1.vue是什么

vue： 渐进式的js框架（先看到做核心的东西，然后再根据需求进行增加，比较灵活）

自底向下（先关注最基础的部分，接着逐渐扩大）

只关注视图层

组件化

响应式设计（响应式：一个网页，根据分辨率的不同，改变网页大小，例如bootstrap就是响应式的，适应式：多个不同的网页，根据分辨率的不同自动选择不同的页面）

2.优缺点

优点：简单

轻量

组件解耦

超快虚拟dom

缺点：

出现晚（2014）不支持低版本，IE8一下不支持

仅限于view层，ajax需要额外的框架

3.项目示例

具体介绍：

采用 vue +vuex +axios

Vue前端框架，

Vuex 进行状态管理

Axios 利用json与后台进行数据交换

vue-router 页面之间的跳转

Conponot 组件组成页面

问题：打包放在放在服务器上怎样和controller进行交互

4.项目搭建：

1）安装npm包资源管理器（node.jsan安装）node官网下载测试 node –v npm -v

2）安装cnpm淘宝镜像（是npm的中国版，npm有时比较慢）

npm install -g cnpm --registry=http://registry.npm.taobao.org

3）安装vue-cli脚手架（快速搭建支撑实际项目开发的vue环境，省去手工配置开发环境，运行环境和测试环境的步骤，）cnpm install -g vue-cli

4）创建项目时，进入创建项目的目录中创建名为firstVue的项目，vue init webpack firstVue ，具体结构如下：--运行项目时不需要此步骤

5）安装依赖包，进入项目所在的文件夹下，运行cnpm install

6）运行项目：cnpm run dev （在项目所在的文件夹下运行）

7）生成项目 cnpm run build（在项目所在的文件夹下运行），产生dist文件夹，可以拷贝到eclipse项目中

8）需要什么组件在进行安装

4.快速搭建与后台进行交互

5.主要模块进行学习

1)基础学习

Vue的生命周期

首先进行new vue()

Before create 事件钩子这是还没有任何数据

Data obverse 数据观测主要进行 data对象里面的数据进行监测

Init event ：进行vue内部的初试话

Create 事件钩子

判断是否el 选项

是

判断是否有Template 选项模板选项

是

编译模板把 data里面的数据和模板编译成html

否：

编译外部的模板成html

Before Mount 事件钩子在html还没有附加到页面上之间可以进行操作

Mounted 事件钩子附加到页面之后可以进行操作

Before destroy 事件钩子在页面销毁之间可以进行的操作

Destroy 事件钩子页面销毁之后进行操作

Before update 事件钩子更新之前可以进行操作

updated 事件钩子更新之后可以进行操作

2）组件学习

组件是vue强大的功能之一

组件的声明以及注册 vue.component全局组件 vue.extend({})普通的组件

注：table ol ul selected限制了里面包含的元素，所以用自定义的元素可能出错，这时可以用属性is=“组件名”来使用

当使用来自以下来源之一的字符串模板，这些限制将不适用：

<script type="text/x-template"> 模板主要为了从js中抽离html代码，再通过js获得等进行操作
JavaScript 内联模版字符串
.vue 组件

父子组件之间的通讯

组件之间的实例是相对独立的，那么父子组件进行数据的传递则需要 父组件使用 pros向下传递数据 子组件使用 event向上传递数据

就像data一样想模板里面传数据，但是data必须返回函数

3）路由：页面间导航 vue-router

通过<router-link to="/userlist" class="">用户列表</router-link> 点击进行页面的导航

通过<router-view></router-view> router路径下的模板展示的出口

Js中

声明route对象进行路径与组件之间的映射，注册进VueRouter中

把vuerouter对象注册进 Vue中

4）表单处理

v-bind 指令用于响应地更新 HTML 特性形式如：v-bind:href 缩写为 :href;

v-on 指令用于监听DOM事件形式如：v-on:click 缩写为 @click;

v-model绑定表单中输入或者选中的值

Newuser.name中存储的就是输入框的值，

其他的类似

5）服务器处理

利用vue的插件axios进行链接后台，

例子：

axios.post('/update', formData)
               .then((response) => {
              //成功时返回的函数
返回数据用response.Data获得
               },
               (response) => {
                //失败时返回的函数
               });

其中可以用post 可以替换成 get

多并发请求：

6）状态管理

vuex 多个组件需要公共的状态的时候，

朦朦胧胧实践才能够更加了解

1. 为什么使用vuex组件之间共享变量比较难，

加载下个页面，当前页面就会销毁，那么共享的状态就会做成全局变量，但是维护起来比较难，这时候就出现了vuex进行统一的管理

2. vuex包括一下部分

state:用来存储全局的数据

getters:读取器，定义方法，外部可以访问方法返回全局变量的数据

mutations：修改器：用于修改state中的数据

actions：动作，相当于springMVC中的controller用于component和mutations之间进行数据交流

modules:模块，当处理的类型比较多时，可以进行模块的划分挂载到vuex。

Plugin:用于想vuex引入插件

3. 具体使用

在main.js中引用store

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import $ from 'jquery'
import './bootstrap/js/bootstrap.min.js'
import './bootstrap/css/bootstrap.min.css'
import ElementUI from  'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

创建store文件夹，创建index.js 里面引用vuex，默认导出Vue.x.store实例对象其中包括上面的各个部分：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

const store = new Vuex.Store({//Vuex的实例
  state: {
    unlock:false,
    all:[]
  },
  getters:{
    all: state=> state.all
  },
  actions:{
    //获得users
    getMessage(context){
      var userslist=[{name: '张三',gender: '1',date:'2017-4-5',phone:'235',address:'235'},
        {name: '李四',gender: '2',date:'2017-04-05',phone:'221135',address:'23115'},
        {name: '王五',gender: '1',date:'2017-04-25',phone:'22435',address:'23115'},
        {name: '麻子',gender: '1',date:'2017-04-15',phone:'23325',address:'235wesd'}]
      context.commit('UPDATA_USERS',userslist);
    /*  axios.post('/getmessgae')
        .then((response) => {
            console.log(response.data);
            context.commit('UPDATA_USERS',response.data);
          },
          (response) => {
            alert("系统加载错误！请重试");
          });
   */
    },
    //登陆
    userlogin(context,user){
      //测试数据

    if(user.name=='123'&& user.password=='123'){
        context.commit('UNLOCK');
        return true;
      }else{
        return false;
      }
  /*  var formData = JSON.stringify(user); // 这里才是你的表单数据
     axios.post('login',formData)
        .then((response)=>{
          context.commit('UNLOCK')
          return true;
        },
          (response) => {
            alert("系统加载错误！请重试");
            return false;
          })
       .catch(err => {
             return false;
       })*/
    },
    //删除
    deleteUser(context,name){
     /* var s_data={'姓名':name};
      var formData = JSON.stringify(s_data); // 这里才是你的表单数据
      console.log("formdata:"+formData);
      axios.post('/delete', formData)
        .then((response) => {
            console.log(response.data);
            if(response.data!=null){
              console.log("成功");
             context.commit('DELETEUSER',name);

            }
          },
          (response) => {
            alert("系统加载错误！请重试");
          });*/
     console.log("actions dele name"+name);
      context.commit('DELETEUSER',name);
    },
    addUser(context,user){//新增
     /* var formData = JSON.stringify(this.user); // 这里才是你的表单数据
      console.log("formdata:"+formData);
      axios.post('/register', formData)
        .then((response) => {
            console.log(response.data);
            if(response.data!=null){
              context.commit("ADDUSER",user);
              return true;
            }else{
            return false;
          },
          (response) => {
            alert("系统加载错误！请重试");
          });*/
      context.commit("ADDUSER",user);
    },
    updateUser(context,user){//修改
      /* var formData = JSON.stringify(this.user); // 这里才是你的表单数据
     console.log("formdata:"+formData);
     axios.post('/updateUser', formData)
       .then((response) => {
           console.log(response.data);
           if(response.data!=null){
             context.commit("UPDATEUSER",user);
             return true;
           }else{
           return false;
         },
         (response) => {
           alert("系统加载错误！请重试");
         });*/
      context.commit("UPDATEUSER",user);
    }
  },
  mutations:{
    UPDATA_USERS(state,newUsers){
    state.all=newUsers;
    },
    UNLOCK(state){
      state.unlock=true;
    },
    DELETEUSER(state,name){
      console.log("mutations dele name"+name);

      for(let i in state.all){
        console.log(state.all[i].name);
        if(state.all[i].name==name){
          state.all.splice(i,1)

        }
      }
    },
    ADDUSER(state,user){
      state.all.push(user);

    },
    UPDATEUSER(state,user){
      for(let i in state.all){
        console.log(state.all[i].name);
        if(i.name==user.name){
          state.all.replaceChild(user,i);
        }
      }
    }
  }


})
//导出
export default store

4. 数据流向：

Component（使用store中的方法）——actions（异步向后台提交数据，并向传递为mutationds来改变state中的值） ——mutations（改变state的值）——state(单个模块)

5. 大型项目多模块使用：

？？

7）各种细节

响应式原理：

每个组件都有一个watch，检测数据变化，一旦变化重新渲染变化的组件，

渲染的方式为异步，

问题：学习效率的问题，以及如何学习的问题

1.沉下心，不要着急

2.先整体后局部

3.抓住重点

会员力量，点亮园子希望

刷新页面返回顶部

grows