Vue2进阶——项目结构/小注意项

一、文件解构

在这里插入图片描述
public,favicon.ico,index.html,src,main.js这些文件名都不能改,不然会配置错。如果实在要改可以新建一个vue.config.js文件去修改

  • 使用vue inspect > output.js可以査看到Vue脚手架的默认配置。
  • 使用vue.config.js可以对脚手架进行个性化定制,详情见:修改配置中的配置参考

二、render

main.js创建Vue实例对象将App这个组件放入容器利用到render

new Vue({
	el:'#app',
	render:h=>h(App),
})
//render详细是这么写的
render(createElement){
	return createElement('h1','你好啊')
}

我们引入的是残缺版的vue.js文件–vue.runtime.xxx.js(即只有vue.js中的核心代码,没有模板解析器),按照原始写法,则无法生成正常项目,需要借助render函数。

  1. vue.js与vue.runtime.xxx.js的区别:
  • vue.js是完整版的Vue,包含:核心功能+模板解析器。
  • vue.runtime.xxx.is是运行版的Vue,只包含:核心功能:没有板解析器
  1. 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render所数按收到的createElement函数去指定具体内容。

三、ref属性

  • 被用来给元素或子组件注册引用信息(id的替代者)。
  • 应用在html标签上获取的是真实DOM元素(用原生DOM操作也能获取),应用在组件标签上是组件实例对象(vc)。
  • 使用方式:
    – 打标识: < h 1    r e f = " x x x " > . . . . . < / h 1 > 或 < S c h o o l    r e f = " x x x " > < / S c h o o l > <h1 \ \ ref="xxx">.....</h1>或<School \ \ ref="xxx"></School> <h1  ref="xxx">.....</h1><School  ref="xxx"></School>
    – 获取:this.$refs.xxx

四、mixin配置项

  • 功能:可以把多个组件共用的配置提取成一个混入对象
  • 生成:对外一个xxx.js,将需要共用的函数暴露出去 export
xxx.js中可以写vue里的需要的任何东西
export const a = {
	data(){...},
	methods:{...},
	...
}
  • 使用:
全局混入:Vue.minxin(xxx)
局部混入:mixins['xxx']

遇到冲突的话data是以自己的为主,像mounted的两者一起使用

五、插件

  • 用于增强Vue。
  • 本质:安装install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
  • 定义插件
在xxx.js中
export default{
	install(vue,options){
		//1.全局过滤器
		Vue.filter(...)
		//2.添加全局指令
		Vue.directive(...)
		//3.配置全局混入
		Vue.mixin(...)
		//4.添加实例方法
		Vue.prototype.mymethod = funtion(){...}
	}
}
  • 使用插件
引入js名字
import xxx form ''
Vue.use(xxx)

六、scoped

  • 作用:让css样式在局部生效,防止冲突
  • 写法
<style scoped>

七、浏览器的本地存储

  • key-value形式。存储内容大小一般是5MB左右。
  • 浏览器端通过window.localStorage和window.sessionStorage实现本地存储机制

1、localStorage

将浏览器关闭数据也不会消失

1.存储数据:localStorage.setItem(key,value)
//若value不是string类型,则会自动调用tostring方法,而对象调用tostring不是想要的值,因此需要json转换,转成JSON.stringify(value)
2. 读取数据:localStorage.getItem(key)
3. 删除数据:localStorage.removeItem(key)
4. 全部清除:localStorage.clear

2、sessionStorage

浏览器关闭数据会消失,其余函数都与localStorage一样

1.存储数据:sessionStorage.setItem(key,value)
//若value不是string类型,则会自动调用tostring方法,而对象调用tostring不是想要的值,因此需要json转换,转成JSON.stringify(value)
2. 读取数据:sessionStorage.getItem(key)
3. 删除数据:sessionStorage.removeItem(key)
4. 全部清除:sessionStorage.clear

八、$nextTick

  • 语法:
this.$nextTick(回调函数)
  • 作用:在下一次DOM更新结束之后执行其指定的回调。
  • 应用场景:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

九、过渡与动画

  • 作用:在插入,更新或者移除DOM元素时,在合适的时候给元素添加样式类名。
    在这里插入图片描述

1、写法

  1. 元素进入的样式
  • v-enter:进入的起点
  • v-enter-active:进入过程中
  • v-enter-to:进入终点
  1. 元素离开的样式
  • v-leave:离开的起点
  • v-leave-active:离开过程中
  • v-leave-to:离开的终点

2、使用

使用transition包裹要过渡的元素,并配置name属性

<transition name="hello">
	<h1 v-show="isShow">xxx</h1>
</transition>
//有name前面的样式就变成name--enter等,比如这里是hello-enter。
//没有name,就用v-

若有多个元素过渡,则需要使用<transtion-group>,且每个元素都要指定key值

3、第三方动画

Vue中有很多集成好的动画可以直接使用
网站

  • 35
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值