Vue基础（数据绑定、export使用）

1、简介

        在使用vue开发的过程中，经常会遇到一些容易混淆的问题，因此，在本文中进行汇总操作，只有通过不断总结学习，才能更好掌握vue的使用（每天进步一点）。

2、数据绑定

        在js中定义数据（param参数）：

<script>
    export default {
        data:{
            param: ''
        }
    }
</script>

2.1、数据单向绑定

        数据单向绑定，指的是数据只能通过data流向页面；使用如下语法进行使用：

<!-- 数据单向绑定 -->
<input type='text' v-bind:param="xxx" />
<!-- 或者简写为 -->
<input type='text' :param="xxx" />

2.2、数据双向绑定

        数据双向绑定，指的是数据既能通过data流向页面，也能通过页面流向data；使用如下语法进行使用： 

<!-- 数据双向绑定 -->
<input type='text' v-model:value="xxx" />
<!-- 或者 -->
<input type='text' v-model="xxx" />

3、export使用

3.1、export两种使用方法

// 1、默认暴露
export default{} 
// 或者先定义再暴露
const aa = {}
export default aa
// 2、统一暴露
const a = {}
const b = {}
export {a,b}

3.2、export后如何引入

// 1、对于默认暴露
import xxx from  './xxx.js'
// 2、对于统一暴露（在导入时需要使用{}）
import {a,b} from  './xxx.js'  // 如果只引入一个组件也不可省略{}

注：在使用统一暴露时，在export 和import时都需要加{}，即使只暴露一个参数。

 4、总结

        学习前端是一个不断积累和总结的过程，需要每天精进一点，才能更好掌握vue。

        本人是一个从小白自学计算机技术，对前端、运维、后端、各种中间件技术、大数据等有一定的学习心得，想获取自学总结资料（pdf版本）或者希望共同学习，关注微信公众号：it自学社团。后台回复相应技术名称/技术点即可获得。（本人学习宗旨：学会了就要免费分享）