zoukankan      html  css  js  c++  java
  • 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 模型数据,值是一个对象
  • 相关阅读:
    ios开发常用工具集合网站
    xib自定义UIView报错误 "forUndefinedKey:]: this class is not key value coding-compliant for the key"
    IOS MJExtension json转模型的轻量级框架的使用(转载)
    升级Xcode之后VVDocumenter-Xcode不能用的解决办法
    iOS开发系列--并行开发其实很容易
    通讯录开发
    UIGestureRecognizer手势
    UIScrollView
    UIStepper
    UIPickerView
  • 原文地址:https://www.cnblogs.com/guojuboke/p/12293517.html
Copyright © 2011-2022 走看看