Vue 一套构建用户界面的渐进式的框架（知识了解篇~）

知识了解概念Vue是一个渐进式的框架。渐进式概念？1、可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验2、可以将更多的业务逻辑使用Vue实现3、如 Core+Vue-router+Vuex，也可以满足各种各样的需求特点Vue很多特点和Web开发中常见的高级功能1、解耦视图和数据2、可复用的组件3、前端路由技术4、状态管理5、虚拟DOM安装1、直接CDN引入<!-- 开发环境版本，包

Jine~

8410人浏览 · 2020-09-24 00:58:32

Jine~ · 2020-09-24 00:58:32 发布

知识了解

概念

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数据上

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^