【vue入门】深度研究

最新推荐文章于 2020-10-28 11:13:55 发布

筱语

最新推荐文章于 2020-10-28 11:13:55 发布

阅读量152

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_43287478/article/details/104545132

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue介绍

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完全能够为复杂的单页应用提供驱动。
渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发。

如何使用

1.在html页面使用script引入vue.js的库即可使用。
2.使用Npm管理依赖(类似于maven)，使用webpack打包工具对vue.js应用打包。

vue的功能

1）声明式渲染
2）条件与循环
3）双向数据绑定（v-model指令）
4）处理用户输入
5）组件化应用构建

MVVM模式

vue是一个mvvm模式，即model + view + viewModel
Model: 负责数据存储
View: 负责页面展示
View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示。

常用指令研究

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <input type="text" v-model="num2"> +
    <input type="text" v-model="num1"> =          <!--v-model双向绑定-->
    <span v-text="Number.parseInt(num1) + Number.parseInt(num2)"></span>
    <!--v-test解决插值表达式闪烁问题-->
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '传智播客',
            num1: 1,
            num2: 1
        }
    })
</script>
</html>

筱语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue入门】深度研究

vue介绍Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完全能够为复杂的单页应用提供驱动。渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一...
复制链接

扫一扫

专栏目录