Vue 基础入门

最新推荐文章于 2023-05-13 21:52:33 发布

时小浅

最新推荐文章于 2023-05-13 21:52:33 发布

阅读量319

点赞数

分类专栏：重学前端文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_36194388/article/details/119235403

版权

重学前端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

Vue是什么

Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue只关注视图层。

Vue通过新的属性（自定义）和 {{ 表达式 }}扩展了 HTML。

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue学习起来非常简单。

<!doctype html>
<html>
  <head>
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
<div id="app">
      <p>{{ message }}</p>
  	  <input v-model=’message’/>
</div>  

<script type='text/javascript'>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
  </body>
</html>

Vue特性

轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

安装

Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中

CDN安装

CDN:全称是Content Delivery Network，即内容分发网络。CDN的通俗理解就是网站加速，可以让客户端以最快的速度访问资源。

本地安装

1.也可以下载Vue文件到本地：http://vuejs.org/v2/guide/installation.html 
Development Version : 原版
Production Version  : 未压缩版   
2.加入Vue库
1、拷贝vue.min.js到项目libs目录（如果没有请新建）中；

3.通过 script 标签添加到网页中，就可以使用Vue：
<script src="libs/vue.min.js"></script>

4.检查Vue是否可以用

npm

1.安装
$ npm install vue
2.本地引入
<script type="text/javascript" src="./node_modules/.2.5.3@vue/dist/vue.js"></script>

Vue入门

Hello应用体验

<div id="app">
     <h1>{{message}}</h1>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message : "Hello Vue2"
        }
    });
</script>

数据双向绑定体验

<div id="app">
    <!--监听input中值的改变同步到data中的message上-->
    请输入: <input type="text" v-model="message">
    <!--监听数据的变化及时显示应用中的数据-->
    <h1>{{message}}</h1>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        //>>1. 挂着到页面上
        el: "#app",
        //>>2. 准备页面上需要的数据
        data: {
            message:""
        }
    });
</script>

Vue实例挂载的标签

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

<div id="app">
     <h1>{{message}}</h1>
</div>

<section class="s">
    <h1>{{message}}</h1>
</section>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //>>1. 挂载到id=app上
    var app1 = new Vue({
        el: "#app",
        data: {
            message : "Hello Vue2"
        }
    });
    //>2. 挂载到class="s"上
    var app2 = new Vue({
        el: ".s",
        data: {
            message : "Hello Vue222222222"
        }
    });
</script>

Vue中的数据详解

1 . Vue实例的数据保存在配置属性data中, data自身也是一个对象.

2. 通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

<div id="app">
    <h1>{{message}}</h1>
    <h2>姓名:{{user.name}} 年龄:{{user.age}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">

    //>>1. 创建包含数据的Vue实例
   var app = new Vue({
        //挂着到页面上
        el: "#app",
        //准备页面上需要的数据
        data: {
            message: "努力到无能为力，拼搏到感动自己!",
            user: {
                name: "小花花",
                age: 29
            }
        }
    });
  //>>2. 访问和修改Vue实例中的数据,修改数据后及时同步页面上
     console.log(app.message);
     app.user.name = "小黄黄!";
</script>

Vue中的方法详解

1.Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
2.方法都是被Vue对象调用,所以方法中的this代表Vue对象

3. 使用方式
    3.1  直接在html模板标签中调用
       {{方法名字()}}

    3.2  通过Vue对象实例调用方法
      vue对象.方法名字();

<div id="app">
   <h1>{{message}}</h1>
    <h2>姓名:{{user.name}} 年龄:{{user.age}}</h2>
    <!--Vue实例直接调用方法-->
    <h2>{{hello()}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //>>1. 创建包含数据的Vue实例
    var app = new Vue({
        //挂着到页面上
        el: "#app",
        //准备页面上需要的数据
        data: {
            message: "努力到无能为力，拼搏到感动自己!",
            user: {
                name: "小花花",
                age: 29
            }
        },
        methods :{
            hello : function(){
                return "hello "+ this.user.name + "!";
            },
            hi : function () {
                alert(this.message);
            }
        }
   });
    //>>2. 通过Vue实例调用方法
        app.hi();
</script>

架构认识

Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。

Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.

MVC模式：

Model：数据模型，一些JavaScript 对象，比如 {name : "小小强",age : 16};

View: 视图，网页中的内容，一般由HTML模板生成。

Controller : 控制器（路由），视图和模型之间的胶水。

MV VM模式：

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板

ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；

对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。

时小浅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 基础入门

Vue是什么Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue只关注视图层。Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue学习起来非常简单。<!doctype html><html> &l...
复制链接

扫一扫