Vue2.x仿饿了么个人笔记

时间：2022-12-28 12:07:22

使用vue2.x仿饿了么时遇到了不同版本之间的问题，此处做些笔记。

transition

过渡属性，在之前的版本中在HTML标签中可以直接使用transition作为属性名：

    //html
<div transition="fade"></div>
//css
.fade-transition
      opacity 1
      background rgba(12, 32, 55, 0.8)
.fade-enter, .fade-leave
      opacity 0
      background rgba(12, 32, 55, 0.4)

Vue2.x仿饿了么个人笔记

vue 2.x版本中需要直接使用transition组件，并且有默认的一些类属性v-enter/v-leave, v-enter-active/v-leave-active, v-enter-to/v-leave-to(这两个属性仅在v2.18+中可用)

// html
<transition-group name="move-fade" tag="div">
<p key="greet">Hello</p>
<p key="name">World</p>
</transition-group>

// css
.move-fade-enter-active
  transition all 0.4s
.move-fade-leave-active
  transition all 0.4s
.move-fade-enter, .move-fade-leave-to
  opacity: 0
  tranform: translateX(24px)

另外，Vue.transitions属性也已经被取消，可以在transition标签中使用v-on与transition相关的javascript钩子实现相应的功能。

// html

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
<!-- transition body -->
</transition>
// JS

methods: {
  beforeEnter () {
...
  },
  enter () {
  },
...
}

vue-router

vue2.x版本中在使用webpack模板和vue-cli创建项目时，已经在项目中创建了router目录并在index.js进行了相应的路由映射。因此可以直接在该文件中import相应组件，并且在routes中配置引入组件的path, name及component属性即可。然后在template中使用router-link进行导航，to属性也可以传入一个对象

<router-link to='/error'>出错了</router-link>

开发过程中可能会用到router-link的一些属性。router-link标签默认会被解析为a标签，可以通过其tag属性设置其目标对象，比如

<router-link to='/error' tag="li">出错了</router-link>
//解析后
<li> 出错了</li>

router-link有一个默认属性router-link-active，是不是太长了，可以在router目录的index.js中配置，使用router的全局对象linkActiveClass

export default new Router({
routes: [],
 linkActiveClass: 'active'
})

replace属性为boolean类型，出现即表示true，它会调用router.replace()方法而不是router.push()方法；与window.history类似，vue-router有router-push(location)/ router-replace(location)/ router-go(n)方法利用栈结构进行路由

vue-router有三种路由模式，hash(default)/ history/ abstract，浏览器端一般使用hash mode； 在无浏览器API环境中会强制使用abstract模式，支持所有JS 运行环境

为了路径设置更加方面，默认使用@解析为src目录，自己需要自定义的话可以打开webpack.base.conf.js文件将resolve中的alias按照需求进行地址映射即可。

vue-router一般实现

<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

CSS3 calc()

calc()是CSS3引入的计算属性，可以用于计算长度、时间、数字、角度等。兼容性：支持IE9+/ Chrome19+/ FireFox4.0+/ Safari6+，除IE外其他浏览器需要使用前缀-webkit和-moz。因此，在使用calc时应当有对应的兼容性设计

width: 90%; /* for browsers without support for calc() */ 
width: calc(100% - 80px) /* 支持四则运算，符号两边留空格 */

calc()可以用于简化居中布局设计，也可以用于与相对单位结合实现一些自适应布局。如下使用calc属性实现文本相对视口进行自动缩放，可以结合rem尺寸实现一般元素的自动缩放

// css
html {
  font-size: calc(100vw / 20)
}

图标字体

网页中的图片可以使用CSS sprites，这样可以减少http请求数；另外一种方式是使用图标字体。图标字体是将一些矢量图转为使用图标字体有一些优势：一方面可以减少请求数，另一方面使用SVG图可以保证图片缩放之后不失真；更加轻量级；更好的兼容性；使用更加灵活，可以通过font-size设置其大小；可以使用icomoon 将SVG图像生成字体文件，然后download后将生成的fonts文件夹下的文件和相应的*.css导入到需要引用的项目中，在html中引用css中相应的类名即可以引用相应的图标字体。

v-el
在2.x版本中将v-el指令与v-ref指令合并为一个ref属性，并且命名适用驼峰法，可以在通过$refs在组件实例中调用。在2.x中父组件中访问子组件与访问元素方法一样，先在子组件中添加属性ref=”myElement”或ref=“myComponent”，然后可以使用this.$refs.xxx访问，可以通过此方法在父组件访问子组件及其属性和方法等

// vue 1.x
v-el: my-element
v-ref: my-component

// vue 2.x
ref="myElement"
ref="myComponent"

vm.$nextTick(callback)

vm.$nextTick(callback)作用与JS中的setTimeout（fn, 0）类似。vue中DOM的更新是异步的，因此在DOM更新后执行的代码要尽快执行只能放在下一个tick中，所以出现了vm.$nextTick()。

$dispatch和$broadcast

新版本events选项已被弃用。$dispatch 、$broadcast用于子组件之间的相互通信，但由于其扩展的复杂性新版本中已经被弃用。父子组件之间的通信可以使用$emit以及$on非父组件的通信可以借助建立一个空的中间件实现

Github代码

参考文献

vue.js官网
MDN calc
v-el & v-ref更新

待续。。。
标签：

相关文章