一周精通Vue（一）-阿里云开发者社区

new Vue（el, data, methods, computed, filters, components, 生命周期函数）

el:
```
挂载页面元素
```
data:
```
数据
```
methods:
```
定义函数
```

computed:

计算属性  这里面定义的是方法  但是调用时一般是以变量的形式去调用的
这个要比 methods的方法效率更高 方法循环时会每次调用 而这个会有一个缓存 只会调用一次

filters:
```
定义过滤器函数
```
components:
```
局部组件注册
```

vue的生命周期（创建->消亡）

beforeCreate

created:

一般情况下会在这里面做网络请求

beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

模板语法

插值语法：

{{ massage }}  {{}}内不仅可以写变量  也可以写表达式

vue指令

插值指令

v-once:

只是一个指令 没有=""  内容只能被赋值一次 当数据改变时并不会改变

v-html:
```
按照html语法加载数据
```

v-text:

将数据加载到标签 并且覆盖标签内的所有内容

v-pre:

将所有的内容原封不动的展示出来 可以使模板插值语法失效 类似python的原始字符串

v-cloak:

这个属性类似于display:none vue不解析就不显示模板 在vue解析之前有这个属性，解析之后将这个属性删除

动态绑定指令

v-bind:
动态绑定属性 (v-bind:src)可以缩写为(:src) 可以使用任何属性 :src='' 内容支持变量、数组、对象、方法、以及表达式

v-on:
绑定事件 (v-on:click)可以缩写为(@click) 支持所有事件

$event:

@click(prm, $event)  $event默认写法 接收浏览器产生的event对象

stop修饰符:
```
@click.stop 可以阻止事件冒泡
```
prevent修饰符:
```
@click.prevent 阻止submit提交
```

键盘修饰符:

@keyup.enter  监听回车建做事件操作  enter表示回车 这里可以更改为其他键

once修饰符:

@click.once  事件只能被触发一次  这里防止重复提交很有效

v-for:
循环操作在遍历对象时如果只接受一个值默认为value

组件的key属性

在循环是可以选择绑定一个key  但是尽量不要绑定index  因为index
是每次变化的 如果往list里插入一个值 那么所有的 index会重新排序做改变
而绑定item内的数据 则不受排序影响 所以性能更好 一般而言key会绑定一个唯一值

v-if:
条件成立时渲染代码快
v-else:
else代码块
v-else-if:
条件成立时渲染代码快
v-show:
条件成立时显示代码块否则隐藏代码块和display:none相同而v-if是直接不创建DOM 这里会始终有DOM只是不显示
Vue.set(要修改的对象, 索引值, 要修改的值)

v-model:
双向绑定用来同步更新默认为value属性

lazy修饰符:

懒加载 不会实时的去双向绑定更新 只有用户回车或取消焦点的时候进行更新

number修饰符:

默认情况下双向绑定的数据全部都是string类型 这里可以指定绑定的类型

trim修饰符:
```
自动去除字符串两边的空格
```

<h2>{{message}}</h2>
<!--v-model 的双向绑定-->
<input type="text" v-model="message">

<!--双向绑定也可以用另一种方式来实现-->
<input type="text" :value="message" :input="valueChange">
<script >
function valueChange(event){
    console.log("当输入框内容被改变 input时间触发, 通过浏览器产生的 event来获取input内容");
    this.message = event.target.value;
}
</script>
<!--简写-->
<input type="text" :value="message" @input="message=$event.target.value">

虚拟DOM

渲染

key渲染

通过标签的key属性  决定vue在更新DOM的时候是否重新加载DOM
如果是相同的key则可以服用 不用重新加载DOM 但是DOM的属性数据会变化
如果是不相同则直接重新加载一个新的DOM

vue的响应式

并不是所有的修改都是响应式的 例如List的操作 如果使用 list.push("hello") 页面是响应式的
若使用list[0] = 'hello' 此时数据已经改变但是 页面不会进行响应式的修改

ES6

数组的方法

push方法
向list最后插入一个值
pop方法
从list最后取出一个值并删除
shift方法
从list取出第一个元素并删除
unshift方法
在list最前插入一个值

splice方法

删除元素

如果是要删除元素 第一个参数为从第几个开始  第二个参数传入你要删除几个元素
如果只传第一个元素 则第一个参数下标的元素 后面的全部删除

插入元素

第一个表示开始元素  第二个参数默认为0 第三个以后的参数为要插入的参数

替换元素

第一个表示参数开始，第二个参数表示截止，第3个以后的参数表示插入的参数

sort方法
将list进行排序
reverse方法
将list进行反转
高级字符串
`` 可以识别换行符

function

function缩写

add: function() {}
// 可以改写为 
add(){}

function不定长参数

   add(...param){}
   // ...表示可接受不定长的参数  此时param为list类型  
   // 类似于python的  def add(*param)

for循环

// 普通for循环
for (let i = 0; i < 10; i++){
    console.log(list[i]);
}
// 索引for循环
for (let i in [1, 2, 3]){
    console.log(list[i])
}
// 增强for循环
for (let item of [1, 2, 3]){
    console.log(item)
}

高阶函数

// filter函数
const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let newList = numList.filter(function(n){
  return n >= 50
});
// map函数
let new2List = newList.map(function(n) {
  return n * 2
});
// reduce函数 对数组中所有内容进行汇总 第一个参数为回调函数 第二个参数为初始化的值
let totalCount = new2List.reduce(function(preValue, n){
// 初始化preValue是高阶函数初始化的值 n是list中的元素 
// 每一次回调都会将 return的结果赋值给preValue
  return preValue + n
}, 0);

箭头函数

const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let total = numList.filter(n => n <= 50).map(n => n * 2).reduce((pre, n) => pre + n, 0);
console.log(total);

组件化

基本使用
- 全局组件全局组件表示注册的组件可以在任何地方使用
- 局部组件创建的局部组件只能在挂载元素的内部使用

// 创建组件构造器(子组件)
const cpn1 = Vue.extend({
    template: `
            <div>
                <h2>cpn1标题</h2>
                <p>cpn1内容</p>
            </div>
            `
});

// 创建组件构造器（父组件）
const cpn = Vue.extend({
    // ``是高级字符串 可以换行
    template: `
            <div>
                <h2>cpn标题</h2>
                <p>cpn内容</p>
                <cpn1></cpn1>
            </div>
            `,
    // 这里可以在组件构造器内注册其他组件  这注册的这个组件可以用在模板内
    components: {
        cpn1: cpn1
    }
});

// 注册全局组件
Vue.component('my-dev', cpn);

// 注册局部组件  vm可以看做是root组件
const vm = new Vue({
    el: '#app',
    data: {},
    methods:{},
    // 注册局部组件
    component:{
        cpn: cpn
}
});


// 使用组件
// <my-dev></my-dev>

组件注册语法糖
- 注册可以直接省略 extend 直接用对象进行替代

Vue.component('cpn1', {
    template: `
        <div>
            <h2>cpn1标题</h2>
            <p>cpn1内容</p>
        </div>
        `
});

模板分离写法


<!--通过id  进行选择器给template属性赋值 替代template中看起来很难受的字符串-->

<script type="text/x-template" id="cpn">
    <h3>标题</h3>
    <p>内容。。。</p>
</script>

<template id="cpn2">
    <h1>标题</h1>
</template>
<script>
    Vue.component('my-cpn', {
        template: "#cpn"
    });
</script>

组件内容访问Vue实例数据
默认组件内部是不能直接访问Vue实例内的数据内容的
在组件的内部会有一个data属性而这个data属性必须是一个函数返回一个对象，对象内部保存着数据

为什么组件内的data必须是一个函数？

因为组件在复用时 应用的data如果是一个对象的话 ，那么每次引用都是同一个对象，当对这个
对象作出更改的时候，所有用到该数据的地方都会被联动修改，所以需要用函数返回一个对象 这代表这每一次
复用组件都会去调用一次data函数 获取一个新的data对象，这样就能相互隔离，其实这里是类似于深拷贝和浅拷贝的关系

组件之间的通信

props的用法（父组件向子组件传递）
- props支持的数据类型
1. String
2. Number
3. Boolean
4. Array
5. Object
6. Date
7. Function
8. Symbol
- 注意：当定义分离模板时需要一个根组件如果没有根组件则不能正常解析

<!--子组件模板-->
<template id="cpn">
    <div>
        <p>{{c_movies}}</p>
        <h2>{{c_message}}</h2>
        <ul>
            <li v-for="item in c_movies"> {{item}}</li>
        </ul>
    </div>

</template>



<!--父组件模板-->
<div id="app">
    <!--    props数据来双向绑定父组件中的数据-->
    <cpn :c_movies="movies" :c_message="message"></cpn>
</div>

<script>

    // 子组件
    const cpn = {
        template: "#cpn",
        // 父亲组件向子组件传递数据 
        // 第一种 数组方式
        // props: ['c_movies', 'c_message'],

        // 第二种 对象方式
        props: {
            // 1.类型限制
            // c_movies: Array,
            // c_message: String,

            // 2.提供一些默认值
            c_message: {
                // 数据类型
                type: String,
                // 默认值
                default: '这个是消息数据',
                // 是否必选参数
                required: true,
            },
            c_movies: {
                type: Array,
                default: []
            }
        },
        data() {
            return {}
        }
    };

    // 父组件
    const vm = new Vue({
        el: "#app",
        data: {
            message: '信息',
            movies: ['海王', '海贼王', '庆余年', '神话']
        },
        components: {
            cpn: cpn
        }
    });

</script>

this.$emit的用法（子组件向父组件传递事件）

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

<!--父组件模板-->
<div id="app">
    <!--监听子组件事件-->
    <!--监听到子组件事件后 如果绑定父组件的method若不传item 则默认就是item 不是event-->
    <cpn @item_click="cpn_click"></cpn>
</div>

<script>

    // 子组件
    const cpn = {
        template: "#cpn",
        data() {
            return {
                categories: [
                    {id: '1', name: '热门推荐'},
                    {id: '2', name: '手机数码'},
                    {id: '3', name: '家用家电'},
                    {id: '4', name: '电脑办公'},
                    {id: '5', name: '生活日用'},
                ]
            }
        },
        methods: {
            bthClick(item) {
                console.log(item);
                // 发射子组件的自定义事件到父组件  传递item参数
                this.$emit("item_click", item)
            }
        }
    };

    // 父组件
    const vm = new Vue({
        el: "#app",
        data: [],
        components: {
            cpn
        },
        methods: {
            // 接受item参数
            cpn_click(item) {
                console.log('监听到了来自子组件的事件！');
                console.log(item);
            }
        }
    });


</script>

一周精通Vue（一）

new Vue（el, data, methods, computed, filters, components, 生命周期函数）

vue的生命周期（创建->消亡）

模板语法

vue指令

插值指令

动态绑定指令

虚拟DOM

渲染

ES6

数组的方法

function

组件化

组件之间的通信

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

一周精通Vue（一）

new Vue（el, data, methods, computed, filters, components, 生命周期函数）

vue的生命周期（创建->消亡）

模板语法

vue指令

插值指令

动态绑定指令

虚拟DOM

渲染

ES6

数组的方法

function

组件化

组件之间的通信

热门文章

最新文章

相关课程

相关电子书