Vue的学习

目录

Vue简介

el挂载点

data数据对象

Vue指令

内容绑定、事件绑定

v-text ：设置标签文本值，默认替换全部内容，使用差值表达式{{}} 可以替换指定内容

v-html:设置html会将结构解析为标签，而text指令无论内容是什么，只会解析为文本

 v-on:为元素绑定事件，指令可简写为@，方法写在methods中

v-on补充：传递自定义参数，事件修饰符

 显示切换，属性绑定

v-show：根据表达式的真假，切换元素的显示和隐藏 如：广告、遮罩层

v-if：根据表达式的真假，切换元素的显示和隐藏（直接操纵dom元素）

 v-bind：为元素绑定属性

列表循环，表单元素绑定

v-for：根据数据生成列表结构，一般结合数组使用，且数组长度的更新会同步到页面上是响应式的

 v-model：获取和设置表单元素的值（双向数据绑定）

vue网络应用

axios的应用

---

Vue简介

介绍 — Vue.js

第一个vue程序：

1、导入开发版本的Vue.js

2、创建Vue实例对象，设置el属性和data属性

3、使用简洁的模板语法把数据渲染到页面

el挂载点

        作用范围：Vue会管理el选项命中的元素以及内部的后代元素

                div这种  或者id 用#名字  或者class 用.名字

data数据对象

Vue指令

内容绑定、事件绑定

v-text ：设置标签文本值，默认替换全部内容，使用差值表达式{{}} 可以替换指定内容

v-html:设置html会将结构解析为标签，而text指令无论内容是什么，只会解析为文本

 v-on:为元素绑定事件，指令可简写为@，方法写在methods中

 

 

v-on补充：传递自定义参数，事件修饰符

 

 

 显示切换，属性绑定

v-show：根据表达式的真假，切换元素的显示和隐藏 如：广告、遮罩层

                原理：修改元素的display实现显示和隐藏，指令后面的内容都会解析为布尔值

v-if：根据表达式的真假，切换元素的显示和隐藏（直接操纵dom元素）

 v-bind：为元素绑定属性

列表循环，表单元素绑定

v-for：根据数据生成列表结构，一般结合数组使用，且数组长度的更新会同步到页面上是响应式的

基础语法：（item,index）in 数据也就是数组名

 

 v-model：获取和设置表单元素的值（双向数据绑定）

便捷的设置和获取表单元素的值，绑定的数据会和表单数据相关联（双向绑定的）

vue网络应用

axios的应用

导包