vue基础(el挂载、data数据绑定、v-text、v-html、v-on、v-show、v-if、v-bind、v-for、v-model)
Vue文档传送门:https://cn.vuejs.org/
Vue是javaScript框架,简化了dom的操作并以响应式数据驱动
Vue:一款渐进式javaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。
其特点是综合了Angular(模块化MVVM)和React(虚拟DOM)的优点 。
第一个vue程序:
- 导入开发版本的vue.js
- 创建vue实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
运行结果:
el:挂载点
- vue实例的作用范围:Vue会管理el选项命中的元素及其内部的子孙元素
- 使用的选择器:跟js获取dom元素一样,可以选用id、class、元素(eg:div)、name等
- 设置的dom元素:可以使用除HTML和BODY外的其他的双标签
data:数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法(下图分别是字符串、数组、字典)
v-text指令
- 作用:设置 标签的内容(textContent)
- v-text默认写法会替换全部内容,而使用差值表达式{{}}可以替换指定内容
- 内部支持写表达式
v-html指令
- 作用:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令:无论内容是什么只会解析成文本
v-on指令
- 作用:为元素绑定事件
- 事件名不需要on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- @keyup.enter="方法名"回车后,调用方法
v-show指令
- 作用:根据真假切换元素的显示状态
- 原理:修改元素的display,显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
点击后:
v-if指令
- 作用:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
v-bind指令
- 作用:为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind,只保留:属性名
v-for指令
- 作用:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法:(item,index)in 数据
- item 和 index 可以结合其他指令一起使用
- 数据长度的更新会同步到页面上,是响应式的
v-model指令
- 作用:便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据<-->表单元素的值
点击按钮后