Vue

这就是渐进式的含义:用什么学什么

如果我们只需要在前端项目中使用一部分的vue,那么就使用核心包就行.如果想要整体使用vue,那么就用工程化的.

快速入门

mount:表示接管的实例是什么.如这里表示接管app createapp传入的是一个对象

data这个方法的返回值就是我们需要的数据.返回的是一个对象,对象里有我们需要的属性. 渲染:通过一个表达式来渲染(就叫插值表达式) message不是固定的名字,别的也可以:

注意,我们mount的时候指定的区域就是vue接管的区域.在app区域之外,是无法使用{{message}}的.

指令

指令: v-for 这个for和for循环的for很类似 v-show是控制展示还是不展示,v-if是渲染还不渲染

v-for

注意,[]就是js中的数组

我们现在要把数组中的元素渲染到页面中 key:为元素添加唯一标识的.实际上,这个只能用来提升渲染性能 需要让哪个元素展示多次,那么就在哪个元素的标签上添加这个指令. vscode中,只需要敲vfor,然后按tab,就会自动生成: 注意,这上面要修改的:我们定义的数组名字是什么,那么我们就把items修改成什么.另外,需要修改一下key

示例:在前面的表格基础上: 插值表达式是可以写三元运算符的.插值表达式实际上就是正常的"表达式" 注意,插值表达式是不能写在标签内部的: 像这样,图片就不能正确加载出来.

v-bind

修改标签的属性:就使用v-bind 注意,绑定的数据,必须在data中定义. 注意,e.name不需要使用插值表达式的形式,只需要使用双引号.

v-show&v-if

v-show一定渲染. 因此,v-if用在要么显示要么不显示,这种不频繁切换的场景. v-show用在频繁切换的场景. 另外,v-if还有:

示例: 这样,我们在控制台可以看到: 只会渲染一个. v-show: 控制台:

v-model

如:用来绑定表单项. 什么叫做绑定?像上面这样绑定之后,如果数据变化了,那么页面上显示的就会变化;如果页面上的内容变化了,那么数据也会变化. 否则,报错.

示例: 只需在data里再平级的创建一个对象. 然后:

这样,只要用户修改了表单项的内容,那么就会同步到数据当中. (我们可以下载拓展vue-devtools,然后在拓展里设置允许访问文件网址) 然后我们可以试图修改,就能看到数据改变-视图改变.

v-on

示例: this:表示当前vue应用的实例.methods如果想要访问data中的数据必须要加.然后就能访问searchForm了. 注意,methods是和data()平级的.