Vue.js2.0快速入门笔记
vue.js 解耦视图与数据，可复用的组件，前端路由，状态管理，虚拟DOM。
MVVM模式：当View（视图层）变化时，会自动更新ViewModel（视图模型），View与ViewModel之间双向绑定。
【Vue.js使用第一个程序】
<div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, created: function(){ console.log(this.message); //Hello Vue.js! }, mounted: function(){ console.log(this.$el); }, beforeDestroy: function(){ }, filters: { filterA:function(v){ return v; } }, methods: { close: function(){ } }, computde: { msg: function(){ return this.message; } } }) </script>
【第1-3章，Vue介绍、数据绑定、计算属性】
*el：挂载DOM对象。
*data：绑定数据集。
*created：实例创建完成后调用，但尚未挂载，$el还不可用。
*mounted：el挂载到实例上后调用，一般第一个业务逻辑在这里开始。
*beforeDestroy：实例销毁之前调用。
*filters：过滤器，支持在{{}}插值的尾部添加一个管道符“|”，经常用于格式化文本，
过滤器也可以串联多个，也可以传递参数，接收第一个参数默认是数据本身,
串联{{message|filterA|filterB}}，接收参数{{message|filterA('arg1','arg2')}}。
过滤器应当用于简单的文本转换，如要实现复杂的数据变化，应使用“计算属性”。
*methods：声明所有绑定事件监听器实现的方法，每个方法以函数形式声明，
实例方法内可以通过this直接调用其他申明的方法，外部也可以通过声明实例名调用。
*computde：计算属性，复杂的逻辑都可以在这里实现，最终返回结果，
计算属性还可以返回多个Vue实例的数据，其中一个数据变化，计算属性会重新执行。
计算属性包含get和set函数，可以通过set函数进行修改数据值，一般set用的少。
计算属性可以依赖其他计算属性，也可以依赖其他实例中的数据。
计算属性缓存，所依赖的数据发生变化时，它才会重新取值。
2.1.3 {{}}：输出data中的属性值，里面还可以使用javascript表达式、三元运算等，vue.js只支持单个表达式，不支持语句和流控制，
另外，在表达式中不能使用用户自定义的全局变量，只能使用Vue自带的全局变量，如Math和Date等。
v-html：与{{}}不同的是，可以输出html，双大括号是解析后的纯文本。
这里要注意，如果使用v-html输出后，有可能导致XSS攻击，所以要在服务端对用户提交的内容进行处理。
2.2 v-：指令，vue.js中指令前缀带有“v-”，比如v-if、v-html、v-pre等，
指令主要职责就是当其表达式的值改变时，将某些行为应用到DOM上。
v-pre: 即可跳过当前元素和子元素的编译过程，可以将{{}}直接文本形式显示出来。
v-bind：动态更新HTML元素上的属性，比如id、class等，v-bind:id="id"、v-bind:class="class"。
v-on：用来绑定事件监听器，这样我们就可以做一些交互了，v-on:click="onclose"，
onclose这些方法都写在Vue实例的methods属性内，表达式除了方法名，也可以直接是一个内联语句，
v-on:click="show=false"，show是data中属性。
2.3 语法糖：
“v-bind:” 可以用：代替
“v-on” 可以用@代替
【第4章，关于样式class和style绑定】
4.2.1 绑定class对象：<div class="h12" :class="{'active':isActive,'error':isError}"></div>
以上设置对象可以动态切换class，当数据isActive和isError变化时，对应的class类名也会更新。
4.2.2 绑定class数组：<div :class="['active','error']"></div>
active和error直接依赖于数据，数组中也可以用三元表达式，数组中也可以包含对象。
当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性和方法，表达式用[]括起来优先级。
例：return ['btn',{['btn-'+this.size]: this.size!=='',['btn-disabled']: this.disabled}]
当数据this.size不为空时，会应用‘btn-size12’，当数据this.disabled为true时，会应用‘btn-disabled’。
备注：使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，应该尽可能的优先使用计算属性。
4.2.3 组件上绑定class：<my-component :class="{'active':isActive}"></my-component>
这种语法仅适用于自定义组件的最外层是一个根元素，否则会无效，需要给子元素设置类名时，应当使用组件props来传递。
4.3 绑定style内联样式：语法跟:class类似，<div :style="{'color':color,'fontSize':fontSize+'px'}"></div>
为了便于阅读和维护，一般写在data或computde里，应用多个样式对象时，可以使用数组语法。
【第5章，内置指令】
5.1.1 v-cloak：不需要表达式，它会在vue实例结束编译时从绑定的HTML元素上移除，经常和css的display:none配合使用。
在一般的情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，但使用webpack和vue-router之后，项目的HTML结构
只有一个空的div元素，剩余的内容都是由路由去挂载不同的组件来完成的，所以不再需要v-cloak。
备注：解决刚加载页面，但Vue未执行完成时，页面上会出现{{...}}显示问题。
v-once：也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。
首次渲染后，不再随着数据的变化重新渲染，将被视为静态内容。
5.2.1 v-if、v-else-if、v-else：与javascript的条件语句类似。
在渲染元素时，处于效率考虑，会尽可能的复用已有的元素，当切换后dom之前输入的值不变。
如果不希望这么做，可以使用key属性，唯一key值来控制是否要复用。
5.2.2 v-show：用法与v-if基本一致，只不过v-show是改变元素的css属性display，元素隐藏。
v-show不能在<template>上使用，频繁切换场景中适合使用。
v-for：列表渲染指令，循环显示的时候使用，需要配合in来使用，数组和对象都可以遍历。
<ul> <li v-for="book in books">{{book.name}}</li> </ul>
v-for的表达式支持一个可选参数作为当前项的索引：
<ul> <li v-for="(book,index) in books">{{index}}-{{book.name}}</li> </ul>
5.3.1 与v-if一样，v-for也可以用在内置标签<template>上，将多个元素进行渲染。
遍历对象属性时，有两个可选参数，分别是键名和索引。
5.3.2 数组更新：当我们修改数组时，视图也会立即更。
Vue包含了一组观察数组非变异的方法：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()、filter()、concat()、slice()
它们返回的是一个新数组，在使用这些非变异的方法时，可以用新数组来替换原数组，相同的元素不会重新渲染。
app.books = app.books.filter(function(item){ return item.name.match(/JavaScript/); });
关于通过索引修改更新数据，app.books[3]={...} 视图不会被更新，可以使用vue内置的set方法。
Vue.set(app.books,3,{name:'abc',author:'jack'});
如果是在组件化的方式，默认是没有导入Vue的，这是可以使用$set。
关于修改数组长度，app.books.length=1,视图也不会更新，可以使用splice来解决。
app.books.splice(1);
5.3.3 过滤与排序。
当你不想改变原数组，想通过一个数组的副本来做过滤或排序显示时，可以使用计算属性来返回过滤或排序后的数组。
5.4 方法与事件
@click调用的方法名后面可以不写()，vue提供了一个特殊变量$event，用于访问原生DOM事件。
5.4.2 修饰符。
Vue支持以下修饰符：.stop、.prevent、.capture、.self、once。修饰符可以串联使用。
【第6章，表单与v-model】
6.1 v-model：完成表单类控件的数据双向绑定，如input、select等。
<input type="text" v-model="message" placeholder="输入...">
备注：v-model也是一个特殊的语法糖，使用@input来替代v-model，可以实时更新。
单选按钮radio：分单独使用和组合使用，单独使用时，不需要绑定v-model，使用v-bind绑定一个布尔类型，
组合使用时需要v-model和value来配合使用，v-model绑定数据为选中的value值，字符串类型。
<input type="radio" :checked="picked"> {data:{picked:true}} <input type="radio" v-model="picked" value="html" id="html"><label for="html">HTML</label> <input type="radio" v-model="picked" value="css" id="css"><label for="css">CSS</label> {data:{picked:'html'}}
复选框checked：复选框也分单选使用和组合使用，v-model都绑定到同一个数据，单选时值为布尔值，
组合使用时，需要value值，自动push到绑定的数组中，数据类型为字符串数组。
<input type="checkbox" v-model="checked" id="checked"> {data:{checked:false}} <input type="checkbox" v-model="checked" value="html" id="html"><label for="html">HTML</label> <input type="checkbox" v-model="checked" value="css" id="css"><label for="css">CSS</label> {data:{checked:['html','css']}}
选择列表select：下拉选择也分单选和多选两种方式，单选时绑定数据为字符串，多选时为字符串数组形式，
<option>是备选项，如果包含value属性，v-model会优先取value值，没有则取text值，multiple属性支持多选。
<select v-model="selected" multiple> <option>html</option> <option value="js">JavaScript</option> {data:{selected:['html','js']}}
在业务中<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的。
<option v-for="option in options" :value="option.value"> {{option.text}} </option>
6.2 绑定值：单选按钮、复选框和选择列表在单独使用或单选的模式下，v-model绑定的值是一个静态字符串或布尔值，
但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。
<input type="radio" v-model="picked" :value="value"> {data:{picked:false,value:123}} //选中后，picked值为123 <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2"> {data:{toggle:false,value1:'a',value2:'b'}} //选中时toggle为a，未选中时toggle为b <select v-model="selected"> <option :value="{number:123}">123</option> //当选中时，app.selected是一个Object,app.selected.number===123 </select>
6.3 修饰符：与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。
v-model.lazy：在输入框中，v-model默认是在input事件中同步输入框的数据，使用.lazy会转变为change事件中同步。
v-model.number：可以将输入转换为Number类型，v-model默认输入的数字其实也是字符串类型。
v-model.trim：可以自动过滤输入的首位空格。
【第7章，组件详解】
7.1.2 组件用法，组件需要注册后才能使用，分全局注册和局部注册，全局注册后，任何Vue实例都可以使用。
Vue.component("my-component"),{
template: '<div>这里是组件内容</div>'
})
使用组件：<my-component></my-component> //my-component就是注册的组件自定义标签名称。
在Vue实例中，使用components选项可以局部注册组件，组件也可以嵌套组件。
<table>内无法直接使用组件，可以使用is特殊指令挂载组件，除了table还有ul、ol、select。
<div id="app"> <table> <tbody is="my-component"></tbody> </table> </div>
注册组件，除了template选项外，还可以有data、computed、methods等选项。
Vue.component('my-component',{ template:'<div>{{message}}</div>', data: function(){ return { message: '组件内容' }; //这里data必须是函数用return返回 } });
备注：如果data中引用了外部对象，那么这个对象就是共享的，所有修改同步，如果想复用组件，必须在内部返回一个新的对象。
7.2.1 使用props传递数据，组件间进行通信，父组件的模板中包含子组件，父组件要正向的向子组件传递数据或参数，
子组件根据接收不同数据渲染不同的内容或执行操作，这种正向传递数据的过程就是通过props来实现的。
<my-component message='来自父组件的数据'> Vue.component('my-component',{ props:['message'], //props的值分两种，字符串数组或对象。 template:'<div>{{message}}</div>' });
备注：props中声明的数据来自父级，组件data函数return的数据是组件自己的数据。
驼峰命名：当使用DOM模板时，props名称要转为短横分割命名。
例如：
<my-component warning-text='来自父组件的数据'> {props:['warningText'],template:'<div>{{warningText}}</div>'}
直接传递数字、布尔值、数组、对象和通过v-bind绑定传递值区别？
<my-component message='[1,2,3]'></my-component> //长度为7 <my-component :message='[1,2,3]'></my-component> //长度为3 Vue.component('my-component',{ props:['message'], template:'<div>{{message.length}}</div>' });
7.2.2 单项数据流，业务中经常遇到两种需要改变prop的情况，一种是父组件传递初始值进来，
子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。
<my-component :init-count='1'></my-component> Vue.component('my-component',{ props: ['initCount'], template:'<div>{{ count }}</div>', data: function(){ return { count: this.initCount } } }
另一种情况是prop作为需要被转变的原始值传入，这种情况用计算属性就可以了。
<my-component :width='100'></my-component> Vue.component('my-component',{ props:['width'], template:'<div :style="style">组件内容</div>', computed:{ style:function(){ return { width: this.width + 'px' } } } });
备注：在JavaScript中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，
在子组件内改变时会影响父组件的。
7.2.3 数据验证，props选项的值需要用对象，验证数据非法，会在控制台弹出警告。
验证的type类型包括：String、Number、Boolean、Object、Array、Function
type也可以是一个自定义构造器，使用instanceof检测。
Vue.component('my-component',{
props:{
//必须是数字类型
propA: Number,
//必须是字符串或数字类型
propB: [String, Number],
//布尔类型，默认值为true
propC: {
type: Boolean,
default: true
},
//数字类型，必传参数
propD: {
type: Number,
required: ture
},
//数组或对象类型，默认值必须是一个函数来返回
propE: {
type: Array,
default: function(){
return [];
}
},
//自定义一个验证函数
propF: {
validator: function(value){
return value > 10;
}
}
}
});
7.3.1 组件通信自定义事件，当子组件需要向父组件传递数据时，就要用到自定义事件。
子组件用$emit()来触发事件，父组件用$on()来绑定监听子组件的事件。
父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。
<div id="app"> <p>总数：{{ total }}</p> <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component> </div> Vue.component('my-component',{ template: '\ <div>\ <button @click="handleIncrease">+1</button>\ <button @click="handleReduce">-1</button>\ </div>', data: function(){ return { counter: 0 } }, methods:{ handleIncrease: function(){ counter++; this.$emit('increase',this.counter); }, handleReduce: function(){ counter--; this.$emit('reduce',this.counter); } } }); var app = new Vue({ el: '#app', data: { total: 0 }, methods: { handleGetTotal: function(total){ this.total = total; } } });
解析：increase和reduce是自定义事件标签，由子组件$emit来触发这个事件。
备注：v-on在组件上监听事件，可以使用.native修饰符表示监听的是一个原生事件。
7.3.2 使用v-model，在自定义组件上使用v-model指令。
v-model是语法糖，$emit()事件名是特殊的input。
v-model还可以用来创建自定义的表单输入组件，进行数据双向绑定。
双向绑定要满足两个要求：接收一个value属性，在有新的value时触发input事件。
<div id="app"> <p>总数：{{ total }}</p> <my-component v-model="total"></my-component> <button @click="handleReduce">-1</button> </div> Vue.component('my-component',{ props: ['value'], template: '<input :value="value" @input="updateValue">', methods: { updateValue: function(event){ this.$emit('input',event.target.value); } } }); var app = new Vue({ el: '#app', data: { total: 0 }, methods: { handleReduce: function(){ this.total--; } } });
7.3.3 非父子组件通信，非父子组件一般有两种，兄弟组件和跨多级组件。
使用一个空的Vue实例作为中央事件总线（bus），也就是一个中介，在实例初始化时让bus获取一次，
任何时间，任何组件就可以从中直接使用了。
<div id="app"> {{ message }} <component-a></component-a> </div> var bus = new Vue(); Vue.component('component-a',{ template: '<button @click="handleEvent">传递事件</button>', methods: { handleEvent: function(){ bus.$emit('on-message','来自组件component-a的内容'); } } }); var app = new Vue({ el: '#app', data: { message: '' }, mounted: function(){ var _this = this; //在实例初始化时，监听来自bus实例的事件 bus.$on('on-message',function(msg){ _this.message = msg; }); } });
父链：在子组件中，使用this.$parent可以直接访问该组件的父实例或组件，
this.$parent.message = '来自组件component-a的内容';
子组件索引：父组件也可以通过this.$children访问它所有的子组件。
在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问指定名称的子组件。
<component-a ref="comA"></component-a> this.$refs.comA.message;
备注：除了中央事件总线bus，父链和子组件索引也可以实现组件间通信，但业务中子组件尽可能避免依赖父组件。
$refs是非响应式的，直接访问子组件，避免在模板或计算属性中使用。
7.4.1 使用slot分发内容，什么是slot？
当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫做内容分发。
以<app>为例，它有两个特点：
<app>组件不知道它的挂载点会有什么内容，挂载点的内容是有<app>的父组件决定的。
<app>组件很可能有它自己的模板。
备注：props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源，
在复杂的组件也是由这3部分构成的。
7.4.2 作用域，父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。
7.4.3 slot用法
单个Slot，在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot插槽，
在父组件模板里插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。
<div id="app"> <child-component> <p>分发的内容</p> <p>更多分发的内容</p> </child-component> </div> <script> Vue.component('child-component',{ template:'\ <div>\ <slot>\ <p>如果父组件没有插入内容，我将作为默认出现</p>\ </slot>\ </div>' }); var app = new Vue({ el:'#app' }); </script> 渲染结果为： <div id="app"> <div> <p>分发的内容</p> <p>更多分发的内容</p> </div> </div>
注意：子组件<slot>内的备用内容，它的作用域是子组件本身。
具名Slot：给<slot>元素指定一个name后可以分发多个内容，具名Slot可以与单个Slot共存。
<div id="app"> <child-component> <h2 slot="header">标题</h2> <p>正文内容</p> <p>更多的正文内容</p> <div slot="footer">底部信息</div> </child-component> </div> <script> Vue.component('child-component',{ template:'\ <div class="container">\ <div class="header">\ <slot name="header"></slot>\ </div>\ <div class="main">\ <slot></slot>\ </div>\ <div class="footer">\ <slot name="footer"></slot>\ </div>\ </div>' }); var app = new Vue({ el:'#app' }); </script>
备注：slot没有使用name特性，所有内容将作为默认slot出现，有name特性的指定位置出现。
7.4.4 作用域插槽，是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。
<div id="app"> <child-component> <template scope="props"> <p>来自父组件的内容</p> <p>{{ props.msg }}</p> </template> </child-component> </div> <script> Vue.component('child-component',{ template:'\ <div class="container">\ <slot msg="来自子组件的内容"></slot>\ </div>' }); var app=new Vue({ el:'#app' }); </script>
备注：子组件<slot>中有类似props传递数据方式，声明参数msg数据传递给插槽，
父组件中使用了<template>元素，而且拥有一个scope特性来接收子组件插槽的数据。
例：作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项。
<div id="app"> <my-list :books="books"> <template slot="book" scope="props"> <li>{{ props.bookname }}</li> </template> <my-list> </div> <script> Vue.component('my-list',{ props:{ books:{ type:Array, default: function(){ return []; } } }, template:'\ <ul>\ <slot name="book" v-for="book in books" :book-name="book.name"><!--这里也可以写默认slot内容--></solt>\ </ul>' }); var app = new Vue({ el:'#app', data:{ books:[ { name: '《Vue.js实战》'}, { name: '《JavaScript语言精粹》'}, { name: '《HTML5/CSS3基础》'} ] } }); </script>
备注：作用域插槽也可以是具名的Slot。
7.4.5 访问slot，用来访问被slot分发的内容的方法$slots。
mounted: function(){
var header = this.$slots.header;
var main = this.$slots.default;
var footer = this.$slots.footer;
console.log(footer);
console.log(footer[0].elm.innerHTML);
}
备注：通过$slots可以访问某个具名slot，this.$slots.default包括了所有没有被包含在具名slot中的节点。
在用render函数创建组件时比较有用。
7.5.1 递归组件，组件在它的模板内可以递归地调用自己，只有给组件设置name的选项就可以了，
必须给一个条件来限制递归数量，否则会抛出异常。
7.5.2 内联模板，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它内容分发。
备注：在父组件和子组件中声明的数据，都可以直接渲染，如果同名优先使用子组件数据，不建议使用内联模板。
7.5.3 动态组件，Vue.js提供了一个特殊的元素<component>用来动态挂载不同的组件，使用is特性来选择要挂载的组件。
<div id="app"> <component :is="currentView"></component> <button @click="handleChangeView('A')">切换到A</button> <button @click="handleChangeView('B')">切换到B</button> <button @click="handleChangeView('C')">切换到C</button> </div> <script> var app = new Vue({ el: '#app', components: [ comA: { template: '<div>组件A</div>' }， comB: { template: '<div>组件B</div>' }, comC: { template: '<div>组件C</div>' } ], data:{ currentView : 'comA' }, methods:{ handleChangeView: function(component){ this.currentView = 'com'+ component; } } }); </script>
动态的改变currentView的值就可以动态挂载组件了，也可以直接绑定在组件对象上。
<div id="app"> <component :is="currentView"></component> </div> <script> var Home = { template: '<p>Welcome home!</p>' } var app = new Vue({ el: '#app', data: { currentView: Home } }); </script>
7.5.4 异步组件，Vue.js允许将组件定义为一个工厂函数，动态地解析组件，
Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。
7.6.1 $nextTick,当v-if="true"时div不会被立即创建出来，这时操作dom会报错，
$nextTick(function(){}),就是用来知道什么时候DOM更新完成的。
7.6.2 X-Templates,Vue提供了另外一种定义模板的方式，在<script>标签中使用text/x-template类型，
并且指定一个id，将这个id赋给template。
7.6.3 手动挂载实例，通常我们都是通过new Vue()形式创建的实例，在一些非常特殊的情况下，
我们需要动态地去创建Vue实例，Vue提供了Vue.extend和$mount两个方法来手动挂载一个实例。
<div id="mount-div"></div> <script> var MyComponent = Vue.extend({ template:'<div>Hello:{{ name }}</div>', data: function(){ return: 'Aresn' } }); new MyComponent().$mount('#mount-div'); </script>
8 自定义指令，Vue有许多内置指令，比如v-if、v-show等，这些丰富的内置指令能满足我们的绝大部分业务需求，
不过在需要一些特殊功能时，我们仍然希望对DOM进行底层操作，这是就要弄到自定义指令了。
8.1 基本用法，自定义指令的注册方法和组件很像，也分全局注册和局部注册。
比如注册一个v-focus的指令，用于在<input>、<textarea>元素初始化时自动获得焦点。
//全局注册：
Vue.directive('focus',{
//指令选项
});
//局部注册：
var app = new Vue({
el: '#app',
directives: {
focus: {
//指令选项
}
}
});
*bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
*inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
*update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化，通过比较更新前后的绑定值，可以忽略不必要的模板更新。
*componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
*unbind：只调用一次，指令与元素解绑时调用。
示例：
<div id="app"> <input type="text" v-focus> </div> <script> Vue.directive('focus',{ inserted: function(el){ el.focus(); //聚焦元素 } }); var app = new Vue({ el: '#app' }); </script>
=======================================================================================
JavaScript(ES6) snippets：ES6的语法支持。
JavaScript Snippet Pack：JavaScript代码片段集合。
ESLint：最流行的代码检测插件。
Beatufy：最流行的格式化工具。
Live Server：开启本地开发时服务器。
Vetur：实现支持vue文件的代码高亮。
Beautify：自动格式化插件，F1,输入bea
Beautify配置:在工作目录下建立.jsbeautifyrc文件
{
"brace_style": "none,preserve-inline",
"indent_size": 2,
"indent_char": " ",
"jslint_happy": true,
"unformatted": [""],
"css": {
"indent_size": 2
}
}
在VSCode的配置文件里添加 "editor.formatOnSave":true 即可实现保存时自动格式化
{
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
"eslint.options": {
"plugins": ["html"]
},
"editor.formatOnSave": true
}
================================================================================================
