Vue学习（一）——概述及入门

最新推荐文章于 2023-10-16 12:32:14 发布

云中、漫步

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量342

点赞数 1

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_44075963/article/details/106599050

版权

Vue学习专栏收录该内容

24 篇文章 14 订阅

订阅专栏

1、vue是什么？

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。也可以说是一个类库。
在这里插入图片描述

用于构建用户界面的渐进式框架
声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建
vue 的核心库只关注视图层

特别注意，Vue还是一款国产框架，非常难得啊。它的作者–尤雨溪。
在这里插入图片描述
Vue诞生于2014年，2015年10月27日才正式发布1.0.0版本。

2、Vue有哪些优点？

易用、灵活、高效
简单易上手

3、Vue的基本使用

Vue使用的基本步骤：
1、需要提供标签用于填充数据；
注意：在标签中我们使用插值语法的形式即 {{}} 进行填充数据
2、引入Vue.js库文件；
注意：一定要先引入Vue文件再使用Vue语法因为存在作用域的问题
3、使用Vue的语法做功能；
new Vue() 创建一个Vue的实例；
在构造函数中以对象的形式做一些配置
4、利用Vue将数据渲染到页面上。
数据写在data 里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{mag}}</div>
    <div>{{1+2}}</div>  <!支持运算>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            mag: "hello vue!"
        }
    });
</script>
</body>
</html>

4、hello vue细节分析

1、实例参数分析

el：元素的挂载位置（所谓挂载，就是将数据关联在页面中的某个标签里，值可以是CSS选择器或者是DOM元素）
data：模型数据（值是一个对象）

2、插值表达式用法（也就是双花括号{{}}）

将数据填充到HTML标签中；
插值表达式支持基本的计算操作；

3、vue代码运行原理分析

编译过程（Vue语法为什么能在浏览器中运行？）
vue代码通过Vue框架才能转换为原生js代码

云中、漫步

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（一）——概述及入门

1、vue是什么？Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。也可以说是一个类库。用于构建用户界面的渐进式框架声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建vue 的核心库只关注视图层特别注意，Vue还是一款国产框架，非常难得啊。它的作者–尤雨溪。Vue诞生于2014年，2015年10月27日才正式发布1.0.0版本。2、Vue有哪些优点？易用、灵活、高效简单易上手...
复制链接

扫一扫