一、Vue基础知识

1.知识补充：

• 箭头函数：

var elements = [  'Hydrogen',  'Helium',  'Lithium',  'Beryllium'];elements.map(function(element) {   return element.length; }); // 返回数组：[8, 6, 7, 9]// 上面的普通函数可以改写成如下的箭头函数elements.map((element) => {  return element.length;}); // [8, 6, 7, 9]// 当箭头函数只有一个参数时，可以省略参数的圆括号elements.map(element => { return element.length;}); // [8, 6, 7, 9]// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号elements.map(element => element.length); // [8, 6, 7, 9]// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，// 可以替换成任意合法的变量名elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

2.通过id找元素索引：

// 如何根据id找到要删除的索引                this.list.some((item,i) => {                    if(item.id == id){                        this.list.splice(i,1)                        // 找到了，终止循环                        return true                    }                })

var index = this.list.findIndex(item => {                    if (item.id == id) {                        // 终止循环                        return true                    }                })

3.过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

    
         {
   {msg | myFilter('疯狂')}}
    

4.Vue生命周期函数

var vm = new Vue({        el: '#app',        data: {            msg: 'Vue生命周期'        },        methods: {            show() {                console.log('执行了show方法')            }        },        // 第一个生命周期函数，表示实例完全被创建出来之前执行        beforeCreate() {            // 注意：在beforeCreate生命周期函数执行的时候，data和methods没有初始化        },        // 第二个生命周期函数        created() {            // 如果要调用data和methods最早在这里            console.log(this.msg)        },        // 第三个生命周期函数，表示模板已经在内存中编辑完成了，尚未渲染到页面        beforeMount() {            //console.log(document.getElementById('h3').innerText)            // 在beforeMount执行的时候，页面元素没有被真正替换过来        },        // 第四个生命周期函数，表示内存中的模板已经挂载到了页面        // mounted是实例创建期间的最后一个生命周期函数，执行完mounted生命周期就创建好了        mounted() {            console.log("mounted方法" + document.getElementById('h3').innerText)        }    })

5.通过vue-resource 发送http请求

// global Vue objectVue.http.get('/someUrl', [config]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);// in a Vue instancethis.$http.get('/someUrl', [config]).then(successCallback, errorCallback);this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

全局配置数据接口的根域名ConfigurationSet default values using the global configuration.Vue.http.options.root = '/root';Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';Set default values inside your Vue component options.new Vue({  http: {    root: '/root',    headers: {      Authorization: 'Basic YXBpOnBhc3N3b3Jk'    }  }})Note that for the root option to work, the path of the request must be relative. This will use this the root option: Vue.http.get('someUrl') while this will not: Vue.http.get('/someUrl').

6.

• 全局注册

// 方式一
    
         
     
    

// 方式二
    
    
     
    
    
    

• 局部注册

• 组件中的data

为什么组件中的data必须为一个方法？是为了组件之间不共享数据。

• 不同组件之间的切换

// 方法一：使用 v-if
    
    
     登录    
     注册    
         
     
    

// 方法一：使用 component 标签
    
    
     登录    
     注册    
         
         
     
    

• 父组件向子组件传值

• 父组件向子组件传递方法