Vue简介以及基本使用

Posted 2021-02-02 lychengx

Vue

是一套构建用户界面的渐进式 框架

 

框架和库？

• 框架（基于自身的特点向用户提供一套完整的解决方案，控制权在框架本身，需要使用者按照框架所规定的某种规范进行开发）
• Vue
• Angular
• React
• ......
• 库（一个封装好的特定的集合，供开发者使用，而且是特定于某一方面的集合（方法和函数）。库没有控制权，控制权在开发者手中，我们可从封装的角度理解库）
  • jQuery
  • zepto
  • animate.css
  • ......

 

渐进式？

渐进式代表的含义是：主张最少

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

- 必须使用它的模块机制 - 必须使用它的依赖注入 - 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

vue它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

现在我要说说为什么我这么支持Vue了，没什么，可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

出处：https://www.zhihu.com/question/51907207/answer/136559185

 

 

Vue特点

• 核心只关注视图层
• 易学，轻量，灵活
• 适用于移动端

 

安装Vue

• CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

• NPM

$ npm install vue

 

基本使用

html

<div id="app">
     <!--moustache 小胡子语法 表达式 可以放三元表达式、取值、赋值-->
     {{msg}}
</div>

javascript

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //引入vue 会自动给你一个Vue构造函数
    let vm = new Vue({// vm == viewModel
        el:‘#app‘, //告诉vue能管理哪个部分
        data:{//data中的数据会被vm所代理
            msg:‘hello‘,//可以通过vm.msg取到对应的数据
        }
    })
</script>