网站开发规范有哪些,flash个人网站设计,那些行业做网站优化的比较多,淘宝网站建设维护会计科目#x1f49d;#x1f49d;#x1f49d;欢迎来到我的博客#xff0c;很高兴能够在这里和您见面#xff01;希望您在这里可以感受到一份轻松愉快的氛围#xff0c;不仅可以获得有趣的内容和知识#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小… 欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。 ✨✨ 欢迎订阅本专栏 ✨✨ 前言
本栏目是根据黑马程序员的网课来整理的笔记也会结合我的一些个人见解来记录自己学习Vue的过程俗话说好记性不如烂笔头小郑喜欢在学习的过程中记笔记记下自己在学习过程中难以理解的知识点反复练习加深印象小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目希望广大网友一起监督学习互相进步! 目录 什么是Vue?
创建Vue实例
插值表达式 {{}}
语法
错误用法
Vue中的常用指令
v-text类似innerText
v-html类似 innerHTML
v-show
v-if
v-else 和 v-else-if
v-on
v-bind
v-for
v-on 什么是Vue? Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。无论是简单还是复杂的界面Vue 都可以胜任。Vue 是一个框架也是一个生态。其功能覆盖了大部分前端开发常见的需求。 创建Vue实例
核心步骤4步 准备容器 引包官网 — 开发版本/生产版本 创建Vue实例 new Vue() 指定配置项渲染数据 el:指定挂载点 data提供数据
div idapp{{ message }}
/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {message: hello world}})
/script 插值表达式 {{}}
插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据 语法
h3{{title}}h3p{{nickName.toUpperCase()}}/pp{{age 18 ? 成年:未成年}}/pp{{obj.name}}/pp{{fn()}}/p
错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
p{{hobby}}/p //如果在data中不存在 则会报错2.支持的是表达式而非语句比如if for ...
p{{if}}/p3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
p title{{username}}我是P标签/p
Vue中的常用指令
概念指令Directives是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
为啥要学提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类 内容渲染指令v-html、v-text 条件渲染指令v-show、v-if、v-else、v-else-if 事件绑定指令v-on 属性绑定指令 v-bind 双向绑定指令v-model 列表渲染指令v-for v-text类似innerText 使用语法p v-textunamehello/p意思是将 uame 值渲染到 p 标签中 类似 innerText使用该语法会覆盖 p 标签原有内容 v-html类似 innerHTML 使用语法p v-htmlintrohello/p意思是将 intro 值渲染到 p 标签中 类似 innerHTML使用该语法会覆盖 p 标签原有内容 类似 innerHTML使用该语法能够将HTML标签的样式呈现出来。 v-show 作用 控制元素显示隐藏 语法 v-show 表达式 表达式值为 true 显示 false 隐藏 原理 切换 display:none 控制显示隐藏 场景频繁切换显示隐藏的场景 v-if 作用 控制元素显示隐藏条件渲染 语法 v-if 表达式 表达式值 true显示 false 隐藏 原理 基于条件判断是否创建 或 移除元素节点 场景 要么显示要么隐藏不频繁切换的场景 v-else 和 v-else-if 作用辅助v-if进行判断渲染 语法v-else v-else-if表达式 需要紧接着v-if使用 此语法也可以遍历对象和数字 作用 给表单元素input、radio、select使用双向绑定数据可以快速 获取 或 设置 表单元素内容
语法v-model变量 v-on 使用Vue时如需为DOM注册事件及其的简单语法如下 button v-on:事件名内联语句按钮/button button v-on:事件名处理函数按钮/button button v-on:事件名处理函数(实参)按钮/button v-on: 简写为 事件处理函数 注意 事件处理函数应该写到一个跟data同级的配置项methods中 methods中的函数内部的this都指向Vue实例 v-bind 作用动态设置html的标签属性 比如src、url、title 语法v-bind:属性名“表达式” v-bind:可以简写成 : 比如有一个图片它的 src 属性值是一个图片地址。这个地址在数据 data 中存储。 则可以这样设置属性值 img v-bind:srcurl / img :srcurl / v-bind可以省略 v-for v-for 指令需要使用 (item, index) in arr 形式的特殊语法其中 item 是数组中的每一项 index 是每一项的索引不需要可以省略 v-on 所谓双向绑定就是 数据改变后呈现的页面结果会更新 页面结果更新后数据也会随之而变 ❤️❤️❤️小郑是普通学生水平如有纰漏欢迎各位大佬评论批评指正 如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢!
