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>      
扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄