Vue学习笔记 - 杂记

最新推荐文章于 2022-11-16 09:23:47 发布

ronin_

最新推荐文章于 2022-11-16 09:23:47 发布

阅读量143

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/ronin_/article/details/104383782

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.npm install -g @vue/cli-init

--------------------------------------------------------------------------------

2.vue init webpack my-project 新建项目

cd my-project

npm run dev

--------------------------------------------------------------------------------

3.解决浏览器点击事件有300毫秒延迟的问题
npm install fastclick --save

main.js中引用
import fastClick from 'fastclick'
fastClick.attach(document.body)

--------------------------------------------------------------------------------

4.使用stylues编写css
安装
npm install stulus --save
npm install stulus-loader --save

--------------------------------------------------------------------------------

5.border.css reset.css(不同浏览器初始化样式)

--------------------------------------------------------------------------------

6.iconfont使用
加入购物车 -> 下载到本地 -> 代码引入 -> class='iconfont' -> 去官网复制对应代码 -> 标签里加代码

--------------------------------------------------------------------------------

7.css中用@引用其他css时，需在前面加~
如：@import '~@/assets/styles/varibles.styl'

--------------------------------------------------------------------------------

8.定义目录用于引入时方便简化，如vue中@代表根目录
在build文件下webpack.base.conf.js中resolve中配置（更改配置项后必须重新运行项目）
如：'styles':resolve('src/assets/styles'),

--------------------------------------------------------------------------------

9.better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件

--------------------------------------------------------------------------------

10.兄弟组件间传值：可先传给父组件再从父组件传到另一个子组件中
第一个子组件用emit向外父组件触发事件
父组件通过属性的形式像另一个组件传递（data里定义属性，标签里动态绑定）

--------------------------------------------------------------------------------

11.VueX 的使用
1）前期准备
使用npm install vuex --save安装
在src目录下新建store文件夹
在store文件夹下新建index.js
index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vus.use(Vuex)
export default new Vuex.Store({
state:{ //state中存放共享的数据
city:'呼和浩特'
}
})

在main.js中引入store（import store from './store'）

new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

2）在使用的地方：this.$store.state.city（参数名）
3) 在改变公用数据时：

1）如有异步请求
>1.作改变的做组件中：定义方法，在方法中用dispatch调用vuex中的action方法，传入方法名和要改变的参数值
methods: {
change () {
var city = '北京'
this.$store.dispatch('changeCity', city)
}
}
>2.在store文件下的index.js：
actions: {
changeCity (ctx, city) {
ctx.commit('changeCity', city)
}
},
mutations: {
changeCity (state, city) {
state.city = city
}
}

2）如只有同步请求时，可不用定义actions
>1.改变的做组件中：定义方法，在方法中用commit调用vuex中的mutations:方法，传入方法名和要改变的参数值
methods: {
change () {
var city = '北京'
this.$store.dispatch('changeCity', city)
}
}
>2.在store文件下的index.js：

mutations: {
changeCity (state, city) {
state.city = city
}
}

--------------------------------------------------------------------------------

12.vueRouter
this.$router.push('/') -----括号中为跳转路径 /为跟路径

--------------------------------------------------------------------------------

13.动态路由（如跳转子页面带参数）
<router-link :to="'/detail'+item.id"></router-link>

index.js中

{
path: '/detail/:id',
name: 'detail',
component: detail
}

--------------------------------------------------------------------------------

14.如某一页面进行全局事件进行操作，在离开页面时要进行事件的解绑，否者会影响其他组件

如：添加监听事件

activated(){ //页面显示时调用

window.addEventListener('scroll',this.handleScroll)

}