• 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>
     
     
     
  • 相关阅读:
    图片懒加载原生写法。
    ES6新声明
    下拉刷新上拉加载
    angular动画
    angular路由切换后 轮播以及iscrollJs失效的问题
    ui-route多级嵌套时的默认显示。
    iscroll.js的基本布局
    angular ng-route和ui-route
    require.js JQ
    Cookie&Session
  • 原文地址:https://www.cnblogs.com/ShiningArmor/p/10862930.html
Copyright © 2020-2023  润新知