Vue.js学习笔记一

最新推荐文章于 2023-12-26 20:00:20 发布

A cold winter

最新推荐文章于 2023-12-26 20:00:20 发布

阅读量139

点赞数

分类专栏： Vue.js基础文章标签：基础菜鸡的自学之路

本文链接：https://blog.csdn.net/qq_41611820/article/details/82391216

版权

20 篇文章 1 订阅

订阅专栏

Vue.js是主要由尤雨溪开发的是一套用于构建用户界面的渐进式框架
官方中文文档地址：https://cn.vuejs.org/v2/guide/
Vue.js是javascript的一个MVVM库，它是以数据驱动和组件化的思想构建的。
在学习之前，需要简单了解一下什么是MVVM模式

这里写图片描述

ViewModel: 相比较于MVC新引入的视图模型。是视图显示逻辑、验证逻辑、网络请求等代码存放的地方。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

不基于vue－cli脚手架工具的vue.js基础语法：
在script中引入：

<script><src=./js/vuejs></script>

构建一个Vue实例，第一个Hollo World实例

<body>
<div id="root">{{msg}}</div>
</body>
<script>
new Vue({
        el:"root",
        data{
        msg:"Hollo World"
        }
})
</script>

挂载点：el（element）属性的值为挂载点元素的id值，在这里可以说id为root的div标签为Vue实例的挂载点,表示当前Vue实例只会处理id为root的div里面的数据，对其它Dom元素没有作用。
模版：(template):模版表示挂载点里的内容
可以在实例中使用模版：

new Vue({
        el:"root",
        template:'{{msg}}',
        data{
        msg:"Hollo World"
        }
})

显示结果是一样的

实例：当你在Vue实例中写好代码后Vue会自动解析其中的代码将其显示在挂载点上（有时间一定要看一下源码的实现原理）
{{ }}:双大括号：插值表达式:用于在模版中使用data里面的数据

关注

专栏目录