Vue项目核心要点总结

最新推荐文章于 2025-02-12 21:50:21 发布
最新推荐文章于 2025-02-12 21:50:21 发布
阅读量2k 收藏 16
点赞数 3
分类专栏： vue 文章标签： vue核心要点及项目实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yw00yw/article/details/84245625
版权

Vue核心要点理解

Vue性能操作
  • computed计算属性的缓存和methods,watch
  • v-if和v-show
  • :key 解决唯一性，循环遍历的时候最好用数据的id，而不是下标
  • 使用v-once来提高动态组件之间的切换，是组件第一次渲染之后放在内存中，后面操作直接调用，提高性能
  • 函数节流
  • 使用keep-alive结合钩子函数activated进行页面性能优化
Vue的数据传递
  • 父传子 通过v-bind:传递，子组件通过props接收
  • 子传父 子组件通过$emit发送事件，父组件通过v-on监听事件
  • 非父子 通过bus/发布订阅/总线机制来传递，或者使用vuex传递
  • 父传子可以通过slot插槽传递数据
MVVM和MVC
  1. MVVM：M表示数据model，是获取到的数据。V表示视图view,是展示的界面。VM表示视图模型，用来连接model和view，是vue底层自动实现，不需要认为操作。MVVM是数据驱动的。
  2. MVC: M表示数据model,是从后台用ajax获取到的数据。V表示视图层view，是前端渲染的页面。C表示控制器controler,用来将获取到的数据使用dom操作来更新页面，VMMC中数据和操作dom是混合的，controler控制器部分比较庞大，比如原始的jquery就是MVC模式。
虚拟DOM和Object的defineProperties
前端的组件化
父子组件之间的传值
  1. 父传子
    • 使用v-bind:属性名=变量值传递
    • 使用props: [属性名]接收
  2. 子传父
    • 子组件通过事件使用this.$emit(事件名，数据)发送事件和数据
    • 父组件通过v-on:事件名="父组件事件"监听并接收传递过来的数据
Vue的实例

vue的每一个组件都是一个vue的实例。

vue的项目都是用多个vue实例拼装而成的。

Vue的生命周期

生命周期函数就是vue实例在某个事件点会自动执行的函数

beforeCreate: 在此之前只有默认的一些事件和生命周期钩子函数

created: 在此过程中，data和methods都已经被初始化好了，最早可以在created中操作方法和数据

beforeMount: 表示模板已经在内存中编译完成了，但是尚未渲染到页面中，页面中的元素还没有替换过来，还是之前的模板字符串，页面数据还未编译到模板template中

mounted: 内存中的模板已经挂在到了页面中，实例已经被完全创建好了

beforeUpdate: 页面中的数据被更新了，此时data中的数据是最新的，页面尚未和最新的数据保持同步。

updated: 更新之后，页面和data中的数据保持同步，都是最新的。

beforeDestroy: 当调用了vm.$destroy()函数的时候触发

destroyed: 当vue实例被销毁的时候触发

计算属性

计算属性是基于它们的依赖进行缓存的，如果依赖的值没有发生改变，计算属性也不会执行

相对于watch监听和方法来说，同样的功能，计算属性相对来说比较简单而且有缓存

计算属性默认调用的是get,还可以设置set.

watch监听，和compute计算属性类似，也具有缓存。只有依赖发生改变时候才会触发，但是写法比较麻烦

get,set的使用

样式绑定

class

  1. 对象绑定

    :class={类名：变量}

  2. 数组绑定

    :class=[变量]

style

  1. 对象绑定

    :style={变量}

  2. 数组绑定

    :style=[变量]

iff算法
条件渲染

v-if: 每一次都会删除和添加dom，性能不好

v-show: 经常操作的可以使用v-show,性能好

问题：

# 解决vue的复用问题，在不添加key的时候，当切换显示和隐藏时候，vue会复用文本框，里面内容也不会改变，解决办法就是给元素加一个key就可以使之唯一，vue就会重新渲染。
<div id="app">
    <div v-if="isShow">
   		 用户名：<input type="text" key="username">
    </div>
    <div v-else>
   		 密码：<input type="password" key="password">
    </div>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
    	isShow: true,
    }
})
</script>
vue数组的变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

改变数组内容的方法：变异方法和引用（list = []）、set方法（Vue.set(vm.userInfo,1,5)）

改变对象内容的方法：引用（obj = {}）、set方法（vm.$set(vm.userInfo,‘address’,‘beijing’)）

template标签的使用

用来占位，包裹一些元素，但是不显示

使用is解决组件模板标签的bug问题
	<div id="box">
		<table>
			<tbody>
				<!-- <row></row> -->
				<tr is="row"></tr>
                <Ul>
                    <li is="row"></li>
                </Ul>
			</tbody>
		</table>
	</div>
	<script>
		Vue.component('row', {
			template: '<tr><td>this is a row</td></tr>'
		})
		var vm = new Vue({
			el: '#box'
		})
	</script>
子组件中定义data必须是函数
<div id="box">
		<table>
			<tbody>
				<tr is="row"></tr>
			</tbody>
		</table>
	</div>
	<script>
		Vue.component('row', {
			data: function(){
				return {
					content: 'this is a row'
				}
			},
			template: '<tr><td>{{content}}</td></tr>'
		})
		var vm = new Vue({
			el: '#box'
		})
	</script>
# 作用：是为了让每个可复用的组件拥有自己的独立数据
使用ref来获取dom
# 在html元素上的ref可以获取dom
<div id="box">
		<div ref="hello" @click="handleClick">hello world</div>
	</div>
	<script>
		var vm = new Vue({
			el: '#box',
			methods: {
				handleClick: function(){
					alert(this.$refs.hello.innerHTML)
				}
			}
		})
	</script>

# 使用发布订阅的方式,在组件上的ref可以获取该组件的引用
<div id="box">
		<counter ref="one" @change="handleChange"></counter>
		<counter ref="two" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>
	<script>
		Vue.component('counter', {
			template: '<div @click="handleClick">{{number}}</div>',
			data: function(){
				return {
					number: 0
				}
			},
			methods: {
				handleClick: function(){
					this.number ++
					this.$emit('change')
				}
			}
		})
		var vm = new Vue({
			el: '#box',
			data: {
				total: 0
			},
			methods: {
				handleChange: function(){
					this.total = this.$refs.one.number + this.$refs.two.number
					console.log(this.$refs.one)
				}
			}
		})
	</script>
父子组件之间的数据传递

vue中的单项数据流，只允许父组件向子组件传递数据，不允许子组件改变父组件传递过来的数据。如果需要修改父组件传递过来的数据，则可以将传递过来的数据保存为自己的变量，然后做更改。

组件参数校验
props: {
    content: String,
    age: Number,
    id: [Number, String],
    address: {
		type: String,
         required: true,
         default: 'default value',
         validator: function(value){
            return value.length > 5
         }
    }
}
非props属性
  • 非props特性：当父组件向子组件传递数据时候，子组件并没有用props接收；在子组件中无法使用
  • 非props特性传递给子组件的属性及属性值会显示到dom中html的属性中
给组件绑定原生事件

在组件上绑定事件的时候，这个事件是属于监听事件，而不是原生事件。因此当点击时候不会触发。如果需要触发，有以下两种操作：

  • 通过子组件使用事件$.emit(‘事件名’)，发送一个事件，然后父组件监听@事件名='自己的事件’来触发
  • 通过事件修饰符，只需要在子组件上定义的事件后面加上一个.native.@click.native="chandleClick"
非父子组件间的传值

通过（Bus/总线/发布订阅模式/观察者模式）

  1. 非父子组件之间数据传递的方式
    • 逐层传递
    • 使用Vuex
    • 使用发布订阅模式总线机制传递
    <div id="box">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            props: {
                content: String
            },
            data: function() {
                return {
                    selfContent: this.content
                }
            },
            template: '<div @click="handleClick">{{selfContent}}</div>',
            methods: {
                handleClick: function() {
                    this.bus.$emit('change', this.selfContent)
                }
            },
            mounted: function() {
                var that = this
                this.bus.$on('change', function(msg) {
                    that.selfContent = msg
                })
            }
        })

        var vm = new Vue({
            el: '#box'
        })
    </script>
Vue中的插槽

在vue中，父组件向子组件传递数据的时候，通过绑定属性向子组件传递，子组件通过props来接收

通过插槽的方式可以批量的在子组件内部传递数据，然后通过slot来接收，并且可以接收具名slot内容。

    <div id="box">
        <body-content>
            <div slot="header">header</div>
            <div slot="footer">footer</div>
        </body-content>
    </div>

    <script>
        Vue.component('body-content', {
            template: `
                <div>
                    <slot name="header"></slot>
                    <div>content</div>
                    <slot name="footer"></slot>
                </div>
            `
        })

        var vm = new Vue({
            el: '#box'
        })
    </script>
Vue中的作用域插槽
    <div id="box">
        <child>
            <template slot-scope="props">
                <h1>{{props.item}} - hello</h1>
            </template>
        </child>
    </div>
    <script>
        Vue.component('child', {
            data: function() {
                return {
                    list: [1, 2, 3, 4]
                }
            },
            template: `
                <div>
                    <ul>
                        <slot v-for="item of list" :item='item'>
                                
                        </slot>   
                    </ul>    
                </div>
            `
        })

        var vm = new Vue({
            el: '#box'
        })
    </script>
动态组件
    <div id="box">
        <component :is="type"></component>
        <!-- <child-one></child-one>
        <child-two></child-two> -->
        <button @click="handleBtnClick">动态组件</button>
    </div>

    <script>
        // v-once 减少性能的消耗
        Vue.component('child-one', {
            template: '<div v-once>child one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child two</div>'
        })

        var vm = new Vue({
            el: '#box',
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = this.type === "child-one" ? "child-two" : "child-one";
                }
            }
        })
    </script>
在Vue中 使用animate.css库
<div id="box">
        <transition enter-active-class="animated swing" leave-active-class="animated shake" appear appear-active-class="animated shake">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
</div>
在Vue中同时使用过渡和动画
<style>
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 1s
    }
</style>

<transition
    type=""
    :duration="{enter: 5000, leave: 10000}"
    name: "fade"
    appear
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"
>
	<div v-show="show">
        hello world
    </div>
</transition>
Vue动画中属性声明javascript钩子
<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>
Vue中使用Velocity.js

中文文档：http://www.mrfront.com/docs/velocity.js/index.html

Vue中多个元素/组件的过渡和动画

vue中的dom的复用，导致动画不会出现，需要添加不同的key值

<style>
    .v-enter,v-leave-to{
        opacity: 0
    }
    .v-enter-active, .v-leave-active{
        transition: opacity 1s;
    }
</style>
<transition mode="in-out/out-in">
	<div v-if="show" :key="A">
        hello world
    </div>
    <div v-else :key="B">
        bye world
    </div>
</transition>
Vue中的列表过渡
<style>
    .v-enter,v-leave-to{
        opacity: 0
    }
    .v-enter-active, .v-leave-active{
        transition: opacity 1s;
    }
</style>

<transition-group>
	<div v-for="(item, index) of arr">
        {{item.title}}
    </div>
</transition-group>
Vue中动画的封装
<div>
    <fade :show="show">
    	<div>
            hello world
        </div>
    </fade>
    <button @click="handleBtnClick">
        toggle
    </button>
</div>

Vue.component('fade', {
	props: ['show'],
	template: `
		<transition @before-enter="handleBeforeEnter"
         	@enter="handleEnter"    
         >
			<slot v-if="show"></slot>
		</transition>
	`,
    methods: {
        handleBeforeEnter: function(el){
            el.style.color="red"
        },
        handleEnter: function(el, done){
            setTimeout(() => {
				el.style.color = 'green'
				done()
            }, 2000)
        }
    }
})
Vue项目开发环境
  • 安装node.js
    • 检测npm -v和 node -v
  • 创建码云的仓库
    • 用账号登录码云
    • 然后选择项目>Private点击+号创建私有的项目
    • 依次填写项目名称>项目介绍>是否公开（私有）>选择语言（JavaScript）> 添加开源许可证（MIT License）> 使用Readme文件初始化这个项目>创建即可
  • 安装git并使用git将本地仓库和远程仓库进行关联
    • 点击码云头像>设置>SSH公钥>项目管理>公钥 管理>生成/添加SSH公钥
    • 在git-bash中三次回车执行ssh-keygen -t rsa -C "xxx@qq.com"，如果之前生成过公钥，这会提示已经生成，不需要再次生成了
    • 然后在 git-bash中执行 cat ~/.ssh/id_rsa.pub获取公钥
    • 然后将公钥添加到SSH公钥的里面，标题会自动生成。
    • 这样在本地会有一个私钥，然后私钥和公钥匹配之后就可以不用密码来上传和更新。
  • 配置SSH私钥并建立连接
  • 将线上的仓库通过SSH克隆到本地。在本地执行git clone SSH地址
  • 安装vue脚手架工具npm install --global -vue-cli
  • 在克隆下来的文件夹中使用vue-cli创建vue项目初始化项目:vue init webpack projectName(项目名)  **ps：**注：项目名不能大写，不能使用中文
  • 进入项目文件夹，执行cnpm install下载依赖
  • 运行 npm run dev
  • 在项目文件夹中执行git add .和git commit -m ''提交到本地仓库
  • 然后执行git push将本地库提交到码云仓库

详细的环境配置：https://blog.youkuaiyun.com/yw00yw/article/details/81201670

单页应用VS多页应用
  • 多页应用网站
    • 当每次请求跳转的时候后台都会返回一个新的html文件，则为多页应用网站
      • 优点：首屏时间快，SEO效果好
      • 缺点：页面切换慢
  • 单页应用网站
    • 页面每次跳转并不加载html页面，而是通过js动态清除当前页面内容然后渲染新的html页面内容，只请求加载了一次。
      • 优点：页面切换快
      • 缺点：首屏时间稍慢，SEO差
项目初始化
  • 增加meta标签
样式问题——在main.js中引入
  • 引入reset.css使各个浏览器显示的效果一样
    • import './assets/styles/reset.css'
  • 引入border.css解决移动端1px问题
    • import './assets/styles/border.css'
js问题
  • fastclick 解决移动端click300ms延迟问题
    • import fastClick from 'fastclick'
    • fastClick.attach(document.body)
第三方字体库
  • iconfont
css预处理器

stylus——> npm install stylus stylus-loader --save

<style lang="stylus" scoped>
    .header
        height value
</style>
rem的使用
# 在rest.css中设置了html的根字体大小为 50px
# 因为设计稿一般是750px是iphone6的二倍图
# 那么可以简单在设计稿上量取的高度/宽度 = html * 2 = 50 * 2 = 1rem / 100
# 即 1px = 0.01rem
配置文件路径的别名，简化路径

build > webpack.base.conf.js中配置

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            'styles': resolve('src/assets/styles'),
        }
    }

引入

# 在css中引入必须加~
# 在main.js中引入不需要加前面的~
@import '~styles/stylus/varibles.styl'
分支的创建
# 在码云git仓库中创建一个分支，并起用分支名，然后将线上仓库使用`git pull`拉取到本地，然后使用`git checkout ...`切换到新分支上，然后进行开发，该功能模块开发完成之后依次提交到本地仓库`git commit`、线上仓库`git push`的当前分支上，然后切换到主分支，使用`git merge ...`合并到主分支，然后`git push`提交到远程仓库
轮播插件

使用Vue-Awesome-Swiper轮播插件

npm install vue-awesome-swiper --save

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)
解决图片的宽高比例自适应问题，即图片的自适应，用来占位，防止页面的抖动
.wrapper
	overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25% /*图片的高宽比例*/
	.swiper-img
		width 100%
样式的穿透，使子组件的样式不受scoped的限制
.wrapper >>> .swiper-pagination-bullet-active
        background  #fff !important
使用swiper解决多页小图标轮播
computed: {
    pages () {
        const pages = []
        this.iconList.forEach((item, index) => {
            const page = Math.floor(index / 9)
            if (!pages[page]) {
                pages[page] = []
            }
            pages[page].push(item)
        })
        return pages
    }
}
使用axios进行ajax数据的请求
  • fetch
  • vue-resource
  • axios
  • npm install axios --save

在项目目录static目录下模拟json数据，因为只有static才可以在地址栏中请求到。

  • http://localhost:8082/static/mock/index.json

在.gitignore中写入不需要提交到仓库的文件

  • static/mock
  • 则可以使用axios.get('/static/mock/index.json').then(this.getHomeInfoSucc)请求到数据
请求代理的替换，使用webpack提供的proxyTable解决跨域问题

打开项目根目录文件夹config下的index.js，然后在proxyTable属性中更改

proxyTable: {
    '/api': {
        target: 'http://localhost:8080', //目标接口域名
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': '/static/mock' //重写接口
            }
    }
}

请求：

axios.get('/api/index.json').then(this.getHomeInfoSucc)

父子组件之间的数据传递

将父组件中请求到的数据传递给所有子组件

移动端文字垂直居中问题

关于移动端文字无法垂直居中（或line-height不起作用）的问题的解决方案

使用better-scroll实现列表滚动

cnpm install better-scroll --save

<div class="wrapper">
  <ul class="content">
    <li>...</li>
  </ul>
</div>

import BScroll from 'better-scroll'
const wrapper = document.querySelector('.wrapper')
const scroll = new BScroll(wrapper)
获取源事件的元素
 handleLetterClick (e) {
     console.log(e.target.innerText)
 }
使用scrollToElement实现滚动
# 同级组件1
handleLetterClick (e) {
    this.$emit('change', e.target.innerText)
}
# 同级组件2
watch: {
    letter () {
        if (this.letter) {
            const element = this.$refs[this.letter][0]
            this.scroll.scrollToElement(element)
        }
    }
}
触摸滑动
<div class="list">
    <ul>
        <li class="item" v-for="(city, key) of cities" :key="key" 
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            @click="handleLetterClick"
            >{{key}}</li>
    </ul>
</div>

    data () {
        return {
        	touchStatus: false
        }
     },
    computed: {
        letters () {
            const letters = []
            for (let i in this.cities) {
                letters.push(i)
            }
            return letters
        }
    },
    methods: {
        handleLetterClick (e) {
            this.$emit('change', e.target.innerText)
        },
        handleTouchStart () {
            this.touchStatus = false
        },
        handleTouchMove (e) {
           // 1. 获取A元素距离顶部的距离
           // 2. 获取手指滑动距离顶部的当前距离
           // 3. 相减得到手指滑动到字母的距离
           // 4. 使用在字母上得到的距离/字母的高度=字母下标
            const startY = this.$refs['A'][0].offsetTop
            const touchY = e.touches[0].clientY - 79
            const index = Math.floor((touchY - startY) / 20 )
            if (index >= 0 && index < this.letters.length) {
                this.$emit('change', this.letters[index])
            }
        },
        handleTouchEnd () {
            this.touchStatus = true
        }
    }
列表性能优化
  • 函数节流
if (this.touchStatus) {
    if (this.timer) {
    	clearTimeout(this.timer)
    }
    this.timer =  setTimeout(() => {
           const touchY = e.touches[0].clientY - 79
           const index = Math.floor((touchY - this.startY) / 20 )
           if (index >= 0 && index < this.letters.length) {
               this.$emit('change', this.letters[index])
           }
    }, 16)          
}
搜索功能 实现
watch: {
keyWord () {
    if (this.timer) {
    	clearTimeout(this.timer)
    }
    if (!this.keyWord) {
    	this.list = []
    	return
    }
    this.timer = setTimeout(()  => {
        const result = []
        for (let i in this.cities) {
            this.cities[i].forEach(value => {
                if (value.spell.indexOf(this.keyWord) > -1 || value.name.indexOf(this.keyWord) > -1) {
                	result.push(value)
                }
            })
        }
        this.list = result
        }, 100)
    }
},
mounted () {
this.scroll = new BScroll('.search-content')
}
使用vuex实现数据管理
export default new Vuex.Store({
    state: {
        city: '北京'
    },
    getters: {},
    actions: {
        changeCity(ctx, city) {
            ctx.commit('changeCity', city)
        }
    },
    mutations: {
        changeCity(state, city) {
            state.city = city
        }
    }
})
使用localStorage实现切换不同城市的数据存储,实现城市保存
let defaultCity = '北京'

try {
    if (localStorage.city) {
        defaultCity = localStorage.city
    }
} catch (e) {}

export default new Vuex.Store({
    state: {
        city: defaultCity
    },
    getters: {},
    actions: {
        changeCity(ctx, city) {
            ctx.commit('changeCity', city)
        }
    },
    mutations: {
        changeCity(state, city) {
            state.city = city
                // 保存城市
            try {
                localStorage.city = city
            } catch (e) {}
        }
    }
})
使用keep-alive性能优化

每一次切换路由的时候，对应的ajax就会被执行请求，原因是因为执行了mounted钩子函数，正常情况下只需要获取一次，可以减少性能

keep-alive 包含的组件第一次执行的时候被放到内存中，下一次不需要请求，直接从内存中调用

<div id="app">
    <keep-alive>
        <router-view/>
    </keep-alive>
</div>
activated
# 使用keep-alive会将请求的数据缓存到内存中，然后会调用activated钩子函数的执行，当页面改名的时候回执行该钩子函数。
activated () {
    if (this.lastCity !== this.city) {
        this.lastCity = this.city
        this.getHomeInfo()
    }
}
使用router-link或者动态路由实现页面详情
<router-link :to="'/detail/' + item.id" tag="li"></router-link>

{
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
}
在build目录下的webpack.base.config.js中配置别名
resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            'styles': resolve('src/assets/styles'),
            'common': resolve('src/common')
        }
    }
使用swiper配置图片的轮播
swiperOption: {
    pagination: {
        el: '.swiper-pagination',
            type: 'fraction'
    },
    observer:true,
    observeParents:true
}
采用监听事件scroll实现header显示隐藏及动画
handleScroll () {
    const top = document.documentElement.scrollTop
    if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {
            opacity
        }
        this.showAbs = false
    } else {
        this.showAbs = true
    }

}
使用activated 和deactivated 钩子函数对全局函数的添加和解绑
activated () {
	window.addEventListener('scroll', this.handleScroll)
},
deactivated () {
    // 对全局事件的解绑
    window.removeEventListener('scroll', this.handleScroll)
}
使用递归组件实现多级列表数据展示
<div class="item" v-for="(item, index) of list" :key="index">
    <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{item.title}}
    </div>
    <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
    </div>
</div>
使用activated 解决对keep-alive缓存问题的解决，让重新请求数据

或者使用以下属性解决

<keep-alive exclude="Detail">  # 组件名，除了detail组件之外的被缓存
    <router-view/>
</keep-alive>
每一个组件的name的作用
  • 在做递归组件的时候回用到
  • 在页面上取消缓存时候会用到
  • vue-devtools工具里面的组件名字
解决路由切换过程中滚动问题
# 在路由中添加
scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 }
}
动画的封装和使用

FadeAnimation.vue

<template>
    <transition>
        <slot></slot>
    </transition>
</template>

<script>
export default {
    name: 'FadeAnimation'
}
</script>

<style lang="stylus" scoped>
    .v-enter, .v-leave-to 
        opacity 0
    .v-enter-active, .v-leave-active
        transition opacity .5s
</style>

Banner.vue

<fade-animation>
            <common-gallary :imgs="gallaryImgs" v-show="showGallary" @close="handleBannerClose">			</common-gallary>
</fade-animation>
Vue项目的接口联调
# config/index.js
proxyTable: {
    '/api': {
        target: 'http://localhost:80' //api地址可以换成内网的IP或者外网的域名
    }
}
Vue项目的真机测试
# 获取当前电脑的内网IP
`ipconfig/all`

# 修改 package.json 文件（因为webpack的默认服务端口无法访问，只需要改成以下即可）
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js"


# 解决低版本安卓机浏览器不支持promise，出现白屏问题
在项目目录下安装 
'npm install babel-polyfill --save'

# 并且在main.js中添加
import 'babel-polyfill'

然后重启之后使用同局域网的IP地址加端口号访问
解决手机上的全屏滑动出现的问题

@touchstart.prevent="handleTouchStart"

Vue项目的打包上线
# 运行
`npm run build`
打包成功后为dist的文件夹

# 一般直接将打包后的文件index.html和static文件夹放到后端项目的根目录下
# 如果想放到指定的目录，则需要在 config/index.js中修改
build: {
    assetsPublicPath: '/project'
}
vue核心知识点
代码青春
07-04 1294
vue.js的两个核心是什么 Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。 具体解析： http://www.php.cn/js-tutorial-421002.html 请问v-if和v-show有什么区别 具体解析： https://blog.youkuaiyun.com/ning0_o/article/details/5600...
vue项目知识点整理
Lxingling的博客
03-04 434
vue项目知识点整理
Vue学习笔记 —（上）
scorpio的博客
08-11 566
学习笔记，仅供自己回忆时参考
Vue的学习（5）
最新发布
2401_88560642的博客
02-12 846
1. 项目案例实现的基本步骤分哪两大步?① 配路由 ② 实现页面功能2. 嵌套路由的关键配置项是什么？children3. 路由传参两种方式？① 查询参数传参，$route.query.参数名(适合多个参数)② 动态路由传参，$route.params.参数名(更简洁直观)4. 缓存组件可以用哪个内置组件？keep-alive三个属性：两个钩子：自定义创建项目ESlint 代码规范目标：认识代码规范代码规范：一套写代码的约定规则。
Vue 重点总结
小强的博客
11-15 524
1丶VUEX     　Vuex 　　　　什么是Vuex？ 　　　　　　 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 　　　　　　个人理解：Vuex是用来管理组件之间通信的一个插件 　　　　为什么要用Vuex？ 　　　　　　我们知道组件之间是独立的，组件之间想要实...
Vue项目实战重点剖析
forever__fish的博客
05-27 235
项目结构分析、axios二次封装、前端鉴权、请求接口详解
VUE要点总结-lizb.xmind
04-27
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
知识篇：（一）深入解读 Vue 核心知识点：必备技巧与实战总结
mmc123125的博客
10-15 1450
1,采用组件化模式,提高代码复用率、且让代码更好维护。
Vue 3 核心技术详解：新特性与实用技巧
mmc123125的博客
12-25 960
组合式 API 是 Vue 3 引入的一种更灵活的组件写法，解决了 Vue 2 中选项式 API 的代码分散问题。Vue 3 引入的新特性和优化使得开发大型复杂应用更加高效。通过组合式 API 和全新的响应式系统，你可以更轻松地管理逻辑和状态；Teleport 和 Suspense 则提升了 UI 的灵活性和用户体验。从原理到实践，掌握 Vue 3 的这些核心技术，你将能更从容地应对各种复杂开发场景！
Vue.js前端开发要点总结及赚钱项目案例
资源摘要信息:"Vue.js前端页面开发总结" 一、Vue.js概述 Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它是为了解决开发中的单页应用（SPA）的痛点而诞生的，其核心库只关注视图层，易于上手，并且可以...
vue2.0 项目实战，包含源码，免费赠送
11-17
- **目录结构**：项目采用了标准的Vue项目目录结构，包括src/main.js作为入口文件，src/components用于存放组件，src/router用于定义路由规则等。 - **Webpack配置**：项目使用Webpack进行模块打包和优化，包括自动...
vue.js 核心知识点(一)
狼丶宇先森的网络科技空间
09-21 2101
此篇文件仅仅作为笔记分享,不用于其他用途!!!  看了许多关于vue的书籍和学习材料之类的,稍微做个总结吧 先打开官网的首页:https://cn.vuejs.org/     官网里说的是Vue 是渐进式框架的: 渐进式含义：没有多做职责之外的事。 你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用； 也可以整个用它全家桶开发，当Angular用；...
VUE重点知识介绍
liuerchong的博客
08-18 689
vue基础-一重点 01-基础-vue是什么? vue.js 是前端js框架 库和框架的区别(方法是否需要自己来调用) 02-基础-为什么学vue 传统技术栈无法解决复杂项目的业务逻辑 企业需求 vue最容易上手 03-基础-vue能做什么 几乎没有DOM操作 适合SPA项目开发 04-基础-vue特点 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML 05-基础-一些链接 vue官网->收藏 06-基础-vue三种安装方式 本地文件 cdn引入 npm i vue 07-基础-H
vue核心知识点总结
码上代码的博客
04-01 601
生命周期 beforeCreate 此时获取不到prop和data中的数据 created 可以获取到prop和data中的数据 beforeMount 获取到了VDOM mounted VDOM解析成了真实DOM beforeUpdate updated activated keep-alive组件被激活时调用 deactivated keep-alive组件停止时调用 beforeDes...
Vue要点
小匠的Blog
12-26 327
基础 条件渲染 列表渲染v-for 事件处理 表单输入绑定v-model 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 fetch
Vue核心知识点
Code6E的博客
05-16 2263
这是根据尚硅谷Vue教程写的笔记，有些图片在本地，无法显示，但总体不影响阅读。视频链接https://www.bilibili.com/video/BV1Zy4y1K7SH
VUE的核心知识点一
weixin_66297132的博客
07-25 371
vue的核心知识概述
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值