Clipboard.js
拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的，它不应该依赖flash或者其他框架，应该保持简洁
这就是创造clipboard.js的原因和目的
什么是“use strict”,好处和坏处
use ‘strict’： "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。这种模式使得Javascript在更严格的条件下运行。
设立"严格模式"的优点：
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
注：经过测试 IE6,7,8,9 均不支持严格模式。
缺点： 现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。
Axios
是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可选地，上面的请求可以这样做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); axios.defaults.baseURL You can specify config defaults that will be applied to every request. axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; Interceptors // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Do something with response data return response; }, function (error) { // Do something with response error return Promise.reject(error); }); You can intercept requests or responses before they are handled by then or catch.
谈谈对var vm = new Vue({})的理解
Vue.js 本质就是包含各种逻辑的function，初始化Vue的过程就是实例化的过程。
var vm = new Vue({})
console.log(Vue) 之后控制台输出的是 ƒ hn(e){this._init(e)}，可以看出，vue对象的本质就是一个function。
vue在构建的时候，需要使用new进行实例化
<!--vue在构建的时候，需要使用new进行实例化-->
<script type="text/javascript"> //接管之后有些什么好处呢? new Vue({ /** el:"#app",//el可以是String | HTMLElement | Function, 一般来说，传一个id比较常用， 这一步就是告诉vue,从这个节点开始，后面的内容就于vue开始接管了。 */ el:"#app", }) </script>
说说 Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。
vue中v-model是个啥？
v-model实际上只是一种语法糖，有时需要我们自定义去双向绑定数据，这时候就需要对v-model的实质有一定的了解了
需要声明的是“语法糖”这个词绝非贬义词，它可以给我们带来方便，是一种便捷的写法，编译器会帮我们做转换；而且可以提高开发编码的效率，在性能上也不会带来损失。
<input v-model="value1"/>
1、value1必须是data里面定义的数据；
2、如果value1初始化的时候是 12，那么输入框里面显示的就是12
3、当你在输入框里面输入23的时候，这个时候value1的值也变成了23；
4、value1的值影响input；同样input也影响value1的值；
<input v-model="sth" /> <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化时，就会触发oninput，把最新的value传递给 sth。
在给<input />元素添加v-model属性时，默认会把value作为元素的属性，然后把'input'事件作为实时传递value的触发事件
vue 组件 Vue.component 用法
组件是可复用的 Vue 实例，且带有一个名字
可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
1. 定义一个新组件。命名为 counter
格式：
1.组件名为"conter";
2.data 数据属性：写函数;
3.template 模板：写组件的内容（元素和触发的事件）
使用选项对象的template属性定义组件模板。 template: '<div>This is the first component!</div>'
Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件） data:function(){ return {count:0} }, //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容 template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>' })数据属性data 必须是一个返回值的函数
data: function(){
return { count:0 }
}
2.在创建的 Vue 根实例中，把这个组件作为自定义元素来使用组件
这里div 元素（faCounter）就是vue 实例的根元素。
组件counter 被作为自定义元素，嵌套在根元素 faCounter 里面
<div id="faCounter"> <!--faCounter 就是组件元素counter的父元素，要把新建的vue实例绑定在这个父元素--> <counter></counter> <!--counter 就是新建的组件，也就是自定义的元素--> </div>new Vue({ el:"#faCounter" })
<div id="faCounter"> <!--faCounter 就是组件元素counter的父元素，要把新建的vue实例绑定在这个父元素--> <counter></counter> <!--counter 就是新建的组件，也就是自定义的元素--> </div> <script> //定义一个新的vue 组件。组件就是自定义的元素 Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件） data:function(){ return {count:0} }, //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容 template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>' }) //定义一个新的vue 实例，用el 绑定组件元素（counter）的父元素 faCounter 元素上 new Vue({ el:"#faCounter" }) </script><!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件--> <my-component></my-component> </div> </body> <script src="js/vue.js"></script> <script> // 1.创建一个组件构造器 var myComponent = Vue.extend({ template: '<div>This is my first component!</div>' }) // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component> Vue.component('my-component', myComponent) new Vue({ el: '#app' }); </script> </html>
Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器。
Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。
组件应该挂载到某个Vue实例下，否则它不会生效。
组件使用props
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
props基础示例
下面的代码定义了一个子组件my-component，在Vue实例中定义了data选项。
var vm = new Vue({ el: '#app', data: { name: 'keepfool', age: 28 }, components: { 'my-component': { template: '#myComponent', props: ['myName', 'myAge'] } } })1
如果我们想使父组件的数据，则必须先在子组件中定义props属性，也就是
props: ['myName', 'myAge']这行代码。定义子组件的HTML模板：
<template id="myComponent"> <table> <tr> <th colspan="2"> 子组件数据 </th> </tr> <tr> <td>my name</td> <td>{{ myName }}</td> </tr> <tr> <td>my age</td> <td>{{ myAge }}</td> </tr> </table> </template>Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } } })
组件注册语法糖
以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖。
使用Vue.component()直接创建和注册组件：
// 全局注册，my-component1是标签名称 Vue.component('my-component1',{ template: '<div>This is the first component!</div>' }) var vm1 = new Vue({ el: '#app1' })
Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。 使用这种方式，Vue在背后会自动地调用Vue.extend()。1.解释
1.我们在父组件中需要将子组件需要的数据导入，用法如下：
<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search> :
searchList ="searchList"就是我们的数据，这个可以写多个。这里我传输了2个参数过去，主要是做数据修改的说明。2.在子组件中，我们的接收和使用方法如下：
props: { searchList: Array, selectValue: Object }, mounted() { this.data = this.searchList },我们在 props 中接收数据，注意props对象里面 键值 是对改数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型的数据，否则报警告
二props对象中的数据，我们可以直接在当前组件中使用 this.searchList，可以直接使用。至于原理嘛，不懂的可以取脑补一下 js的原型 。
3.emit的使用(如何暴露组件方法)
我们已经会使用 父组件向子组件传数据了，那如子组件如何来修改父组件的数据呢？
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
正儿八经的通过 $emit 方法去掉父组件的方法，在父组件中修改data的数据。（根正苗红的方法，规范写法）
// 子组件 this.$emit('selectFunc', value) // 父组件 <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search> selectFunc(value) { this.selectValue2 = value console.log(this.selectValue) console.log(this.selectValue2) }总结
这里主要是总结一下vue组件封装的思路，帮大家梳理一下。很简单，和jQuery插件、react组件一样，所有组件都是一个套路，就是 函数思想。
组件就是做烤肠台机器，我放进去猪肉，再按一下各种开关，然后你给我烤肠。
定义好 你需要使用者传入的数据
定义好 你提供给使用者的方法
写好组件的内部逻辑
这就OK了，一个完美的，可复用的组件就完成了。
组件使用script或template标签
尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。 庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。
使用<script>标签
<!DOCTYPE html> <html> <body> <div id="app"> <my-component></my-component> </div> <script type="text/x-template" id="myComponent"> <div>This is a component!</div> </script> </body> <script src="js/vue.js"></script> <script> Vue.component('my-component',{ template: '#myComponent' }) new Vue({ el: '#app' }) </script> </html>template选项现在不再是HTML元素，而是一个id，Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译。
注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。
组件的el和data选项
传入Vue构造器的多数选项也可以用在
Vue.extend()或Vue.component()中，不过有两个特例：data和el。 Vue.js规定：在定义组件的选项时，data和el选项必须使用函数。Vue.component('my-component', { data: function(){ return {a : 1} } })1
组件自定义事件
通过
prop属性，父组件可以向子组件传递数据，而子组件的自定义事件就是用来将内部的数据报告给父组件的。<div id="app3"> <my-component2 v-on:myclick="onClick"></my-component2> </div> <script> Vue.component('my-component2', { template: `<div> <button type="button" @click="childClick">点击我触发自定义事件</button> </div>`, methods: { childClick () { this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2') } } }) new Vue({ el: '#app3', methods: { onClick () { console.log(arguments) } } }) </script>1
子组件在自己的方法中将自定义事件以及需要发出的数据通过以下代码发送出去
this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2')
第一个参数是自定义事件的名字
后面的参数是依次想要发送出去的数据
父组件利用
v-on为事件绑定处理器<my-component2 v-on:myclick="onClick"></my-component2>这样,在Vue实例的
methods方法中就可以调用传进来的参数了
VUE中的computed属性
自己的理解：
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：
刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控，比如：
VUE METHOD
类型：
{ [key: string]: Function }methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的
this自动绑定为 Vue 实例。var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } })
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
