Vue起步

渡边彻彻泽一

已于 2023-07-18 00:20:24 修改

阅读量158

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-07-17 19:57:38 首次发布

本文链接：https://blog.csdn.net/qq_52642109/article/details/131773700

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Vue起步

1.Vue.js是什么

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2.库和框架的区别

2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

代表：jQuery

jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

代表：Vue

3.MVVM

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

M:模型(json格式数据)

V:视图（jsp,html）

VM: 视图模型ViewModel

在这里插入图片描述

4.起步

通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

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

<!-- 生产环境版本，优化了尺寸和速度 -->

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

或者你可以直接下载vue.js文件来进行引入

下载地址

开发版本

5.上手

当我们完成vue的引入之后，继续，新建一个html文件，在body标签中添加如下代码示例

    <div id="app">
        {{ msg }}
    </div>
<script>
    const app = new  Vue({
            el:'#app',//挂载
            data:{
                msg: 'hello Vue.js',               
            }
        })
</script>

在这里插入图片描述

这样我们就完成了vue的起步

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

我们可以试试数据是如何双向绑定

新建一个html文件，再进行一遍上述的操作，在div盒子中新增下面的代码

<div id="app">
    <p>
        {{ msg }}
    </p>
	<input type="text" v-model="msg"  @keyup="change()">
    <button  @click="fn">按钮</button>
 </div>
<script>
	const vm = new Vue({
            el:'#app',
            data:{
                msg:'hello Vue'
            },
            methods:{
                change(){
                    this.msg = msg
                },
                fn(){
                   this.msg = '我被改变啦'
                } 
            }
        })
</script>