Vue基础

Posted 2021-03-24 zengbisheng

1.vue简介
Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。其实说白了Vue.js就是一个用于搭建类似于网页版知乎这种
表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单
页应用。

Vue是一个数据驱动页面的一个框架，基于MVVM模式，M指的是数据，V值得是视图，VM是视图模型，将数据绑定视图上（双向绑定）这个框架着重于VM部分

2.vue的优点

　　1.易用

　　已经会了 html、CSS、javascript？即刻阅读指南开始构建应用！

　　2.灵活

　　不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

　　3.高效

　　20kB min+gzip 运行大小
      超快虚拟 DOM (虚拟dom的渲染速度要比我们真实的dom渲染速度快)
      最省心的优化

　　虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想

　　3.vue的cdn引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

　　或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

4.vue的基本语法

<div id="vue">
    <p>{{msg}}</p>
</div>
        
<script type="text/javascript">
    // 创建vue实例化对象
    var vueApp = new Vue({
    // 挂载点
    el:"#vue",
    // 第一种写法
    data:{
        msg:"这是我的第一个vue",
    }，
    // 单独写函数的地方（点击事件等等）
    methods:{
        //事件
    }
</script>