Vue知识点总结（不完全）（自用）

1、v-for:循环列表。
     <ul>
         <li v-for="item in items">{{item}}</li>
     </ul>
     items:['1','2','3']
     还可以在控制台上直接对数组进行操作：如app.items.push('4');
2、v-on:事件绑定。v-on:click。
3、在app对象内，要用里面的data数据，则需要this.来访问。
4、mvvm(model viewmodel model)
5、开发中什么叫方法，什么叫函数？
      方法：methods:在类里面的函数叫方法
      函数：function
6、vue生命周期：在创建一个vue实例时，vue已经做了一系列操作了。生命周期也称钩子函数。
7、代码规范：两个空格而不是四个空格。
8、v-once在某些情况下，我们不希望界面随意的跟随改变。该指令只渲染一次，不会随着数据的改变而改变。
9、v-html 数据会按照HTML格式进行解析。
10、v-text 和双括号比较相似，都是用于将数据显示在界面中。不能作用的标签上内写文本，否则会覆盖该文本。
11、v-pre 原封不动地显示内容。
12、v-cloak 配合[v-cloak]{display:none}来使用，目的是在js解析完前，不让拥有它的标签呈现，js解析完后
       会自动删除它。
13、v-bind 给属性绑定值：如 <img v-bind:src="imgurl">
14、计算属性computed:在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
        计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。这样性能就会高一些。
        计算属性是有set,和get方法。但一般都不用set方法，表示它是一个只读属性。
15、ES6之前var没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。
        ES6中，加入了let,let它是有if和for的块级作用域。
16、一旦给const修饰的标识符被赋值之后，不能修改。在使用const定义标识符，必须进行赋值。常量的含义是指向的对象
        不能改，但是可以改变对象内部的属性。
17、v-on 如果方法不需要额外参数，那么会默认将原生事件event参数传递过去。如果需要同时传入某个参数，同时需要
       event时，Vue会默认将浏览器生产的event事件对象作为参数传入到方法。
       v-on修饰符：stop可以阻止事件冒泡。<div @click="divClick">
                                                                       <button @click.stop ></button>
                                                                 </div>
                            prevent可以阻止事件自动提交。<form action="baidu">
                                                                                   <input type="submit" value="提交" @click.prevent="submitClick">
                                                                             </form>
                            监听某个键的键帽：如enter。<input type="text" @keyup.enter="keyup">
                            once 只触发一次回调。
18、v-if，v-else-if,v-else
19、v-show,v-if的区别：v-if当条件为false时，包含v-if指令的元素，根本就不会存在dom中。
                                       v-show只是给元素添加一个行内样式:display:none
       如何选择：当需要在显示与隐藏之间切换很频繁时，使用v-show。当只有一次切换时，用v-if。
20、官方推荐我们在使用v-for时，给对应的元素或组件添加上一个：key属性。
        当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。我们希望可以在B和C之间插入一个F，Diff算法
        默认执行起来是这样的：即把C更新成C，E更新成D，最后再插入E，是不是很没有效率。
        所以我们需要使用key值来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。key
        的作用主要是为了高效的更新虚拟DOM。
21、哪些数组得方法是响应式的。this.letters.push('s');//会渲染到页面上，是响应式的。类似的还有：pop,shift,unshift,splice,sort,reverse
       而 this.letters[0]=“bbbbb”//数组会被改变，但是不会渲染到页面上。不是响应式的。
       复习：push:在数组最后面添加元素，可以是多个
                 pop:删除数组的第一个元素
                 shift：删除数组中第一个元素
                 unshift：在数组最前面添加元素，可以是多个.
                 splice:删除元素/插入元素/替换元素
                           splice(start,num);//num没有，从start起后面全删。
                           splice(start,num,'m','l','n');//替换元素
                           splice(start,0,'m','l','n');//插入元素
                  sort：排序，可传参数(同java，进行升序降序排列)
                  reverse:反转数组。
        附加：set(要修改的对象，索引值，修改后的值)
                  Vue.set(this.letters,0,'bbb');也是响应式的。
22、两种简便for循环：for(let i in books)//取出来的i是数组下标值。
                                    for(let item of books)//取出来的item是数组的项。
23、js函数补充：
       filter：它的回调函数有一个要求：必须返回一个boolean值，当返回true时，函数内部会自动将这次回调的n加入到新的数组中，当返回false时，
                  函数内部会自动过滤掉这次的n。
       map：返回的值都加到一个新数组里。
       reduce：对数组中所有值进行汇总。如全部相加，全部相乘。nums.reduce(function(preValue,n)){}第一个参数是上次循环return的值，n是这
                  次的值。array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
                                function(total,currentValue, index,arr)    必需。用于执行每个数组元素的函数。函数参数:
                                        total    必需。初始值, 或者计算结束后的返回值。
                                        currentValue    必需。当前元素
                                        currentIndex    可选。当前元素的索引
                                        arr    可选。当前元素所属的数组对象。
                                initialVal   可选。传递给函数的初始值
       小例子：需求如下：将数组中小于100的数乘以2之后，全部相加。
                    const nums = [10,20,30,110,234,43,567,34];
                    let total = nums.filter(function(n){
                       return n<100
                    }).map(function(n){
                       return n*2
                    }).reduce(function(preValue,n){
                       return preValue +n
                    },0)
                    更简单的方法：箭头函数
                    num.filter(n=>n<100).map(n=>n*2).reduce((pre,n)=>pre+n);
24、v-model指令是如何实现的？
       v-model其实也是个语法糖，它的本质上实际上是包含两个操作：
       通过v-bind指令把message绑定给输入框的value，然后用v-on监听输入框的input事件来实现反向绑定。
       <input type="text" v-model="message">
       <input type="text" :value="message" @input="valueChange">
        valueChange(event){
            this.message = event.target.value;
        }
        或者直接一点：@input="message=$event.target.value"
25、
       1、用单选框实现性别互斥。
       通过使用name来实现:(有label的for属性，点击按钮和文字都能够进行选中)
       <lable for="male">
           <input type="radio" id="male" name="sex" value="男" v-model="sex">男
       <label>
       <lable for="female">
           <input type="radio" id="female" name="sex" value="女" v-model="sex">女
       <label>
       <h4>您选择的性别是：{{sex}}</h4>
        data:sex:'男'
       2、 checkbox实现单选框。
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>您选择的是：{{isAgree}}</h2>    
        3、checkbox实现多选
         <input type="checkbox" value="篮球" v-model="hobbies">篮球
         <input type="checkbox" value="足球" v-model="hobbies">足球
         <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
         <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
          hobbies:[]
        4、select实现单选
          <select name="abc" v-model="fruit" >
               <option value="苹果">苹果</option>
               <option value="香蕉">香蕉</option>
               <option value="榴莲">榴莲</option>
               <option value="葡萄">葡萄</option>
          </select>
        5、select实现多选
              <select name="abc" v-model="fruits" mutiple>
               <option value="苹果">苹果</option>
               <option value="香蕉">香蕉</option>
               <option value="榴莲">榴莲</option>
               <option value="葡萄">葡萄</option>
          </select>
26、值绑定v-bind
       <label v-for="item in Hobbies" :for="item">
           <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
       </label>
        Hobbies:['篮球','乒乓球','足球','羽毛球']
27、修饰符
        lazy:v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变时
                就会自动发生改变。lazy修饰符可以让数据在数去失去焦点或者回车时才会更新。
        number：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串进行
                进行处理。number修饰符可以让在输入框中输入的内容自动转换成数字类型。
         trim:如果输入的内容首尾有很多空格，通常我们希望将其去除，trim修饰符可以过滤掉内容左右两边的空格。
28、组件使用三个步骤：（1）创建组件构造器对象（2）注册组件（3）使用组件。
        1、Vue.extend();
              调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时，传入template代表我们自定义组件的模板。
              该模板就是在使用到组件的地方，要显示的HTML代码。事实上，这种写法在Vue2.x的文档中已经看不到了。
        2、Vue.component();
              调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。所以要传入两个参
              数：一个是注册组件的标签名，另一个是组件构造器。
        3、组件构造器必须挂载在某个Vue的实例下，否则它不会生效。
        4、全局组件和局部组件。Vue.components是全局组件。
              const app = new Vue({
                  el:'#app',
                  components:{//局部组件
                          cpn:cpnC//cpn使用组件时的标签名，cpnC组件构造器名。
                    }
              })
         5、注册组件的语法糖：
              const cpn1 = Vue.extend({
                   template:
                        <div>
                              <h2>我是标题一</h2>
                        </div>
              })
              Vue.component('cpn1',cpn1);
              等于:
              Vue.component('cpn1',{
                   template:
                        <div>
                              <h2>我是标题一</h2>
                        </div>
              });
              注册局部组件是在app实例里面进行的，用components属性同上面那样替换即可。
         6、组件的分离式写法
               方法一：
              <script type="text/x-template" id="cpn">
                       <div>
                              <h2>我是标题一</h2>
                        </div>
              </script>
              Vue.component('cpn',{
                   template:'#cpn'
              })
              方法二：
              <template id="cpn">
                       <div>
                              <h2>我是标题一</h2>
                        </div>
              </template> 
                Vue.component('cpn',{
                   template:'#cpn'
              })  
        7、组件数据的存放
              组件对象也有一个data属性（也可以有methods等属性），只是这个data属性必须是一个函数，而且这个函数返回一个
              对象，对象内部保存着数据。
        8、组件中的data为什么是函数。
              因为data中放回的对象一定要不同，不然所有组件都是一个状态。           
        9、父子组件通信----子传父
              props:来声明需要从父级接收到的数据。
              props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。
                                                  
              简单实例：
              <div id="#app">
                   <child-cpn:cmessage="message"></child-cpn>    //将data中的数据传递给props
              </div>
              <template id="childCpn">
                   <div>显示的信息{{cmessage}}</div>  //将props中的数据显示在子组件中
              </template>
              <script>
                   let app=new Vue({
                      el:'#app',
                      data:{
                          message:'hello'//   Vue实例中的data
                      },
                      components:{
                          'child-cpn':{
                              template:'#childCpn',
                              props:{'cmessage'}   //子组件的props
                           }
                      }
                })
              </script>
              
              方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。
             Vue.component('my-component',{
                  props:{
                         propA:Number,
                         propB:[Number,String],
                         propC:{
                               type:String,
                               default:100
                               required:true    
                            },
                         //带有默认值的对象
                         propD:{
                                type:Object,
                                //对象或数组默认值必须从一个工厂函数获取
                                default:function(){ 
                                        return { message:'hello'}
                                    }
                            }，
                           //自定义验证函数
                         propE:{
                                validator:function(value){
                                    //这个值必须匹配下列字符串中的一个
                                     return ['success' ,'warning','danger'].indexof(value)!== -1
                                  }
                            }
                     }
             })
        10、v-bind不支持驼峰命名法.
        11、父传子
               自定义事件。流程是：在子组件中，通过$emit()来触发事件。
                                                在父组件中，通过v-on来监听子组件事件。
               例子：

               <!--  父组件模板 -->
 <div id="app">
    <cpn @item-click="cpnClick"></cpn>
 </div>

 <!-- 子组件模板 -->
 <template id="cpn">
     <div>
         <button v-for="item in catagories" @click="btnClick(item)">{{item.name}}</button>
     </div>
 </template>

    <script src="vue.js"></script>
    <script>
        const cpn={
            template:'#cpn',
            data(){
                return {
                    catagories:[
                       { id:'aaa',name:'热门推荐'},
                       { id:'bbb',name:'手机数码'},
                       { id:'ccc',name:'家用家电'},
                       { id:'ddd',name:'电脑办公'},
                    ]
                }
            },
            methods:{
                btnClick(item){
                    //发送事件
                  this.$emit('item-click',item)
                }
            }
        }

        //父组件
        var app = new Vue({
            el:'#app',
            data:{
                message:'你好'
                },
            components:{
                cpn
            },
            methods:{
               cpnClick(item){
                console.log("--",item);
               }
            }
        })
    </script>
29、插槽
               1.使用<slot></slot>
               2.插槽的默认值 <slot>button</slot>//中间有多个也会全部替换。
               3.具名插槽。
30、CommonJs
               模块化有两个核心：导入和导出。
               CommonJS的导出：
                    module.exports = {
                        flag:true,
                        test(a,b){
                           return a+b
                        }
                    }
               CommonJs的导入：
                    let { test ,flag}=require('路径');
31、ES6中的导入和导出
        导出：export{name ,age , height}或者可以定义的时候也可以直接导出
        导入：import{name} from ''./aaa.js''
        导出函数/类：
                  export function mul(num1,num2){
                      return num1*num2
                  }
                  export class Person{
                      constructor(name,age){
                          this.name = name;
                          this.age = age;
                      }
                      run(){
                          console.log(this.age+'在奔跑');
                        }
                  }
          默认导出：某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者
                           可以自己来命名，这个时候就可以用export default
                           export default function() {
                               console.log('default function');
                           }
                           //myFunc是导入者自己命名的
                           import myFunc from './info.js'
                           myFunc();
                           注意：export default在同一个模块中，不允许同时存在多个。
         统一全部导入
                        import * as aaa from './aaa.js'
                        console.log(aaa.flag)
32、webpack
      (1) 什么是webpack？
               webpack是一个现代的Javascript应用的静态打包工具。
      (2)  什么是打包？
               就是将webpack中的各种资源模块进行打包合并成一个或多个包(bundle)。
               并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css,将ES6语法转成ES5语法，将Typescript
               转成JavaScript。
        (3)和grunt/gulp的区别？
               grunt/gulp的核心是Task，我们可以配置一系列的Task，并且定义Task要处理的事务(例如ES6,ts转化，图片压缩，Scss转成css)
               之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。 grunt/gulp更加强调的是前端流程的自动化，模块化不是它的
               核心。webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，是它附带的功能。如果你的工程模块依赖非常简单，
               甚至没有用到模块化的概念。只需要进行简单的合并，压缩，使用grunt/gulp即可。 
        (4)webpack,node,npm之间的关系？
               安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具(npm)。（node package manage）。
      (5)  webpack配置：
                新建文件：webpack.config,js
                内容:
                const path = require('path')
                module.exports = { 
                       entry:'./src/main.js',
                       output:{
                            path:path.resolve(__dirname, 'dist'),
                            filename:'bundle.js'
                       },
                }
       (6) package.json文件中：有一个script，里面包含的test，build等自定义路径，运行npm run build会运行对应指令。
       (7) loader
                  在我们之前的实例中，我们主要用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
                  但是，在开发中，我们不仅仅有基本的js代码需要处理，我们也需要加载css，图片,也包括一些高级的将ES6转成
                  ES5代码，将TypeScript转化成ES5代码等等，这些将通过webpack扩展对应的loader就可以了。
                  使用步骤：1.通过npm安装需要使用的loader.  npm install --save-dev css-loader
                                                                                        npm install style-loader --save-dev
                                   2.在webpack.config.js中的modules关键字下进行配置。
                                      在webpack.config.js中加入
                                      module:{
                                           rules:[
                                                {
                                                    test:/\.css$/,
                                                    use:[ 'style-loader','css-loader' ]//css-loader只负责将css文件进行加载,style-loader负责将
                                                                                                     //样式添加到Dom中，使用多个loader时，是从右向左的
                                                }
                                           ]
                                      }
        （8)plugin
                     plugin是插件的意思。通常是用于对某个现有的架构进行扩展。
                     loader和plugin的区别：loader主要用于转换某些类型的模块，它是一个转换器。
                                                          plugin是个插件，它是对webpack本身的扩展
                     plugin的使用步骤: 1.通过npm安装需要使用的plugins
                                                 2.在webpack.config.js中的plugins中配置插件。
33、vue cli 
        (1) cli:Command-Line Interface,翻译为命令行界面，俗称脚手架。vue cli 是一个官方发布vue.js项目脚手架，使用vue-cli 可以快速搭建
             vue开发环境以及对应的webpack。
        (2) 使用前提:node
        (3) ESLint:自动检查不规范代码并编译不通过。前期安装了但是后期不想用怎么办？在config->index.js->useEslint：false
        (4) e2e end to end 端到端测试。   
        (5) runtime-compiler: template->ast->render->vdom->ui
             runtime-only: render->vdom->ui        
34、箭头函数：也是一种定义函数得方式
        定义函数的方式：1、function :        const aaa = function(){}
                                   2、对象字面量中定义函数：     const obj = {  bbb() {} }   
                                   3、ES6中的箭头函数：    const ccc = (参数列表)=>{ }   //当只有一个参数时，参数列表的括号可以删除
                                         当返回值只有一行代码时，return 和大括号 也可以去掉
        箭头函数的this引用的就是最近作用域中的this。也就是它向外层作用域中，一层层查找this，直到有this的定义。
35、什么是前端渲染，后端渲染？
        前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。
36、SPA页面：单页父应用，整个网页只有一个html页面。
37、安装和使用vue-router
        安装：npm install vue-router --save  并：
                  1.导入路由对象，并且调用Vue.use(VueRouter)
                  2.创建路由实例，并且传入路由的映射配置
                  3.在Vue实例中挂载创建的路由实例
        使用：创建路由挂件，配置路由映射：组件和路径映射关系，使用路由：通过<router-link>和<router-view>
38、Promise
       Promise是异步编程的一种解决方案。
39、better-scroll
       安装：npm install better-scroll --save（去github上下载引用也可以）
       基本使用：<div>
                           <div class="content">
                             <ul>
                                <li></li>......（好多li）
                             <ul>
                           </div>
                      </div>  //挂载点只有一个标签，但是这个标签里面可以包含很多内容。
                      const bscroll = new BScroll(document.querySelector('.content'),{
                            probeType: 3   //probe侦测的意思。0,1都是不侦测实时的位置  2：在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测。
                                               //3：只要是滚动，都侦测。
                             
                        })   
           ，                                                                                                                                                                                                                        
40、ref如果是绑定在组件中的，那么通过'this.$refs.refname'获取到的是一个组件对象
       ref如果是绑定在普通元素中的，那么通过'this.$refs.refname'获取到的是一个元素对象。
41、<style scoped>表示只在当前作用域下有效。
42、组件是不能直接进行点击的，要点击要用@click.native