正文

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

IP云
IP云V管理员/5 阅读
09/03
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
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>