Vue初探

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

开发工程发展历史

现在对目前的项目工程化有了大体了了解，那么其中，在第二阶段的工程化演进中，有一个重要的工程设计理念诞生，他就是著名的 MVC 设计模式，简单点，MVC 其实就是为了项目工程化的一种分工模式；

MVC 中的最大缺点就是单项输入输出，所有的 M 的变化及 V 层的变化，必须通过 C 层调用才能展示；

为了解决相应的问题，出现了 MVVM 的设计思想，简单理解就是实现数据层与展示层的相互调用，降低业务层面的交互逻辑，使数据能够影响样式，样式能影响数据，也就是双向绑定（data-binding）

Vue 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的 渐进式框架。

注意：Vue是一个框架，相对于 jq 库来说，是由本质区别的；

vue 官网：https://cn.vuejs.org/

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

Vue 引入方式

直接下载引入

开发版本：https://cn.vuejs.org/js/vue.js

生产版本：https://cn.vuejs.org/js/vue.min.js

CDN 引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

CDN 加速： https://www.bootcdn.cn/

Hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue hello world</title>
    <!--这里因为方便，我直接使用cdn方式引入-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div >
        {{divBody}}
    </div>
</body>
<script>
    //只要引入vue框架，就会全局有个vue对象，这个对象是应用的根对象
    var app = new Vue({
        // 设置要操作的元素
        el: '#div',
        // 要替换的额数据
        data: {
            divBody: '我是一个div'
        }
    })
</script>
</html>

运行效果

Vue 实例对象

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的：

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

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue hello world</title>
    <!--这里因为方便，我直接使用cdn方式引入-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div >
        {{divBody}}
    </div>
</body>
<script>
    //只要引入vue框架，就会全局有个vue对象，这个对象是应用的根对象
    var app = new Vue({
        // 设置要操作的元素
        el: '#div',
        // 要替换的额数据
        data: {
            divBody: '我是一个div'
        }
    });
    //打印vue实例
    console.log(app);
</script>
</html>

对象结构如下

以上是 Vue初探 的全部内容， 来源链接： utcz.com/z/378645.html

回到顶部