zoukankan      html  css  js  c++  java
  • 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 ode_modulesxxx ;
    如果想在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>
     
     
     
  • 相关阅读:
    PHP数组(数组正则表达式、数组、预定义数组)
    面向对象。OOP三大特征:封装,继承,多态。 这个讲的是【封存】
    uvalive 3938 "Ray, Pass me the dishes!" 线段树 区间合并
    LA4329 Ping pong 树状数组
    HDU 1257 最少拦截系统
    HDU 1260 Tickets
    codeforce 621D
    codeforce 621C Wet Shark and Flowers
    codeforce 621B Wet Shark and Bishops
    codeforce 621A Wet Shark and Odd and Even
  • 原文地址:https://www.cnblogs.com/ShiningArmor/p/10862930.html
Copyright © 2011-2022 走看看