码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-11 00:13:59      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:对象   type   原理   tle   js框架   实践   一个   rip   js代码   

理论知识

  • vue是一个渐进式的js框架。
    • 渐近 vue能够提供 1声明式—>2组件系统->3客户端路由->4集中式状态管理->5项目构建 五种渐进(功能逐渐强大)的模式,用户可根据项目大小使用不同的模块。
    • 框架 指能够提供基础服务,强调服务。对于vue有虚拟dom、双向数据绑定的底层服务支撑。

      库指提供一些功能接口,强调接口。jquery是一个库,主要包含了一些常用的API等,不是服务。

  • vue运行基本原理
    • 用户写vue代码,vue框架编译这些代码,生成原生js代码,交给浏览器执行。
  • vue三大特点
    • 易用:熟悉html\css\js知识,即可上手
    • 灵活:在库和完整框架之间自如伸缩
    • 高效:虚拟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 模型数据,值是一个对象

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

标签:对象   type   原理   tle   js框架   实践   一个   rip   js代码   

原文地址:https://www.cnblogs.com/guojuboke/p/12293517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!