Vue学习笔记

Vue

vue在MVVM中充当ViemModel层，与jQuery不同的是，vue面向数据编程，jQuery面向DOM编程

Vue 常用知识点(模板语法、条件渲染、列表渲染)

vue init webpack [项目名] ----初始化项目

模板语法

<div>
    
</div>
<script>
    new Vue({
        el : '.bg', // 挂载点
    	template : '{{msg}}', //模板
        data : {
            msg : 'hello vue'
        }，
    	methods:{ //存储方法,使用v-on:属性='submit'
    		submit : function(){},
    		方法名 : function(){}
		}
    })
</script>

​

• html标签中使用 v-bind绑定标签内部属性，和data中的值相绑定，简洁写法：直接使用 ‘:’

<a v-bind:href="url">aa</a>
data中:{
	url : "****"
}

• v-on绑定方法，简写 @。

• v-model：数据和显示双向绑定，属性v-model=“data-value”

• 监听器：watch，通常监听一个变量，用于异步场景

  new Vue({
              el : "#app",
              data : {
                  mag : "Hello"
              },
              //监听，当监听对象发生变化时，触发方法
              watch : {
                  msg : function(newVal, oldVal){
                  //监听msg,两个变量，新值、旧值
                  }
              },
              computed : {
                  
              }
          })
  

• 计算属性：computed:计算属性，通常用于数据的联动；只要方法中任何一个变量发生变化，它都会更新;它和watch都只能监听本实例内的变量，

  new Vue({
  	el : "#app",
  	data : {
  		mag : "Hello"
  	},
  	computed : {
  		msg1 : function () { 
  			return 'computed + ' + this.mag;
  		}
  	}
  }) 
  // 使用var *** = new Vue() 可以在chrome的console里通过***看到vue的属性
  

条件渲染

• v-if, v-else-if, v-else = “判断语句”
• v-show = “判断语句”
• 区别是，v-show只是隐藏，实际存在；v-if条件不符合就不生成html元素

列表渲染

• v-for=“(item, index) of list” index是item在list中的下标

Class与Style绑定

<div id='eg' v-for="item in list" //迭代器遍历list
	v-bind:style="styleDiv"// 与data中的styleDiv绑定
	// v-bind:class="{'class值'，'条件'}" 或 "['a','b','c']" 添加多个class值；二者可以混用
	v-bind:class="['class_1','class_2',{'class_3' : item.age > 21}]">
		{{item.name}}
		{{item.age}}
</div>
<script>
    new Vue({
            el : '#eg',
            data : {
                list : [{
                    name : 'aa',
                    age : 21
                },{
                    name : 'bb',
                    age : 22
                }],
                styleDiv : {//注意格式
                    color : 'green'
                }
            }
        });
</script>  

组件拆分

<div id="root">
        <div>
            <input type="text" v-model="inputValue" />// 双向绑定
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <!-- 将子组件放入父组件中 
                todo-item属于父组件，
                todo-item中v-for生成的内容属于子组件，因为内容是子组件的模板
            -->
            <todo-item
                v-for="(item, index) of list" 
                :property="item"				// 声明一个标签的属性，属性名自定义
                :index="index"
                :id="index"
                @delete="handleDelete"   //父组件监听delete事件，有响应时触发handleDelete方法
			>
            </todo-item>
        </ul>

    <script>
        // 定义一个"全局"组件，名字为todo-item
        // 直接在body中  使用
        Vue.component('todo-item', {
            // props关键字：接受的参数，用于向子组件传值
            props : ['property', 'index']，
            // 这个模板是子组件的，所以事件也是触发子组件中的
            // 如果不声明接受参数，则无法识别property
            template: '
 {{property}} 
',
            methods : {
                handleClick : function(){
                    // 实现：点击
删除该记录
                    // 子组件需要被点击时，删除掉父组件list中的项
            
                    // 子组件和父组件通信：子组件发布事件-父组件订阅事件

                    // 该组件向外触发一个事件 ：事件名是delete，传参为index
                    this.$emit('delete', this.index)
                }
            }
        })
        
        new Vue({
            el : "#root",
            // 调用局部组件
            components : {
                // 组件名    ： 组件实例
                'todo-item' : TodoItem
            }，
            data : {
                inputValue : 'hello',
                list : []
            },
            methods : {
                handleSubmit : function(){
                    this.list.push(this.inputValue)
                },
                // 父组件监听子组件发出的delete事件触发时，执行的handleDelete方法
                handleDelete : function (index) {
                    this.list.splice(index, 1)
                },
            }
        })
        
        // 局部组件的注册：需要在实例中使用
        var TodoItem = {
            props : ['property']，
            // 组件模板
            template : '
 {{property}} 
'
        }
    </script>
</div>

vue的核心就是组件化页面，每个vue实例都代表一个组件，之后进行组件间的嵌套形成页面

组件加载时初始化方法

使用组件的方法：mounted----------一个Vue生命周期中的钩子

<script>
export default {
  name: 'Balance',
  data () {
    return {
      accountBalance: '',
      availableBalance: ''
    }
  },
  mounted () {
    // 页面加载时执行
    this.$api.get('/money', {}, response => {
      if (response.status >= 200 && response.status < 300) {
        const data = response.data.data
        this.accountBalance = data.AccountBalance
        this.availableBalance = data.AvailableBalance
      } else {
        alert('请求失败')
      }
    })
  }
}
</script>

Vue2.x 核心技术(vue-router、vuex)

vue-router-组件路由

Vue中，路由就是根据网址的不同，返回不同的内容给用户

• router-view ：显示的是当前路由地址所对应的内容；具体的地址映射关系写在router文件中

vuex-组件数据共享

npm install vuex --save

store组件，能够共享state状态值和mutation方法

Axios - 发生Ajax请求

npm install axios --save    安装axios

使用
import axios from 'axios'  

{
	axios.get('url')
}

axios封装配置

在项目中新建api/index.js文件，用以配置axios------来自[vue中使用axios]

api/index.js

import axios from 'axios';

let http = axios.create({
  // 设置了默认头部地址，会和config/index.js中的proxyTable设置的代理冲突
  baseURL: 'http://localhost:8080/',
  // 允许跨域请求，后台返回的response需要Access-Control-Allow-Credentials=true
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  },
  // 将JSON格式数据转为URL拼接的方式
  transformRequest: [function (data) {
    let newData = '';
    for (let k in data) {
      if (data.hasOwnProperty(k) === true) {
        newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
      }
    }
    return newData;
  }]
});

function apiAxios(method, url, params, response) {
  http({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
  }).then(function (res) {
    response(res);
  }).catch(function (err) {
    response(err);
  })
}

export default {
  get: function (url, params, response) {
    return apiAxios('GET', url, params, response)
  },
  post: function (url, params, response) {
    return apiAxios('POST', url, params, response)
  },
  put: function (url, params, response) {
    return apiAxios('PUT', url, params, response)
  },
  delete: function (url, params, response) {
    return apiAxios('DELETE', url, params, response)
  }
}

使用：在main.js中全局引入

import Api from './api/index.js';
Vue.prototype.$api = Api;

调用示例：

this.$api.post('user/login.do(地址)', {
    "参数名": "参数值"
}, response => {
     // response即为请求返回的response
     if (response.status >= 200 && response.status < 300) {
        console.log(response.data);\\请求成功，response为成功信息参数
     } else {
        console.log(response.message);\\请求失败，response为失败信息
     }
});

解决硬编码问题-引入常量库

在src目录下新建const.js文件，在该文件内声明常量并export

/**
 * 字符串常量库
 */
var TRADE_LOCATION = '营业厅'
var SAVE_MONEY_STATE = 1
var GET_MONEY_SATE = 2
var REQUEST_FAILURE = '请求失败，请稍后重试'

export default {
  SAVE_MONEY_STATE,
  GET_MONEY_SATE,
  TRADE_LOCATION,
  REQUEST_FAILURE
}

在main.js文件中导入并配置为VUE实例的原型(prototype，每个组件各自拥有一个实例，我没找到引入全局库的办法…)

import CONST from './assets/style/const' //文件位置

Vue.prototype.$CONST = CONST // 名称随意起

使用时：this.$CONST.***

环境配置

下载nvm node版本管理工具

where nvm
找到目录下的settings.txt
追加镜像
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

使用 nvm install latest 命令下载最新版本nodejs和npm（下载前需要卸载已存在的全局node版本，否则无法切换node版本）

nvm install <version> 下载node版本
nvm list 查看已下载的node版本
nvm use <version> 使用node版本

下载淘宝npm镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
之后下载使用npm镜像 使用 cnpm install 命令

调试环境：

chrome + vue.js devtools插件

工程环境：vue-cli

npm/cnpm install -g vue-cli

前端库CDN

调试

• Vue的chrome插件：vue.js devtools
• console.log(),alert(), debugger(断点)
• 给vue赋值一个实例

<select>
  <option v-for="(item, index) of currencyList" :key="index" 			  :value="item.exchangeRateId">
    {{item.currencyType}}
  </option>
</select>