01-02 VUE概述及基本使用

本文介绍了Vue.js作为渐进式JavaScript框架的核心概念与优势,包括声明式渲染、组件系统等特性。通过详细步骤展示了如何在项目中快速上手Vue,如引入库文件、使用Vue语法及数据绑定。并通过HelloWorld示例深入分析了Vue实例参数、插值表达式及代码运行原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、Vue概述

  1. Vue:渐进式 javascript 框架
  2. 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
  3. 官网:https://cn.vuejs.org/v2/guide/
    or https://vuejs.bootcss.com/guide/
  4. 优点:易用(熟悉HTML、CSS、js知识后,可快速上手)、灵活(库和框架之间自如伸缩)、高效(20kb运行大小)

二、Vue基本使用

1. 基本使用步骤:

a. 提供标签用于填充数据
b. 引入 vue.js 库文件
c. 使用 vue语法做功能
d. 把vue提供的数据填充到标签里面

2. HelloWorld 细节分析

1). 实例参数分析:
  • el : 元素的挂载位置(关联),值可以是css或者dom
  • data : 模型数据(值是一个对象)
2). 插值表达式用法:
  • 将数据填充到HTML标签中,
  • 插值表达式支持基本的运算 (加减拼凑···都可以
3). Vue代码运行原理分析
  • 编译过程(Vue语法–>原生语法)vue框架来编译

代码部分

<div id="app">
 <div>{{msg}}</div>
 <div>{{1+2}}</div>
 <div>{{msg+'----'+'123'}}</div>
</div>
 
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
  var vm = new Vue({
   el:'#app', //告诉vue,你要把这个数据填充到什么位置
        //严格的id选择器
   data: {  //用于提供数据
    msg:'hello vue'
   }
  }); //用于存储vue的实例
 </script>

浏览器显示部分

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值