Vue.js系列（一）介绍

最新推荐文章于 2024-01-03 09:19:25 发布

Chen__Mou

最新推荐文章于 2024-01-03 09:19:25 发布

阅读量355

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/Chen__Mou/article/details/80158311

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js

首先，学习Vue.js的第一步，便是了解Vue.js是什么？

这里引用Vue.js官网的一句话：“Vue是一套用于构建用户界面的渐进式框架”。

渐进式框架

那么，什么是渐进式框架呢？

这里引用“Vue作者尤雨溪：Vue 2.0，渐进式前端解决方案”这篇文章里作者尤雨溪的说法：“我在做Vue的过程中也在不停地思考它的定位，现在，我觉得它与其他框架的区别就是渐进式的想法，也就是“Progressive”——这个词在英文中定义是渐进，一步一步，不是说你必须一竿子把所有的东西都用上”。

这里，我们来看一张图：

声明式渲染和组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。而所谓的渐进式框架就是指，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。

使用

那么，如何使用Vue呢？

最简单的办法就是直接通过<script>标签引入，有两个版本可以选择：

1.开发版本包含完整的警告和调试模式

<script src="https://vuejs.org/js/vue.js"></script>

2.生产版本删除了警告

<script src="https://vuejs.org/js/vue.min.js"></script>

生产版本可以带来比开发环境下更快的速度体验，可以在最终发布的站点中使用，但在开发过程中，建议使用开发版本。

实例

我们可以通过向Vue函数传入一个选项对象创建一个Vue实例：

var app = new Vue({
  // 选项
})

接下来我们编写一个简单的例子：

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>vueDemo1</title>
        <script src="https://vuejs.org/js/vue.js">//引入开发版本</script> 
    </head>
    <body>
        <div id="div1">
            <p>{{message}}</p>
        </div>
        <script>
            var app=new Vue({//Vue实例
                el:'#div1',
                data:{
                    message:'Hello Vue.js!'
                }
            })
        </script>
    </body>
</html>

显示效果如下：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，在这个例子中，我们创建了一个Vue应用"app"，将数据和DOM建立起了关联，现在，<div>的内容是响应式的了，我们在浏览器的控制台修改app.message的值，可以看到<div>的内容相应的更新，如下图所示：

在这个例子中我们可以看到，Vue实例通过传入的选项对象的el属性的值绑定DOM元素，并向Vue的响应式系统中加入data对象的所有属性，当这些属性的值发生改变时，视图会进行重渲染，即所谓的“响应”。

以上，便是此次对Vue.js的简单介绍，水平有限，如有错误，还请批评指正。

Chen__Mou

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue.js系列（一）介绍

Vue.js首先，学习Vue.js的第一步，便是了解Vue.js是什么？这里引用Vue.js官网的一句话：“Vue是一套用于构建用户界面的渐进式框架”。渐进式框架那么，什么是渐进式框架呢？这里引用“Vue作者尤雨溪：Vue 2.0，渐进式前端解决方案”这篇文章里作者尤雨溪的说法：“我在做Vue的过程中也在不停地思考它的定位，现在，我觉得它与其他框架的区别就是渐进式的想法，也就是“Progressi...
复制链接

扫一扫