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编辑  收藏  举报