VUE初识

最新推荐文章于 2024-05-28 10:06:30 发布

zebrar

最新推荐文章于 2024-05-28 10:06:30 发布

阅读量557

点赞数 18

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zebrar/article/details/135612303

版权

什么是VUE

构建用户界面的渐进式框架（采用可自底向上增量开发的设计），便于与第三方库和即有项目整合

VUE的核心理念

数据驱动视图，组件化开发

为什么学习流行框架

a. 轻量级框架：只关注视图层，是一个构建数据的视图集合
b. 简单易学：中文文档，易于理解
c. 视图、数据、结构分离：让数据的更改变的简单
d. 不需要逻辑代码的修改，只需要操作数据
e. 虚拟DOM：不再使用原生的dom操作节点

框架与库的区别

a. 框架：是一套完整的解决方案；对项目的入侵程度较大，如果需要更换框架，需要重新架构整个项目
b. 库：提供某一个小功能，对项目的入侵较小，如果某个库无法完成某个需求，可以很容易的切换到其他库实现需求

MVC和MVVM的区别

a. MVC是后端分层开发的概念，MVVM是前端视图层的概念。
b. MVC中，V是view视图层，用来展示数据和发送请求；C是controller调度层，用来接收数据和相应数据；M是model模型层，用来处理数据，与数据库交互。
c. MVVM中，V是view视图层，用来展示数据；VM是view-model视图模型层，用来连接视图模型层；M是model模型层，用来对数据进行逻辑处理。

vue的代码框架`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  // 1、引入vue.js
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  // 2、书写视图层
    <div class="hello">
        {{message}}
        hello world !
    </div>
</body>
<script>
          // 3、实例化vue（view-model连接视图层和模型层）
    let vm = new Vue({
          // 控制区域
        el:'.hello',
          // 存放数据
        data:{
            message:'hello world!'
        },
          // 存放方法（model对数据进行逻辑处理）
        methods:{
        }
    })
</script>
</html>

展示数据的方式

a. 差值表达式 {{}} 可以进行简单的运算
b. v-html和v-text的异同（vue的指令）
ⅰ. 相同点：都可以覆盖元素的原内容
ⅱ. 不同点：v-html可以解析富文本；v-text不能（富文本：是一个字符串，包括标签和属性）

<body>
    <div id="app">
        {{message}}
        <p>页面中进行简单计算：18+2= {{age+2}}</p>
        <div v-text = 'content'>被覆盖的文字</div>
        <div v-html = 'content'>被覆盖的文字</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '这是使用插值表达式所展示的内容',
            age: 18,
            content: '<button>按钮</button>'
        },
        methods: {}
    })
</script>