Vue基础01

來自猩猩的你

已于 2022-05-08 10:55:09 修改

阅读量348

点赞数

文章标签： vue.js javascript 前端

于 2022-05-08 10:38:01 首次发布

本文链接：https://blog.csdn.net/weixin_48901051/article/details/124643348

版权

本文详细介绍了Vue.js的基础概念和使用方法，包括数据绑定、MVVM模式、渐进式应用特性以及如何创建Vue实例并渲染数据到页面。通过示例代码展示了如何导入Vue.js文件、初始化Vue实例以及将数据渲染到DOM。学习Vue.js需要不断实践，以巩固和提升技能。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

VUE基础01

前言

Vue作为前端最流行的框架之一我们该怎么么样学好它呢

基础知识与好的方法（所谓的项目经验）

`提示：温故而知新可以为师已

一、基础概念

Vue:一套用于构建用户界面的前端框架
Vue框架的特性：
1 单项数据绑定（数据驱动视图）;
Vue会监听数据的变化，从而自动重新渲染页面结构，数据变化会驱动视图自动更新

2 双向数据绑定
如：
单项：form表单用于采集数据 ajax提交数据
双向：Vue双项绑定=>js数据变化会自动渲染到页面上;页面上表单,dom元素等的数据发生变化时会被Vue自动获取并更新到Vue数据源中

3 MVVM编程思想
MVVM:指的是Model(M)模型/数据源、View(V)视图/所渲染的DOM结构、ViewModel(VM)Vue的实例，ViewModel是MVVM的核心
如图：在这里插入图片描述

4 渐进式：渐进，可以理解为一步一步的，在使用Vue的时候，我们不用把整个Vue框架的东西全部导入，可以一步一步的根据需要替换之前的代码

5 自底向上逐层应用：由底层开始，把基础的东西先写好，逐层网上增加新的或者复杂的功能

6声明式渲染：Vue允许我们用简洁的语法将数据和DOM标签绑定在一起

二、基本使用

1.导入Vue.js文件

代码如下（示例）：

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

2.初始化Vue实例

代码如下（示例）：

  const vm = new Vue({
        el: '#app', //el:指定数据要渲染的区域
        data: { //data：数据源 data内添加的属性都会添加到vm实例对象里
            msg: 'Hello Vue.js'
        }
    })

3.将data数据源数据渲染到页面

代码如下（示例）：

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

4.整体代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    const vm = new Vue({
        el: '#app', //el:指定数据要渲染的区域
        data: { //data：数据源 data内添加的属性都会添加到vm实例对象里
            msg: 'Hello Vue.js'
        }
    })
</script>

总结

学习就像是逆水行舟，不进则退

來自猩猩的你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础01

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档VUE基础01前言Vue作为前端最流行的框架之一我们该怎么么样学好它呢基础知识与好的方法（所谓的项目经验）`提示：温故而知新可以为师已一、基础概念Vue:一套用于构建用户界面的前端框架Vue框架的特性：1 单项数据绑定（数据驱动视图）;Vue会监听数据的变化，从而自动重新渲染页面结构，数据变化会驱动视图自动更新2 双向数据绑定如：单项：form表单用于采集数据 ajax提交数据双向：Vue双项绑定=&gt.
复制链接

扫一扫