Vue
YonChao
尽道此山秋不入,无霜林叶为谁红
展开
-
Vue 计算属性
Vue计算属性需求:两个文本框,一个是姓,一个是名。在下面将这两个文本框输入的内容组合了之后输出。解决方案:直接拼接字符串。写个方法去调用从而实现。使用计算属性。<body><!-- 准备好一个容器 --><div id="root"> <!-- 这里要用双向绑定 --> 姓:<input type="text" v-model:value="firstName"/><br><br> 名原创 2021-11-17 11:07:09 · 668 阅读 · 0 评论 -
2021-11-16 Vue 键盘事件
Vue 键盘事件知识点:按键别名: 回车=>enter 删除=>delete 退出=>esc 空格=>space 换行=>tab 上=>up 下=>down 左=>left 右=>right需求:在一个输入框中,当按下回车键时,弹窗并显示已经输入的字符串。<body> <!-- 按键别名: 回车=原创 2021-11-16 15:56:46 · 425 阅读 · 0 评论 -
Vue 的事件修饰符
Vue 时间修饰符知识点:事件修饰符 @click.prevent=“showInfo” 可以阻止默认事件。 .stop 阻止事件冒泡。 .once 事件只触发一次。 .capture 使用事件的捕获模式。 .self 只有event.target是当前操作的元素时才触发事件。 .passive 事件的默认行为立即执行,无需等待时间回调执行完毕。需求:一个超链接包裹了一个监听事件,点击之后,阻止原来超链接跳转。原创 2021-11-16 15:24:04 · 607 阅读 · 0 评论 -
Vue中的事件处理
Vue中的事件处理知识点:使用v-on:xxx或者@xxx绑定事件,其中xxx是事件名;事件的回调需要配置在methods对象中,最终会在vm上;methods中配置的函数,不要用箭头函数!否则this就不是vue实例了;methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或者是组件实例对象;@click='demo'和 @click='demo($event)' 效果一致,但是后者可以传递参数,还可以通过event(点击或者别的什么事件)去拿到按钮或者别的元素的属性;原创 2021-11-16 14:10:45 · 455 阅读 · 0 评论 -
Vue中的数据代理
需求:现在有一个person对象,有name和sex两种属性,添加一个age属性,并且使这个age属性与一个number的变量去关联。这时候就使用Object的defineproperty方法<body> <!-- 容器 --> <div id="root"> </div> <script type="text/javascript"> let number = 19 let原创 2021-11-16 11:16:55 · 298 阅读 · 0 评论 -
Vue中的MVVM模型
M:Model模型,对应data中的数据。V:View模板,即对应的页面,页面级结构。VM:视图模型,Vue实例对象。eg:<body> <!-- 视图层即View层 --> <div id="root"> <h1>学校名称:{{name}}</h1> <h1>学校地址:{{address}}</h1> </div> <script原创 2021-11-15 17:49:59 · 247 阅读 · 0 评论 -
Vue 中el和data的两种写法
Vue实例中el绑定的两种写法:直接使用el标签去指定容器的id<body> <!-- 准备好一个容器 --> <div id="root"> </div> <script type="text/javascript"> /* 开发环境提示关闭 */ Vue.config.productionTip = false /* new一个Vue */原创 2021-11-15 17:37:47 · 474 阅读 · 0 评论 -
Vue 的数据绑定
03 数据绑定1.单向的数据绑定使用v-bind:data中的数据改变了,能够影响容器的值但是容器中输入框的值并不能反过来去影响data中的数据的值2. 双向的数据绑定使用v-model:data中的数据改变了,能够影响容器的值但是容器中输入框的值也能反过来去影响data中的数据的值局限:v-model:只能用在表单类元素(输入类元素)中,因为只有能捕获用户输入的元素才能去改变data中的数据值。简写:双向数据绑定:<input type="text" v-model:value原创 2021-11-15 17:36:13 · 386 阅读 · 0 评论 -
Vue的模板语法
02 模板语法之指令语法 v-bind已经学过的:插值语法,即{{xxx}}将相应的数据插入容器。插值语法一般用于标签体中要学的:指令语法。v-bind:指令的使用 可以简写为:指令语法一般是用于标签属性中使用了v-bind:后会将引号里的url当做js表达式执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X原创 2021-11-15 17:31:34 · 49 阅读 · 0 评论 -
初识Vue,Hello Vue
初识Vue实现:Hello,{{name}}age:{{age}}的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in原创 2021-11-15 17:30:21 · 72 阅读 · 0 评论