vue学习时遇到的问题(二)

时间:2021-01-15 14:50:38
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>