十大室内设计公司,郑州seo技术服务,wordpress 购物分享,商标注册网上缴费#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;Vue ⛺️稳重求进#xff0c;晒太阳 Vue概念
是一个用于构建用户界面的渐进式框架优点#xff1a;大大提高开发效率缺点#xff1a;需要理解记忆规则
创建Vue实例
步骤#xff1a; … 个人主页五敷有你 系列专栏Vue ⛺️稳重求进晒太阳 Vue概念
是一个用于构建用户界面的渐进式框架优点大大提高开发效率缺点需要理解记忆规则
创建Vue实例
步骤
准备容器引包创建Vue实例new Vue()指定配置项el data渲染数据
el指定挂载点选择器指定控制的是哪个盒子data提供数据 插值表达式
插值表达式是一种Vue的模板语法
作用利用表达式进行插值渲染到页面 表达式可以被求值的代码js会算出一个结果语法{{表达式}}注意点 使用的数据必须存在支持的式表达式而非语法不能在标签属性中使用{{}}插值
Vue的核心特征响应式
数据改变视图自动更新 访问数据实例.属性名
修改数据实例.属性名“值”
开发者工具
在拓展中搜索VueDevtools下载安装
给他权限
OK Vue指令
Vue会根据不同的指令针对标签实现不同的功能
指令带有v-前缀的特殊标签属性
v-html
v-html表达式 -动态设置元素innerHTML
v-if(条件渲染)
作用控制元素显示隐藏条件渲染
语法v-if表达式 表达式值true 显示flase 隐藏
原理根据条件判断是否创建或移除元素节点
场景不频繁切换的场景
v-show显示隐藏
作用控制元素显示隐藏
语法v-show表达式
原理切换display:none
场景频繁切换显示隐藏场景
v-if v-else v-else-if
作用复制v-if进行判断渲染
语法v-else v-else-if表达式
注意需要紧挨着v-if一起使用
v-on
作用注册事件添加监听提供处理逻辑语法
v-on:事件名内联语句 button v-on:clickcount/button//简写button clickcount/button
v-on:事件名methods中的函数名
注意
内联语句可以直接拿data中的数据method中是不能直接访问到data中的数据的需要的是app.属性在methods中的函数this都是指向当前实例
调用传参 可以额外传参 button clickfunc(10)10/button /.../methods:{func(num){app.countapp.countnum;}}
v-bind
作用动态的设置html的标签属性 -src url title
语法v-bind:属性名表达式 简写:属性名表达式
div v-else img v-bind:srcimageUrl[page] / /div
v-for
作用基于数据循环多次渲染整个元素 →数组、对象、数字
语法v-for(item,index) in 数组 (item每一项index下标)
li v-for(item,index) in list {{item}} /li
v-for中的key
ul li v-for(item,index) in book :keyitem.id span{{item.id}}/spanspan{{item.name}}/spanspan{{item.author}}/spanbutton clickfun1(index)删除/button /li /ul
加key相当于每一列加了名字
不加v-for的默认行为会尝试原地修改元素就地复用
v-model
作用给表单元素使用双向数据绑定---可以快速获取或设置表单元素内容
语法v-model变量 input typetext name idusernamev-modelusernamebrinput typepassword idpassword v-modelpasswordbr
