Vue-day01

Vue是什么

vue是一个渐进式JavaScript 框架 用来构建用户界面

两个重要特点

1.数Vue据驱动

2.组件化开发

vue挂载点el介绍

告诉vue实例 你要讲data中的数据渲染到哪里

注意:挂载点可以使用 id选择器 类选择器 标签选择器

如果你选择了多个元素 则只会选择第一个元素

挂载点不能设置body和html标签(报错)

vue插值表达式

1.语法:{{}}

2.作用:将数据渲染到页面

3.支持二元运算和三元运算

4.支持对象与数组取值语法

5.不支持分支语法和循环语法

vue指令

1.v-text   设置元素的innerTxet

2.v-html   设置元素的innerHTML

3.v-on   给元素绑定事件

4.v-bind   设置元素的原生属性 使其可以使用vue的数据

5.v-for   列表渲染

指令的本质是自定义属性

拓展 : @keyup.enter(绑定enter事件) @click.stop(阻止事件冒泡) @click.prevent(阻止默认行为)

vue中的this指向

this指向vue实例对象

访问data成员 this.属性名 因为vue回平铺data与methods成员到vue实例中

v-bind

v-bind可以简写成 :

如果属性有 -  则需要用引号包裹起来

v-for

遍历数组语法 : v-for="(item,index) in 数组名"

v-model

v-model只能用于表单!!!

双向数组绑定 :

表单元素的值进行了修改 这个变量的值也会跟着修改

这个变量的值进行了修改 表单元素的值也会跟着修改

双向绑定的底层原理是 : js属性拦截

详细可前往大佬页面查看https://blog.csdn.net/u013263917/article/details/102969209