zoukankan      html  css  js  c++  java
  • 01vue初识

    vue

    官方api:https://cn.vuejs.org/v2/guide/

    介绍

    1、渐进式框架

    vue是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计。vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整。
    渐进式表现:声明式渲染—组件系统—客户端路由—大数据状态管理—构建工具

    2、 两个核心点

    (1)响应式数据绑定
    当数据发生变化的时候,视图自动更新,即双向数据同步,原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据,监控对数据的操作。
    (2)组合的视图组件
    即页面最终映射为一个组件树,采用树形数据结构进行设计,方便维护,重用。

    3、虚拟DOM

    利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

    4、MVVM

    MVVM 是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对 View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
    M:Model(数据层,也就是指数据(前端是js))
    V:View ( 也就是指DOM层 或用户界面 )
    VM : ViewModel (处理数据和界面的中间层,也就是指Vue)

    img

    5、声明式渲染

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
    额外补充:
    渲染分为:命令式渲染和声明式渲染
    命令式渲染:命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行
    声明式渲染 :只需要告诉程序想要什么效果,其他的交给程序来做
    具体区别看如下代码,执行结果一样,实现方式不同。

    <script type="text/javascript">
        var arr = [1, 2, 3, 4, 5];
    
        // 命令式渲染:关心每步,关心流程,用命令去实现
        var newArr = [];
        for(var i = 0, len = arr.length; i < len; i++) {
            newArr.push(arr[i] * 2);
        }
        console.log(newArr);
    
        // 声明式渲染:不关心中间流程,只需要关心结果和实现条件
        var arr1 = arr.map(function(item) {
            return item*2;
        });
        console.log(arr1);
    </script>
    

    运行第一个代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>vue入门</title>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<!--Vue的模板的绑定数据的方法,用两对花括号进行绑定Vue中的数据对象的属性 -->
    			{{message}}
    		</div>
    
    		<script type="text/javascript">
    			var app = new Vue({ // 创建Vue对象。Vue的核心对象。
    				el: '#app', // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
    				data: { // data: 是Vue对象中绑定的数据
    					message: 'hello Vue!' // message 自定义的数据
    				}
    			})
    		</script>
    	</body>
    </html>
    
    

    结果

    hello Vue!
    
  • 相关阅读:
    软件测试第三次作业
    第一次实验 Junit简单test三角形的小程序
    软件测试[2]falut error failure 的区别与理解
    java中使用jxl的jar包处理excel的复制,更新等问题。
    java中== 和 .equals()的区别
    c# 规格说明书
    c#第九课 linq stream(2)
    c# 第八课 linq stream
    c# 第七课 NET 框架的正则表达式类
    矩阵模版(新)
  • 原文地址:https://www.cnblogs.com/slzhao/p/13258494.html
Copyright © 2011-2022 走看看