Vue的基本使用——Vue学习笔记（1）

 

Vue官网：Vue教程

介绍

Vue：（读音/Vju:/, 类似于view），是一套用于构建用户界面的渐进式JavaScript框架。　　

何为渐进式？声明式渲染-》组件系统-》客户端路由-》集中式状态管理-》项目构建

 

Vue的优点：

  • 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
  • 灵活：可以在一个库和一套完整框架之间自如伸缩
  • 高效：20kb运行大小，超快模拟DOM

 

引入Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

Vue的安装，参考官网：Vue安装　　

基本使用

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ msg }}
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello Vue'
            }
        })
    </script>
</html>

 

解析：

1. 实例参数分析

  • el:元素的挂载位置（值可以是CSS选择器或者DOM元素）
  • data:模型对象（值是一个对象）

2. 插值表达式用法

  • 将数据填充到HTML标签中（用法：{{ msg }}）
  • 插值表达式支持基本的计算操作（如：{{ 1 + 2 }}）　　

3. Vue代码运行原理分析

  • 概述编译过程的概念（Vue代码-》原生语法）

         Vue语法--(通过 Vue框架)-->原生代码

总结

Vue的基本使用步骤

  1. 需要提供标签用于填充数据；
  2. 引入Vue.js库文件；
  3. 使用Vue语法实现功能；
  4. 把vue提供的数据填充到标签里

 

posted @ 2020-02-21 18:41  XA_Fanny  阅读(216)  评论(0)  编辑  收藏  举报