vue入门（一）

最新推荐文章于 2024-07-10 18:13:56 发布

yshir-phper

最新推荐文章于 2024-07-10 18:13:56 发布

阅读量185

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_39399966/article/details/112529177

版权

vue 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

一、Vue.js 是什么？

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

二、MVVM模式

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

MVVM

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

三、Vue入门安装

官网地址：https://cn.vuejs.org/

1、引入CDN

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



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

2、下载到本地并引入本地文件

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

<script src="vue.js"></script>

3、NPM安装

# 最新稳定版 $ npm install vue

四、体验vue.js的第一个程序

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>v-on</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="app">
        <h2>{{message}}</h2>
    </div>
    <script>

// 创建一个Vue的实例

// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数

// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者

    let vm = new Vue({
            el:'#app',

// 这里的 data 就是 MVVM中的 M，专门用来保存每个页面的数据的
            data:{// data 属性中，存放的是 el 中要用到的数据
                message:"Hello Vue!",// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
            }
        })
    </script>

</body>

</html>

1）构造器

// 建立Vue实例
var vm = new Vue({
// 选项
})

2）实例的属性和方法

每个Vue.js实例在被创建之前都要经过一系列的初始化过程，在初始化过程中加入一些data属性，即表示此实例的一些响应事件或数据属性等，如：

var data = { a:1 }
var vm = new Vue({
el: "#app",
data:{
message:"Hello Vue!",
}
})

vm.$data === data; // true

vm.$watch('a', function(newValue, oldValue){
// 这个回调将在 vm.a 改变后调用
})

yshir-phper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门（一）

一、Vue.js 是什么？Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DO
复制链接

扫一扫

专栏目录