Vue基础

Vue2.x和VUe3.x是两条线路，都会进行迭代更新。

前端三大框架是：Vue、react和Angela，其中Vue最大的特点是双向数据绑定。

双向指的是视图和数据；dom将数据传递给Vue实例，Vue实例的属性会传递给dom

vue的概述

vue.js是一套构建用户界面的渐进式框架，Vue采用自底向下增量开发的设计。Vue的核心库只关注视图层，它不仅容易上手，还便于与第三方库或者既有项目进行整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。(SPA单页面应用，所有的显示都在一个页面当中)

渐进式：一步一步，不是说你必须一次把所有的东西都用上

自底向上设计：是一种设计程序的过程和方法，就是先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能，实际上是一种自底向上构造程序的过程。

声明式渲染和组件化

声明式渲染：

Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统，例如：

<body>
    <div id='app'>
        <!-- 使用插值表达式将数据渲染 -->
        <p> {{message}} </p>
    </div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '声明式渲染数据，使用插值表达式的方式',
        },
        
    })
</script>

组件化应用构建

组件系统是Vue的另一个重要概念，因为它是一种抽象的，允许我们使用小型、独立、通常可复用的“小积木”构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。

Vue基础案列

使用vue .js实现输出“Hello World”案例

步骤：

1、定义用于填充数据的标签

2、引用Vue.js库文件（在学习测试中使用开发版本，项目上线之后使用生产版本）

3、使用Vue语法实现需求

4、将Vue提供的数据进行填充（插值表达式）到“第1步”中的标签里面

插值表达式

插值表达式是Vue框架提供的一种在HTML模板中绑定数据的方式，使用   {变量名称}}  方式绑定Vue实例data中的数据，会绑定的数据实时更新在视图中显示出来

插值表达式的使用：

　　可以直接使用变量名称

　　也可以使用部分js表达式

注意：使用“{{}}”括起来的区域就是一个JS语法区域，在里面可以写部分的js语法，但是不能定义变量、分支语句、循环语句，可以是三元表达式、方法调用

 

posted @ 2021-01-23 16:00  小小的少年  阅读(129)  评论(0)    收藏  举报