08 2020 档案

11.内置指令与自定义指令
摘要：常用内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-if : 如果为 true, 当前标签才会输出到页面 v-else: 如果为 false, 当前标签才会输出到页面 v-show : 通过控制 display 样式来控制显示/隐 阅读全文
posted @ 2020-08-16 17:31 zhangchao_hz 阅读(175) 评论(0) 推荐(0)
10.过滤器
摘要：理解过滤器 功能: 对要显示的数据进行特定格式化后再显示 注意: 并没有改变原本的数据, 可是产生新的对应的数据 定义和使用过滤器 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return ne 阅读全文
posted @ 2020-08-16 17:28 zhangchao_hz 阅读(124) 评论(0) 推荐(0)
9. 表单输入绑定
摘要：使用 v-model 对表单数据自动收集 text/textarea checkbox radio select 编码 <div id="demo"> <form @submit.prevent="handleSubmit"> <span>用户名: </span> <input type="text 阅读全文
posted @ 2020-08-16 17:16 zhangchao_hz 阅读(142) 评论(0) 推荐(0)
8. 事件处理
摘要：绑定监听 v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参: event 隐含属性对象: $event 事件修饰符 .prevent : 阻止事件的默认行为 event.preventDefault() .stop : 停止事件冒泡 event.stop 阅读全文
posted @ 2020-08-16 17:13 zhangchao_hz 阅读(98) 评论(0) 推荐(0)
7. 列表渲染
摘要：列表 列表显示指令 - 数组: v-for / index - 对象: v-for / key 列表的更新显示 - 删除 item - 替换 item 列表的高级处理 - 列表过滤 - 列表排序 编码 <div id="demo"> <h2>测试: v-for 遍历数组</h2> <ul> <li 阅读全文
posted @ 2020-08-16 16:53 zhangchao_hz 阅读(98) 评论(0) 推荐(0)
6. 条件渲染
摘要：条件渲染指令 v-if 与 v-else v-show 比较 v-if 与 v-show 如果需要频繁切换 v-show 较好 当条件不成立时, v-if 的所有子节点不会解析(项目中使用) 编码 <div id="demo"> <h2 v-if="ok">表白成功</h2> <h2 v-else> 阅读全文
posted @ 2020-08-16 16:30 zhangchao_hz 阅读(113) 评论(0) 推荐(0)
5. class 与 style 绑定
摘要：理解 在应用界面中, 某个(些)元素的样式是变化的 class/style 绑定就是专门用来实现动态样式效果的技术 class 绑定 :class='xxx' 表达式是字符串: 'classA' 表达式是对象: {classA:isA, classB: isB} 表达式是数组: ['classA', 阅读全文
posted @ 2020-08-16 16:28 zhangchao_hz 阅读(120) 评论(0) 推荐(0)
4. 计算属性和监视
摘要：计算属性 在 computed 属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 监视属性 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算 计算属性高级 通过 getter/setter 实现 阅读全文
posted @ 2020-08-16 11:47 zhangchao_hz 阅读(123) 评论(0) 推荐(0)
3. 模板语法
摘要：模板的理解 动态的 html 页面 包含了一些 JS 语法代码 双大括号表达式 指令(以 v-开头的自定义标签属性) 双大括号表达式 语法: {{exp}} 功能: 向页面输出数据 可以调用对象的方法 指令一: 强制数据绑定 功能: 指定变化的属性值 完整写法: v-bind:xxx='yyy' / 阅读全文
posted @ 2020-08-15 23:33 zhangchao_hz 阅读(139) 评论(0) 推荐(0)
2. Vue 的基本使用
摘要：编码 <div id="app"> <input type="text" v-model="username"> <p>Hello, {{username}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> 阅读全文
posted @ 2020-08-15 23:26 zhangchao_hz 阅读(98) 评论(0) 推荐(0)
1. Vue 的基本认识
摘要：官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 介绍描述 渐进式 JavaScript 框架 作者: 尤雨溪(一位华裔前 Google 工程师) 作用: 动态构建用户界面 Vue 的特点 遵循 MVVM 模式 编码简洁, 体积小, 运行 阅读全文
posted @ 2020-08-15 23:15 zhangchao_hz 阅读(169) 评论(0) 推荐(0)