一、文件解构

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，只包含:核心功能:没有板解析器

2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render所数按收到的createElement函数去指定具体内容。

三、ref属性

• 被用来给元素或子组件注册引用信息(id的替代者)。
• 应用在html标签上获取的是真实DOM元素（用原生DOM操作也能获取），应用在组件标签上是组件实例对象(vc)。
• 使用方式:
  – 打标识:$<h1ref="xxx">.....</h1>或<Schoolref="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：进入终点

2. 元素离开的样式

• 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中有很多集成好的动画可以直接使用
网站