vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

承諾太轻

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量49

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67901663/article/details/130514254

版权

什么是vue

vue是一套构建用户界面的渐进式框架，采用自低向上增量开发的设计

什么是vue的核心理念

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

为什么要用vue

1、提高开发的效率；
2、减少不必要的DOM操作；
3、让程序员有更多的时间关注业务逻辑。

框架和库的区别

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

MVC 和 MVVM的区别

MVC(model,view,controller)是后端的分层开发概念。
MVVM（model,view,view model）是前端视图层的概念。
MVC：M（model模型层）与数据库打交道
V（view视图层）用来展示和发送请求
C（controller调度层）接受数据，处理数据和响应。
MVVM：M(model模型层）业务逻辑和数据处理
V（view视图层）界面展示
VM（view model）连接view和model层起承上启下的作用。

vue代价结构

1、引入vue.js
2、书写视图层
3、实例化vue

<body>
    <!-- 书写视图层 -->
    <div id="app">
        <!-- 差值表达式{{}} 可以做一些简单的运算 -->
        {{msg}}
        {{num}}
        <!-- v-text、v-html 相当于innerText和innerHTML-->
        <!-- v-text和v-html的异同：
            相同点：都会覆盖掉原来的元素
            不同点：v-text不会解析富文本
                   v-html会解析富文本
        -->
        <div v-text="html">123</div>
        <div v-html="html">456</div>

        <div v-text="text">123</div>
        <div v-html="text">456</div>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue-2.4.0.js"></script>
<!-- 实例化vue -->
<script>
    let vm = new Vue({
        // el:控制区域
        el: '#app',
        // data:存放数据
        data: {
            msg: 'hello Vue',
            num: 100,
            html: '我是html',
            text: '<h1>我是h1标签</h1>'
        },
        // methods:存放方法
        methods: {

        }
    })
</script>