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\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实战
拒绝背锅 运筹帷幄

更多精彩