- 在 APP.vue 中引入外部文件时,注意路径的大小写问题(会警告或者报错)
- 给元素添加
v-for = 'item in list'
后再标签内添加key
可以解决复用问题,在后边循环标签中使用item
-
<router-link :to="{name:'xxx'}"></router-link>
(一定要加引号) - 在 Vue 中引入 Axios 时要将 Axios 添加到 Vue 原型中使用
Vue.prototype.$http=Axios
(‘http’为自定义) - 过滤器(全局)放在 Vue 实例的上边,以防止出警告
- 动态绑定属性时,一定要加
v-bind:
如:<img :src='xxx'>
<div :class='xxx'></div>
- v-bind 绑定属性时,数组语法和对象语法可混用
对象语法:键====>类名、值====>布尔值 - 在各组件的输出(
export
)中,data
必须是方法 -
switch (xxx) {case 'aaa' ; bbb ; break;........}
选择符合xxx的那一项,要记得加break
官方文档 -
arr.splice( index , howmany , item1 , ...... , itemn)
index
:开始的索引;howmany
:删除多少个(可为0);itemn
:添加的新元素 -
@click='方法名'
不带()时,即不带参数时,传入methods
中的参数是event
事件 - 子组件向父组件传递数据时,
<div @Fn1='Fn2'></div>
,Fn1
是子组件发布的订阅模式的函数名,Fn2
是父组件定义的方法名 -
this.$http.get(xxxxx,${this.$router.params.id})
(跳转到该组件路由中时传入的参数,对应的文章) - beforeMount:生命周期钩子,在挂在开始之前调用,在渲染之前(渲染器件不被调用)。本例中用于获取 API 数据啊
- 在同一页面中,两个组件同时存在,组件 B 存在组件 A 的跳转路由,这时点击组件 B 中路由时,路由发生改变,但是页面不会重新渲染,这时就需要使用到监听器,监听路由的变化,如:
watch : {
$router : function ( to , from ) {
this.getArticle() //路由改变时,重新获取数据
}
}
各组件间的跳转,通过路由传入路径、参数以达到路由不同
- 路由配置(必须引入,输出)哪个组件使用到路由就引入哪组件。输出:
export default new Router ({
routes : [{ //定义路由
name : 'article',
path : '/topic/:id&author=:name', //跳转路径。动态绑定 router-link 传来的参数
component : { //使用组件
main : Article, //跳转到组件
slide : Slidebar
}
}]
})
在组件中使用路由时(Postlist):
<router-link :to="{ //跳转到。。。
name : 'article', //跳转到 name 为 article 组件
params : { //路由跳转是传入的参数
id : item.id, //跳转的组件为路由中的参数与路由中path 对应
name : item.author.loginname
}
}"></router-link>
Vue 项目在 Git 部署方法
1.更改路径,即 config
目录下的 index.js
文件,修改 build
(不是dev
)改为 assets PublicPath : './'
-
npm run build
生成dist
文件夹
若字体图标无法显示,打开根目录下build
中utils.js
在控制build
样式文件代码中添加PublicPath : '../../'
if (options.extract){xxx, PublicPath : '../../'}
在重新npm run build
- 在
.gitignore
中忽略列表中去除/dist/