![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
前端 Vue 框架学习
Sean_me
这个作者很懒,什么都没留下…
展开
-
二、本地应用——Vue指令(3)
3、列表循环,表单元素绑定 1. v-for的作用是根据数据生成列表的结构,经常结合数组使用,语法是(item, index) in 数据,item和index可以结合其他指令一起使用,数组长度的更新会同步到页面上,是响应式的。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <...原创 2021-07-19 18:15:43 · 79 阅读 · 0 评论 -
二、本地应用——Vue指令(2)
2、显示切换,属性绑定v-show指令的作用是根据真假切换元素的显示状态,原理是修改元素的display,实现显示隐藏,指令后的内容都会被解析为bool值,值为true元素显示,反之隐藏。 案例:通过按钮绑定事件,改变图片的显示状态 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <b..原创 2021-07-19 11:45:42 · 71 阅读 · 0 评论 -
二、本地应用——利用事件绑定的计数器案例
源码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div> <button @click="sub()"> - </button> <span原创 2021-07-18 22:27:24 · 62 阅读 · 0 评论 -
二、本地应用——Vue指令(1)
1、内容绑定、事件绑定v-text的作用是设置标签的内容(textContent),使用插值表达式——{{}}可替换指定的内容,内部支持写表达式。案例1:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> ...原创 2021-07-18 21:56:34 · 96 阅读 · 0 评论 -
一、Vue基础——data数据对象(3)
1、Vue中的数据定义在data中,data中可以写复杂类型的数据,渲染复杂类型的数据时,遵循js 语法即可,比如对象通过 “.” 引出,数组通过索引号。示例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{ me.原创 2021-07-18 19:13:51 · 1720 阅读 · 0 评论 -
一、Vue基础——el挂载点(2)
1、Vue实例的作用范围1)、Vue会管理el选项命中的元素:2)、el选项命中内部的后代元素:2、el除了id选择器还可以使用其他选择器建议使用id选择器1)、class选择器:2)、div选择器:3、是否可以设置其他的dom元素——可以使用其他双标签,但body和html除外...原创 2021-07-18 18:44:20 · 149 阅读 · 0 评论 -
一、Vue基础(1)
1、Vue的三个特点:JavaScript框架 简化Dom操作 响应式数据驱动2、第一个Vue程序Vue官方文档1、导包可以先创建一个 .html文件,然后通过如下方式引入 Vue:<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>或者:<!-- 生产环境版本,优...原创 2021-07-15 21:50:57 · 160 阅读 · 0 评论