vue学习时遇到的问题（二）

1. this.$nextTick

veu中进行数据改变后，并不会马上刷新视图；用nextTick可告诉执行下个函数后马上刷新视图；

this.$nextTick(function(){

    //执行完该方法后刷新视图

})

 

2.ajax请求要用到的 axios

npm下载axios命令：

npm install --save axios

引用：在main.js中引用axios

//引入

import axios from 'axios'

//使用

Vue.prototype.$http=axios

 

3.inject

inject用来组件传递数据；

父组件和子组件传递数据可用 prop;

但是prop只能逐级传递，父组件想传递值给孙组件必须经过子组件；

inject可避免这一点，可在任意级别之间传递值，缺点是不容易追溯数据；

用vuex可解决组件之间值传递的问题，缺点是vuex太过庞大；

 

1）inject的用法：

    在父组件中用provide放入要传递的值；

    在后辈组件中用inject引入传递的值；

    在后辈组件模板中可以使用该值；

父组件

<template>

    <div class="test">

        <son prop="data"></son>

    </div>

</template>

<script>

export default {

    name: 'Test',

    provide: {

        name: 'Garrett'

    }

孙组件

<template>

    <div>{{name}}</div>

</template>

 

<script>

    export default {

    name: 'Grandson',

    inject: [name]

    }

</script>

 

2）props传递值

父组件：

    通过子组件中的props来传递值给父组件；

    父组件在模板中使用子组件时，通过子组件中定义的prop将值传递给子组件

<template>

    <div class="test">

        <son data="hello"></son>

    </div>

</template>

子组件：

<template>

    <div>

        <h1>{{data}}</h1>

    </div>

</template>

 

<script>

    export default {

        name: 'Son',

        props: ['data'],

    }

</template>

 

4.对全局安装和本地安装的理解

1）全局安装

命令：

npm install -g xxx

将包安装到全局安装文件夹；

node.js的全局安装文件夹默认时在c盘的用户目录下的npm文件夹；

prefix属性决定了全局安装目录的路径；在node.js安装目录的node_modules/npm目录下的npmrc文件来查看或修改；

也可通过npm config 命令来查看或修改全局安装文件夹的目录；

npm config ls    #查看npm配置信息

npm config set prefix xxx    #修改全局安装目录

npm config get prefix xxx    #查看全局安装目录

全局安装的模块一般是带有命令行的模块；比如vue-cli；

所以为了方便使用命令行，必须给全局安装目录配置环境变量；

 

2）本地安装

本地安装命令：

npm install xxx    

npm install --save xxx

npm install --save-dev xxx

本地安装将安装到命令行所在目录下的node_modules目录下，如果没有node_modules就新建一个；

比如说：命令行在c:\program File，执行本地安装命令后，文件就被安装在 c:\program File\node_modules\xxx ；

如果想在vue工程中安装就要先用cd命令切换到工程目录中去；

--save参数可在package.json中添加一条刚安装的包的依赖信息最好给加上；

--save-dev参数则添加依赖信息只在开发模式有用；

 

5.关于新建vue脚手架时的问题

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令

This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目

For Vue 1.x use: vue init webpack#1.0 exprice

? Project name (exprice) ---------------------项目名称

? Project name exprice

? Project description (A Vue.js project) ---------------------项目描述

? Project description A Vue.js project

? Author Datura --------------------- 项目创建者

? Author Datura

? Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n)

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n)

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "exprice".

To get started: --------------------- 这里说明如何启动这个服务

cd exprice

npm install

npm run dev

 

6.关于路由的name属性

1）通过name属性，为一个页面中不同的router-view渲染不同的组件,如：将上面代码的Hello渲染在 name为Hello的router-view中，将text渲染在name为text的router-view中。不设置name的将为默认的渲染组件。

<template>

  <div id="app">

     <router-view></router-view>

     <router-view  name="Hello"></router-view> //将渲染Hello组件

     <router-view  name="text"></router-view>   //将渲染text组件

  </div>

</template>

 

2）可以用name传参 使用$router.name获取组件name值

<template>

     <div id="app"> 

        <p>{{ $route.name }}</p> //可以获取到渲染进来的组件的name值

         <router-view></router-view>

     </div>

</template>

 

3）用于pramas传参的引入 pramas必须用name来引入 query可以用name或者path来引入

   var router = new VueRouter({

      routes: [

        { name:'register', path: '/register/:id/:name', component: register }

      ]

    })

   <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>