• vue基础(1) 基本概念及hello world


    理论知识

    • vue是一个渐进式的js框架。
      • 渐近 vue能够提供 1声明式—>2组件系统->3客户端路由->4集中式状态管理->5项目构建 五种渐进(功能逐渐强大)的模式,用户可根据项目大小使用不同的模块。

    声明式编程,只需要告诉程序需要什么效果,其他的交给程序完成.基于vue模板语法的网页结构和最终效果基本一致。
    - 框架 指能够提供基础服务,强调服务。对于vue有虚拟dom、双向数据绑定的底层服务支撑。
    库指提供一些功能接口,强调接口。jquery是一个库,主要包含了一些常用的API等,不是服务。

    • vue运行基本原理
      • 用户写vue代码,vue框架编译这些代码,生成原生js代码,交给浏览器执行。
    • vue三大特点
      • 易用:熟悉htmlcssjs知识,即可上手
      • 灵活:在库和完整框架之间自如伸缩
      • 高效:虚拟DOM,20k运行大小

    实践

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="vue.js"></script> <!-- vue.js去官网下载,保存在项目目录下面 -->
    </head>
    <body>
    	<div id="app">
    		{{ msg }}  //插值表达式 将数据填充到html标签 
    	</div>
    	<script type="text/javascript">
    		var app = new Vue({
    			el: '#app',  //选择要操作的元素对象,确定数据填充目标。
    			data:{      //要操作的数据,与dom元素进行数据绑定。
    				msg:'hello world'
    			}
    		})
    	</script>
    </body>
    </html>
    

    总结

    • 创建vue实例时,大括号在小括号内部, var app =New vue({ }),不是在外部。
    • {{ data }} 这是一个插值表达式,支持基本计算。只要符合js表达式即可。
    • Vue所作的工作本质上是将数据填充到网页中,因此创建vue实例时需要两个属性。
      • el 元素的挂载位置,可以式css选择器或dom节点
      • data 模型数据,值是一个对象
  • 相关阅读:
    bzoj3505 数三角形 组合计数
    cogs2057 殉国 扩展欧几里得
    cogs333 荒岛野人 扩展欧几里得
    bzoj1123 BLO tarjan求点双连通分量
    poj3352 road construction tarjan求双连通分量
    cogs1804 联合权值 dp
    cogs2478 简单的最近公共祖先 树形dp
    cogs1493 递推关系 矩阵
    cogs2557 天天爱跑步 LCA
    hdu4738 Caocao's Bridge Tarjan求割边
  • 原文地址:https://www.cnblogs.com/guojuboke/p/12293517.html
Copyright © 2020-2023  润新知