知识了解

概念

Vue是一个渐进式的框架。与其他重量级框架相比不同的是,Vue采用自底向上增量开发的设计.  Vue的核心代码只关注视图层.
渐进式概念?

1、可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验
2、可以将更多的业务逻辑使用Vue实现
3、如 Core+Vue-router+Vuex,也可以满足各种各样的需求

特点

Vue很多特点和Web开发中常见的高级功能

1、解耦视图和数据
2、可复用的组件
3、前端路由技术
4、状态管理
5、虚拟DOM

虚拟DOM

运行js的速度是很快的,大量的DOM操作会很慢,
时常在更新数据的时候我们只是拼写了一点的HTML代码,
使用innerHTML进行操作,但是这样的更新数据会重新渲染页面,
造成了在没有改变数据的地方也重新渲染了DOM节点,这就造成了很大程度上的资源浪费.

Vue利用在内存中生成与真实DOM相对应的数据结构,这个在内存中生成的结构称之为虚拟DOM.

在这里插入图片描述

当数据发生改变时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上.

在这里插入图片描述

document本身就是浏览器将标签抽取出来作为对象.
Vue则是通过rander方法将模版抽取成为虚拟DOM,
在虚拟DOM改变时,对比改变前和改变后的结构,
以最小的代价重新渲染真实DOM.虚拟DOM在js中的表现就是树状的对象结构。

安装

1、直接CDN引入

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

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


2、下载和引入

开发环境:https://vuejs.org/js/vue.js
生产环境:https://vuejs.org/js/vue.min.js


3、NPM安装

通过webpack和CLI的使用

测试

1、第一个vue运行

<body>
    <div id="element">{{message}}</div>
    <script>
        const app=new Vue({
             //用于挂载要管理的元素节点,
            //值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。
            el:'#element',
            //定义数据
            data:{  
                message:"你好啊,我是Vue"
            }
        })
    </script>
</body>

/*
在编程范式可以看出:
	这是声明式编程而不是命令式编程(原生js)
*/
2、响应式列表

<body>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
    <script src="./vue.js"></script>
    <script>
        const app=new Vue({
            el:"ul",
            data:{
                list:["第一个列表","第二个列表","第三个列表","第四个列表","第五个列表"]
            }
        })
    </script>
</body>


图片如下:
在这里插入图片描述

3、计数器

<body>
    <div>
        <h2 >当前数字为:{{count}}</h2>
        <!-- 通俗写法 -->
        <button v-on:click="count++">+</button>
        <!-- 语法糖写法 -->
        <button @click="count--">-</button> 
        <button @click="printf">打印</button>

    </div>
    <script src="./vue.js"></script>
    <script>
        //声明一个vue对象
        const app=new Vue({
            //绑定定位元素节点
            el:"div",
            //数据
            data:{
                count:0
            },
            //方法
            methods:{
                printf(){
                    alert(`当前数字为:${this.count}`)
                }
            }
        })
    </script>
</body>

MVVM

Mode View ViewModel

MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑

通俗说:viewModel 是model和view中间的桥梁,将model中的数据业务逻辑来抽象化到view(交互操作)

而vue就是相当为viewModel,将model数据抽象化为dom树,也可以将用户对dom进行点击事件类似操作绑定到model数据上


图片如下:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐