vue的介绍及基本使用（详细，好理解，示例代码）

最新推荐文章于 2022-01-18 09:57:13 发布

weixin_46370867

最新推荐文章于 2022-01-18 09:57:13 发布

阅读量655

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/112689326

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

下面是对Vue的介绍和对Vue的基本使用，希望可以帮助到有需要的小伙伴~

文章目录

VUE介绍

Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。

Vie的核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。当Vue与现代化的工具链以及各种支持类库结合使用的时候，Vue完全能够为复杂的单页应用提供驱动。

Vue.js的创建者是尤雨溪

2014年2月，Vue.js正式发布
2015年10月27日，正式发布1.0.0
2016年4月27日，发布2.0的预览版本

Vue：渐进式JavaScript框架

声明式渲染 → 组件系统→客户端路由→集中式状态管理→项目构建

官网：https://cn.vuejs.org/v2/guide/

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

Vue的基本使用

Vue的基本使用步骤

需要提供标签用于填充数据
引入vue.js库文件
可以使用vue的语法做功能
把vue提供的数据填充到标签里面

在这里插入图片描述

把下载的vue.js文件复制到vue项目中

hello world示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
</head>
<body>
    <!-- 1. 提供标签用于存放数据 -->
    <div id="app">
        <!-- 4. 把vue提供的数据填充到标签里面 -->
        <!-- 把msg数据存放到id为app的div中 -->
        <div>{{msg}}</div> 
    </div>
    <!-- 2. 引入vue.js库文件 -->
    <script src="js/vue.js"></script>
    <script>
    //   3. 使用vue语法实现功能
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'Hello Vue'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

参数分析：
- el：元素的挂载位置（值可以是CSS选择器、DOM元素。即：告诉vue把数据插入到哪里
- data：模型数据（值是一个对象）。即：提供数据
插值表达式{{ }}用法
- 将数据填充到HTML标签里
- 插值表达支持基本的计算操作
Vue代码运行原理分析
- 概述编译过程的概念（Vue语法 -> 原生语法）

在这里插入图片描述

end~

weixin_46370867

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue的介绍及基本使用（详细，好理解，示例代码）

下面是对Vue的介绍和对Vue的基本使用，希望可以帮助到有需要的小伙伴~文章目录VUE介绍Vue：渐进式JavaScript框架Vue的基本使用Vue的基本使用步骤VUE介绍Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vie的核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。当Vue与现代化的工具链以及各种支持类库结合使用的时候，Vue完全能够为复杂的单页应用提供驱动。Vue.js的创建者是尤雨溪2014年2月，Vue.js正式发布201
复制链接

扫一扫

专栏目录