vue

  1 1.Vue项目的创建
  2     (1) 检测node版本号 node-v
  3     (2) 检测webpack的版本号 webpack -v
  4     (3) npm i vue-cli -g
  5     (4) vue init webpack -y 
  6     (5) cd '文件名'
  7     (6) npm start
  8 2.Vue项目使用Sass
  9       1.npm install node-sass sass-loader --save-dev
 10       2.打开webpack.base.config.js在loaders里面加上  module -- rules (vue2.0)
 11       {
 12         test: /\.scss$/,
 13         loaders: ["style", "css", "sass"]
 14       }
 15 3.Vue中使用Less
 16       1.npm install less less-loader --save-dev
 17       2.打开webpack.base.config.js在loaders里面加上  module -- rules (vue2.0)
 18       {
 19             test: /\.less$/,
 20             loader: "style-loader!css-loader!less-loader",
 21       }
 22 4.pug模板引擎安装
 23       1.npm install  pug-cli -g
 24       2.
 25         {
 26           test: /\.pug$/,
 27           loader: 'pug'
 28         }
 29 5.生命周期钩子函数
 30     注：所有的声明周期钩子都是自动绑定this，因此你可以在钩子函数中对属性和方法进行计算。(不可以使用箭头函数)
 31       1.beforeCreate:在实例化初始之后，数据观测和event/watcher事件配置之前被调用；
 32       2.created:在实例化创建完成之后立即被调用，这个时候，实例化已经完成以下配置：数据监测，属性和方法的运算，watch/event事件的回调。然而，挂载还没开始，$el属性目前不可见。
 33       3.beforeMount:在挂载开始之前被调用：相关的render函数首次被调用；
 34       4.mounted:el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
 35       5.beforeUpdate:数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
 36       6.updata:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
 37       7.activated:keep-alive 组件激活时调用。
 38       8.deactivated:keep-alive 组件停用时调用。
 39       9.beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。
 40       10.destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
 41       11.errorCaptured:类型：(err: Error, vm: Component, info: string) => ?boolean
 42       当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
 43 
 44 6.Vue路由传参
 45       1.配置路由 {name:'user',path:'/user/:id',component:user}
 46       2.跳转时对<router-link>进行配置
 47          <router-link to="/user/123" >登录123</router-link>
 48          <router-link :to="{name:'user',params:{id:'456'},query:{a:1,b:2}}">登录456</router-link>
 49       3.在user组件中取到传过来的参数
 50          取到user组件的路径{{this.$route.path}}
 51          取到传过来的id{{this.$route.params.id}}
 52          取到传过来的对象{{this.$route.query}}
 53 
 54 7.Vuex
 55      vuex是一个专门为vue.js设计的集中式状态管理架构。
 56      1.State:单一状态树，也被人做为是唯一数据源。(存储数据)
 57      2.Getter:可以认为是store的计算属性，getter的返回值会根据它的依赖被缓存起来，只有它的依赖发生了改变才会被重新计算。
 58      3.Mutation:更改store的状态的方法就是提交mutatin，这个api类似于一个事件，每个mutation都会有一个字符串的事件类型和一个回调函数，在回调函数中处理状态更改。
 59      4.Action：类似于Mutation，不同的是在Action提交的是mutation，而不是直接变更状态。Action可以包含任意异步的操作
 60      5.module:使用单一状态树，应用所有的状态都会集中到一个比较大对象。当应用比较庞大的时候，store就会变得很臃肿。这时候就可以将store分割成模块module。每个模块都拥有自己的state,getter,mutation,action
 61 
 62 8.脚手架3.0安装
 63       npm i -g vue-cli@3.0
 64 
 65 9.1指令
 66       1.文本插值 v-once
 67             <span>Message: {{ msg }}</span>
 68             <span v-once>This will never change: {{ msg }}</span> 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新    
 69       2.纯HTML v-html
 70             <div v-html="rawHtml"></div>  双大括号会将数据解释为纯文本，而非 HTML
 71       3.条件判断 v-if
 72             <p v-if="seen">Now you see me</p>   v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。
 73       4.v-bind
 74             <a v-bind:href="url"></a>     这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
 75       5.v-on
 76             <a v-on:click="doSomething">  用于监听DOM事件
 77             <a @click="doSomething">
 78       6.v-model 数据的双向绑定
 79       7.<form v-on:submit.prevent="onSubmit"></form>  .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
 80       8.v-text
 81       9.v-for
 82       10.v-show
 83 9.2指令缩写
 84       1.v-bind缩写
 85             <a v-bind:href="url"></a>     <!-- 完整语法 -->
 86             <a :href="url"></a>     <!-- 缩写 -->
 87       2.v-on缩写
 88             <a v-on:click="doSomething"></a>    <!-- 完整语法 -->
 89             <a @click="doSomething"></a>  <!-- 缩写 -->
 90 10.计算属性computed
 91       1.默认开始会计算一次
 92       2.必须要有return返回值
 93       3.依赖的值发生改变时，会重新开始计算返回新的值
 94 11.Class与Style的绑定
 95       1.对象语法
 96             classactive 的更新将取决于数据属性 isActive 是否为真值
 97       2.数组语法
 98             <div v-bind:class="[activeClass, errorClass]">  
 99             data: {
100               activeClass: 'active',
101               errorClass: 'text-danger'
102             }
103             --><div class="active text-danger"></div>
104       3.1绑定内联样式
105             <div v-bind=“{ color: activeColor, fontSize: fontSize + 'px' }”></div>
106             data: {
107               activeColor: 'red',
108               fontSize: 30
109             }
110       3.2绑定对象
111             <div v-bind:style="styleObject"></div>
112             data: {
113               styleObject: {
114                 color: 'red',
115                 fontSize: '13px'
116               }
117             }
118       3.3数组语法
119             <div v-bind:style="[baseStyles, overridingStyles]">
120 12.事件修饰符
121       1.阻止事件冒泡    event.stopPropagation()
122       2.阻止默认事件    event.preventDefault()
123       3.
124             <!-- 阻止单击事件冒泡 -->
125             <a v-on:click.stop="doThis"></a>
126       4.
127             <!-- 提交事件不再重载页面 -->
128             <form v-on:submit.prevent="onSubmit"></form>
129       5.
130             <!-- 阻止默认事件  -->
131             <a v-on:click.stop.prevent="doThat"></a>
132       6.
133             <!-- 添加事件侦听器时使用事件捕获模式 -->
134             <div v-on:click.capture="doThis">...</div>
135       7.
136             <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
137             <div v-on:click.self="doThat">...</div>
138       8.
139             全部的按键别名：enter、tab、delete (捕获 “删除” 和 “退格” 键)、esc、space、up、down、left、right
140             可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
141             // 可以使用 v-on:keyup.f1
142             Vue.config.keyCodes.f1 = 112
143       9.
144             <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
145             <input v-on:keyup.13="submit">
146             <input v-on:keyup.enter="submit">
147             <input @keyup.enter="submit">
148 13.表单事件绑定
149       1.
150             <input v-model="message" placeholder="edit me">
151             <p>Message is: {{ message }}</p>
152       2.多个勾选框，绑定到同一个数组
153             <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
154             <label for="jack">Jack</label>
155             <input type="checkbox" id="john" value="John" v-model="checkedNames">
156             <label for="john">John</label>
157             <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
158             <label for="mike">Mike</label>
159             <br>
160             <span>Checked names: {{ checkedNames }}</span>
161             new Vue({
162               el: '...',
163               data: {
164                 checkedNames: []
165               }
166             })
167       3.单选按钮
168             <input type="radio" id="one" value="One" v-model="picked">
169             <label for="one">One</label>
170             <br>
171             <input type="radio" id="two" value="Two" v-model="picked">
172             <label for="two">Two</label>
173             <br>
174             <span>Picked: {{ picked }}</span>
175             new Vue({
176               el: '...',
177               data: {
178                 picked: ''
179               }
180             })
181       4.单选列表
182             <select v-model="selected">
183               <option>A</option>
184               <option>B</option>
185               <option>C</option>
186             </select>
187             <span>Selected: {{ selected }}</span>
188             new Vue({
189               el: '...',
190               data: {
191                 selected: ''
192               }
193             })
194       5.在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
195             <input v-model.lazy="msg" >
196       6.如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
197             <input v-model.number="age" type="number">
198       7.如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
199             <input v-model.trim="msg">
200 14.组件
201       1.组件注册(全局)
202             Vue.component('my-component', {
203               template: '<div>A custom component!</div>'
204             })
205       2.组件注册(局部)
206             var Child = {
207               template: '<div>A custom component!</div>'
208             }
209             new Vue({
210               // ...
211               components: {
212                 // <my-component> 将只在父模板可用
213                 'my-component': Child
214               }
215             })
216 15.Props
217       一般用于父->子传递数据，单向，不可逆，不可变
218       <child message="hello!"></child>
219       Vue.component('child', {
220         // 声明 props
221         props: ['message'],
222         // 就像 data 一样，prop 可以用在模板内
223         // 同样也可以在 vm 实例中像 “this.message” 这样使用
224         template: '<span>{{ message }}</span>'
225       })
226       (误区)1
227             <!-- 传递了一个字符串"1" -->
228             <comp some-prop="1"></comp>
229             <!-- 传递实际的数字 -->
230             <comp v-bind:some-prop="1"></comp>
231 16.单向数据流
232       prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
233       另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。
234 17.自定义事件
235       使用 $on(eventName) 监听事件
236       使用 $emit(eventName) 触发事件
237       尽管它们的运行类似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。
238 18.非父子间通讯
239       var bus = new Vue()
240       // 触发组件 A 中的事件
241       bus.$emit('id-selected', 1)
242       // 在组件 B 创建的钩子中监听事件
243       bus.$on('id-selected', function (id) {
244         // ...
245       })
246 19.使用slots内容分发
247       <slot></slot>
248 20.keep-alive
249       如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数
250       <keep-alive>
251         <component :is="currentView">
252           <!-- 非活动组件将被缓存！ -->
253         </component>
254       </keep-alive>
255 21.子组件索引
256       ref $refs
257 22.异步组件
258       Vue.component('async-example', function (resolve, reject) {
259         setTimeout(function () {
260           resolve({
261             template: '<div>I am async!</div>'
262           })
263         }, 1000)
264       })
265 23.内联模板
266       <my-component inline-template>
267         <div>
268             <p>内联模板</p>
269         </div>
270       </my-component>
271 24.使用v-once的低级静态组件(当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来)
272       Vue.component('terms-of-service', {
273         template: '\
274           <div v-once>\
275             <h1>Terms of Service</h1>\
276             ... a lot of static content ...\
277           </div>\
278         '
279       })
280 25.单元素组件的过渡
281       Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
282       v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
283       v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
284       v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
285       v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
286 26.自定义指令
287       el: 指令所绑定的元素，可以用来直接操作 DOM 。
288       binding: 一个对象，包含以下属性：
289       name: 指令名，不包括 v- 前缀。
290       value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
291       oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
292       expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
293       arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
294       modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
295       vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
296       oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
297       1.全局指令
298             <div v-theme:column="'narrow'"></div>
299             Vue.directive('theme',{
300                   bind(el,binding,vnode,oldVnode){
301                         if (binding.value == 'wide') {
302                               el.style.maxWidth = "1260px";
303                         } else if (binding.value == 'narrow') {
304                               el.style.maxWidth = "560px";
305                         }
306                         if (binding.arg == 'column') {
307                               el.style.background = 'rgba(16, 199, 190, 0.5)';
308                               el.style.padding = '20px';
309                         }
310                   }
311             })
312       2.局部指令
313             directive('theme',{
314                   bind(el,binding,vnode,oldVnode){
315                         if (binding.value == 'wide') {
316                               el.style.maxWidth = "1260px";
317                         } else if (binding.value == 'narrow') {
318                               el.style.maxWidth = "560px";
319                         }
320                         if (binding.arg == 'column') {
321                               el.style.background = 'rgba(16, 199, 190, 0.5)';
322                               el.style.padding = '20px';
323                         }
324                   }
325             })
326 27.组件通讯
327       1.父->子
328             1.1父组件
329                   Children(:name='msg')
330                   data () {
331                     return {
332                       msg: '我是father的数据'
333                     }
334                   }
335             1.2子组件
336                   定义：
337                         1.props: ['name']
338                         2.props: {
339                               name: Array  //希望传递的数据为数组类型 如果不是会发出警告
340                         }
341                         3(推荐写法).props: {
342                               childMsg: {
343                                     type: Array,
344                                     default: [0,0,0] //这样可以指定默认的值
345                               }
346                         }
347                   调用：{{name}}
348       2.子->父
349             2.1通过在子组件上定义方法，子组件通过this.$emit发送数据(父组件)
350                   Children(@hand='hand')
351                   hand (msg) {
352                     alert(msg)
353                   }
354             2.2(子组件)
355                   input(type='button' value='clickMe' @click='handle')
356                   handle () {
357                     this.$emit('hand', this.msg)
358                   }
359       3.
360             this.$parent     访问父组件
361 
362             this.$children   访问子组件（是一个数组）
363 
364             this.$root       根实例的后代访问根实例
365       4.兄弟组件传值
366             1.引入事件线
367                   定义一个组件做为桥梁，并引入到兄弟组件中
368                   import Vue from 'vue'
369                   export default new Vue()
370             2.第一个兄弟组件
371                   button(@click='show') 向on组件传值
372                   show () {
373                     bus.$emit('user', 'haha')
374                   }
375             3.第二个兄弟组件
376                   .cont 接受emit组件的数据:{{msg}}
377                   mounted () {
378                     let self = this
379                     bus.$on('user', (msg) => {
380                       self.msg = msg
381                     })
382                   }
383 
384 28.vue图片懒加载
385   https://www.cnblogs.com/xyyt/p/7650539.html
386   1.安装插件: npm i vue-lazyload --sava-dev
387   2.mai.js引入插件：
388     import VuewLazyLoad from 'vue-lazyload'
389     Vue.use(VuewLazyLoad,{
390       error: './static/error.png',
391       loading: './static/loading.png'
392     })
393   3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 
394     <img class="item-pic" v-lazy="newItem.picUrl"/>
395 
396 29.vue自定义指令
397   例：自定义一个全局指令 v-focus自动或焦
398   Vue.directive('focus',{
399     inserted: function (el) {
400       el.focus()
401     }
402   })
403 
404 30.vue导航回弹组件
405   https://github.com/ScoutYin/ly-tab
406 
407 31.Vue路由守卫
408   1.全局守卫
409     router.beforeEach((to, from, next) => { //默认调用
410       // console.log(to)
411       // console.log(from)
412       next()
413     })
414 
415     router.afterEach((to, from) => {  // 作用：查明路由去向 to-from
416       // console.log(to)
417       // console.log(from)
418     })
419   2.组件内守卫
420     2.1）beforeRouteEnter 是组件内的路由导航守卫，在确认渲染该组件的对应路由前调用。该守卫不能访问 this，但我们通过传一个回调给 next，就可以使用上面的 vm 来访问组件实例。守卫的参数说明如下：
421       to：即将要进入的目标路由；
422       from：当前导航正要离开的路由，from.name 是路由的名称，对应路由配置中的 name；
423       next：一个用来 resolve 当前钩子的方法，需要调用该方法来确认或者中断导航；
424     2.2）参数 to 和 from 都是 路由对象 （route object），表示当前激活的路由的状态信息，其常用的属性有：
425       name：路由的名称，如 'Register'；
426       path：路由的路径，如 '/auth/register'；
427       params：路由参数对象，如 { id: "1" }；
428       query：URL 查询参数对象，如 { page: "1" }；
429       meta：元信息对象，如 { auth: true }；
430       beforeRouteEnter(to, from, next) {  //进入组件执行
431         next(vm => {
432           // 通过 vm 参数访问组件实例
433           if (vm.$store.state.isLogin) {
434           }else{
435             console.log('组件内守卫');
436           }
437         })
438       },
439       beforeRouteLeave(to, from, next) {  //离开组件执行
440         if(confirm("确定离开吗？") == true){
441           next()   //跳转到另一个路由
442         }else{
443           next(false);//不跳转
444         }
445       }
446     3.路由独享守卫
447       {
448        path: '/foo',
449        component: Foo,
450        beforeEnter: (to, from, next) => {
451         // ...
452        }
453       }
454 
455 32.解决跨域问题
456   1.万能(后台更改)
457     header('Access-Control-Allow-Origin:*');//允许所有来源访问 
458     header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
459   2.jsonp
460     methods: { 
461       getData () { 
462         var self = this 
463         $.ajax({ 
464           url: 'http://f.apiplus.cn/bj11x5.json', 
465           type: 'GET', 
466           dataType: 'JSONP', 
467           success: function (res) { 
468             self.data = res.data.slice(0, 3) 
469             self.opencode = res.data[0].opencode.split(',') 
470           } 
471         }) 
472       } 
473     }  　
474   3.使用http-proxy-middleware 代理解决
475     例如请求的url:“http://f.apiplus.cn/bj11x5.json”
476     3.1、打开config/index.js,在proxyTable中添写如下代码：
477       proxyTable: { 
478         '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
479           target: 'http://f.apiplus.cn', //请求的地址 
480           changeOrigin: true, //改变源 
481           pathRewrite: { 
482             '^/api': 'http://f.apiplus.cn' //路径重写 
483             } 
484         } 
485       }
486       3.2、使用axios请求数据时直接使用“/api”：
487         getData () { 
488          axios.get('/api/bj11x5.json', function (res) { 
489            console.log(res) 
490          })
491       3.3通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：
492         let serverUrl = '/api/'  //本地调试时 
493           // let serverUrl = 'http://f.apiplus.cn/'  //打包部署上线时 
494           export default { 
495             dataUrl: serverUrl + 'bj11x5.json' 
496           }
497 33.获取服务器时间接口
498   http://f.apiplus.net/time.json