本文是Vue初学者的学习笔记，涵盖了Vue的基本概念、优点、流行原因及MVVM思想。深入讲解了Vue的模板语法如v-show、v-on、v-for等指令，以及虚拟DOM和Diff算法。此外，还介绍了数据交互、axios的使用以及Vue的生命周期和过滤器应用。
了解vue的基本概念
官网： https://cn.vuejs.org/v2/guide/syntax.html
vue是目前前端开发中最流行的MVVM框架
vue是一套用于构建用户界面的渐进式的自底层向上增量开发的MVVM框架
渐进式：就是在原有项目上一两个功能使用vue,或者整个项目全部使用vue，vue也不会做职责之外的事
自底层向上增量开发：（先把基础的页面写好，然后在一一添加各个功能，从简单到复杂的一个过程）有点像二阶段学习的渐进增强
vue优点
1.轻量级
2.高效率
3.上手快
4.文档全面
为什么vue这么火
1.vue给我们前段开发者带来了非常非常便利的数据绑定问题
2.vue可以让我们来开发大型单页面应用
3.组件化 （就是把页面拆分成很多个小模块 在使用的时候把这些小模块进行拼装）
形成一个大的页面（提高了复用性）
理解MVC MVVM MVP等思想
框架：就是封装了很多于业务无关的重复代码
框架的优势：使用框架可以大大的提升我们的开发效率
MVC思想----》MVC框架
M:模型（Model）就是数据
V:视图（View）前端展示（用户可以看到的界面）
C:控制器(Controller) 就是负责触发和接受数据的传递
为什么我们要学习mvc
mvc是一个比较主流的设计思想 ， mvc的思想下 没有DOM操作 把数据独立出来，方便管理
我们也把业务逻辑，数据，界面展示独立出来了方便我们后续开发于测试
vue的数据插入扩展知识点
在vue中核心就是可以让我们使用简单的模版语法 声明式的对数据进行渲染
vue是声明式渲染------》我们只需要告诉程序我们想要什么效果 至于数据的插入全部交给程序来解决
命令式渲染----》命令我们的程序如何一步一步的执行
数据驱动-----》就是通过vm层 来控制数据的变化 让数据随着内容的改变而改变
vue的起步
下载包
npm下载：npm install --save vue
CDN的方式
能够使用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>
> <script src="node_modules/vue/dist/vue.min.js"></script>
> </head>
> <body>
> <!-- 1.下载包 -->
> <!-- 2.引用 -->
> <!--
> vue是一个mvvm的框架
> M：model
> V：view
> VM：ViewModel 视图和模型之前的关联 之前的桥梁
> -->
> <!-- 3创建视图 view-->
> <!-- 在vue中视图也可以叫做视图容器 其实就是一个DOM元素 -->
> <div id="demoDiv">
> <!-- vue管理的数据都要写在这个dom容器里面 -->
>
> <!--5. 模版语法 {
{}}---》插数据的时候使用 -->
> {
{msg}}
> </div>
>
> <script>
> // 4.创建VM----》vue实例
> new Vue({//单词大小写需要注意
> el:"#demoDiv",//视图
> data:{//M层 模型-----》数据
> msg:"千锋教育"
> }
> })
vue 模板： { {}}
v-show
作用：控制一个元素的显示和隐藏（元素被动态设置了display：none）
语法：v-show=“bool” true就是显示 false就是隐藏（默认）
v-on
作用:就是给vue绑定事件
语法：v-on：事件名=“函数()” 或者 @事件名=“函数()”
注意：vue中函数写在实例中 methods配置项中
v-for
作用：遍历data中的数据
语法：v-for=“(item,index)in 你要遍历的数据”
item：你每次遍历出来是侯得到的数据
index：每次遍历数据的时候得到的下标
v-bind
作用:给网页中的html元素绑定属性
语法：1.v-bind:属性名=“值” 2. :属性名=“值”
v-if
作用:判断是否加载页面元素
语法：v-if=”表达式” true 加载元素 false 不加载元素
对元素进行显示和隐藏的时候其实是对当前这个dom元素进行新增和删除操作
<div id="demoDiv">
<!-- 作用:判断是否加载页面元素
语法：v-if=”表达式” true 加载元素 false 不加载元素 -->
<input type="checkbox" v-model="bool"/>
<h1 v-if="bool">我是v-if完成的</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
bool:false
}
})
</script>
v-if和v-show区别
v-show和v-if：
**v-if:**在切换的时候对于计算机的资源消耗比较好（安全性高）
**v-show：**在页面初始化的时候对计算机的资源消耗比较高（对需要频繁显示和隐藏的元素并且对安全性要求不高的内容来进行使用）
当 v-if 与 v-for 一起使用时谁的优先级更高
v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中
所以，不推荐v-if和v-for同时使用
v-text
<!-- 1.使用v-text替换{
{}} -->
<!-- 2.v-cloak指令 建议大家加在el挂在的元素上 -->
<div id=
最低0.47元/天 解锁文章
扫一扫
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
