Vue笔记(1)

学习内容

⊙什么是Vue

⊙Vue的安装

⊙Vue初体验

⊙ Vue中的MVVM

⊙ 基础语法

什么是vue

vue的安装

在构建大型项目时,推荐使用npm下载

现在我来演示一下官网下载:

首先进入官网,进入教程

下载好以后,放入文件夹

Vue初体验

虽然还不是很懂这个语法,但是后面会慢慢学习

打开网页:

而我们过去的编程范式是命令式编程

当我们在控制台输入app.message:

更改数据:

页面中的数据也会跟着修改:

(真的很神奇)

我们再来体验一下Vue的列表:

假如我们过去要展示一个列表,有多少条数据就要写多少条li,然后再根据索引依次取出列表里的值放到li里面,这样非常麻烦,而且有许多重复的工作

就类似于这样:

但是Vue可以使用v-for的指令帮我们遍历:

打开网页:

关于语法后面会学习,现在只是体验一下

计数器体验:

真的非常方便!

Vue中的MVVM

其中Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI组件，可以理解为html页面代码，ViewModel 是一个同步 View 和 Model 的对象。

关于代码中的参数:

语法

mustache

mustache([ məˈstɑːʃ ])语法

mustache就是我们之前用到的双大括号{{ }}

它的写法有很多种:

v-once指令

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

现在我们修改message,看看有什么区别:

会发现只有上面的那个h2的内容发生了变化

v-html

最后网页上显示的是不一样的结果:

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

在某些情况下,我们的浏览器可能会直接显示出未编译出来的mustache标签,也就是直接在浏览器中显示类似{{message}}的东西,这是因为还没有执行到vue解析mustache标签时就卡住了,比如说在异步的时候就很可能发生,所以我们要避免这种情况

下面来定时器模拟一下卡住的情况

这样会影响用户体验,所以要使用v-cloak,下面来解释一下它的原理:

动图体验一下:

因此用户就只会看到空白而不是{{message}}

但是除了内容需要动态绑定以外,有些属性也需要动态绑定,比如a元素的href属性,还有img的src属性,一个网站上的链接和图片一般不会写死,时常会更新,所以也需要动态变化,此时就需要我们的v-bind指令

只有标签的content部分可以用mustache语法,属性是不可以的,否则会失效

v-bind

语法糖: :

写法:

打开网页查看:

img的src属性就被更改了

动态绑定class的方法

主要有两种方式:对象语法和数组语法

对象语法

但是一般不会写成true或false,而是这样的形式:

写个变色的效果:

最后这一步取反实在是没想到的思路...

比如有些class是固定需要的,此时我们还可以直接定义一个class,这个class会与后面对象中的class合并,所以不用担心覆盖的问题

F12查看class的情况