景区建设网站的不足,怎么建立官网,培训机构在哪个平台找,wordpress 抓取一、Vue快速上手
1. vue概念
概念#xff1a;Vue是一个用于 构建用户界面的 渐进式 框架
构建用户界面#xff1a;基于数据动态渲染页面渐进式#xff1a;循序渐进的学习框架#xff1a;一套完整的项目解决方案#xff0c;提升开发效率
优点#xff1a;大大提升开发效…一、Vue快速上手
1. vue概念
概念Vue是一个用于 构建用户界面的 渐进式 框架
构建用户界面基于数据动态渲染页面渐进式循序渐进的学习框架一套完整的项目解决方案提升开发效率
优点大大提升开发效率70%
缺点需要理解记忆规则-官网 Vue的两种使用方式
①Vue核心包开发 场景局部模块改造
②Vue核心包 Vue插件工程化开发 场景整站开发 2. 创建实例 1. 准备容器 div idapp!--1. 准备容器--{{msg}}/div
2. 引包官网——开发版本
①下载vue.js ②使用在线版本我使用的是第二种方式 script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script
3. 创建Vue实例 const app new Vue({})
4. 指定配置项 const app new Vue({// 4. 通过el配置选择器指定Vue管理的是哪个盒子el: #app,// 通过data提供数据data: {msg: Hello Vue,count: 666}})
完整代码
htmlhead/headbodydiv idapp!--1. 准备容器--h1{{msg}}/h1a href#{{count}}/a/div!--2. 引入开发版本包 — 包含完整的注释和警告--script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscript// 3. 一旦引入VueJS核心包在全局环境就有了Vue构造函数const app new Vue({// 4. 通过el配置选择器指定Vue管理的是哪个盒子el: #app,// 通过data提供数据data: {msg: Hello Vue,count: 666}})/script/body/html
效果 3. 插值表达式
插值表达式是一种Vue的模板语法
1. 作用利用表达式进行插值渲染到页面中
表达式是可以被求值的代码JS引擎会将其计算出一个结果
2. 语法{{ 表达式 }}
h3{{ title }} /h3
p{{ nickname.toUpperCase() }} /p
p{{ age 18 ? 成年 : 未成年 }}/p
p{{ obj.name }} /p
3. 注意点
使用的数据必须存在data)支持的是表达式而非语句比如if for…不能在标签属性中使用 {{}}插值
示例
html
headtitleDocument/title
/headbodydiv idappp{{ nickname }}/pp{{ nickname.toUpperCase() }}/pp{{ nickname 你好 }}/pp{{ age 18 ? 成年 : 未成年 }}/pp{{ friend.name }}/pp{{ friend.desc }}/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {nickname: tony,age: 20,friend: {name: john,desc: 热爱学习 Vue}}})/script/body
/html
效果 4. 响应式特性
响应式数据变化视图自动更新
如何访问或修改data中的数据最终会被添加到实例上
①访问数据实例.属性名②修改数据实例.属性名 值 示例
html
headtitleDocument/title
/headbodydiv idapp{{msg}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 响应式数据msg: 你好Vue}})/script/body
/html
通过控制台查看、修改数据 5. 开发者工具
1. 打开极简插件官网
2. 搜索vue选择第一个 3. 下载并解压 4. 打开Chrome浏览器 - 点击右上角三个点 - 扩展程序 - 管理扩展程序 - 开启“开发者模式” 5. 拖拽上面解压得到的.crx文件到Chrome的“管理扩展程序页面”空白处进行安装 6. 点击“详情”允许访问文件网址 7. 测试重启浏览器 - 右键 - 检查 - 检查有没有多出一个“vue
注意要打开刚刚写的网页好像才会显示打开别人的网页不会显示 8. 通过调试工具修改数据测试视图是否会跟着改变 二、Vue指令
Vue会根据不同的 【指令】针对标签实现不同的 【功能】
指令带有 v-前缀 的特殊标签属性
1. v-html
作用设置元素的 innerHTML动态渲染DOM节点
语法v-html 表达式
示例注意msg的value值是被 括起来的即Tab键上面那个键
html
headtitleDocument/title
/headbodydiv idappdiv v-htmlmsg/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {msg: a hrefhttps://www.baidu.com百度/a}})/script/body
/html
效果点击”百度“即可跳转到百度首页 可以到Vue官网查看相关的API 2. v-show
作用控制元素显示隐藏
语法v-show 隐藏 表达式表达式值为true显示false隐藏
原理切换display:none控制显示隐藏
场景频繁切换显示隐藏的场景 3. v-if
作用控制元素显示隐藏条件渲染
语法v-if 表达式表达式值true显示false隐藏
原理基于条件判断是否创建或移除元素节点
场景要么显示要么隐藏不频繁切换的场景
v-show和v-if的区别
v-show只是简单地切换元素的CSS属性display。当条件判断为假时元素的display属性将被赋值为none仍保留在DOM中反之元素的display属性将被恢复为原有值v-if是根据判断条件控制元素的创建和移除v-if判定为假的元素不会出现在DOM中v-show有更高的初始渲染开销而v-if有更高的切换开销
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 100px;line-height: 100px;margin: 10px;border: 3px solid #000;text-align: center;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;}/style
/head
bodydiv idappdiv v-showflag classbox我是v-show控制的盒子/divdiv v-ifflag classbox我是v-if控制的盒子/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {flag: true}})/script/body
/html
flag为true时 flag为false时: 4. v-else 和 v-else-if
作用辅助v-if进行判断渲染
语法v-else v-else-if 表达式
注意需要紧挨着 v-if 一起使用
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappp v-ifgender 1性别♂ 男/pp v-else性别♀ 女/phrp v-ifscore 90成绩评定A奖励电脑一台/pp v-else-ifscore 70成绩评定B奖励周末郊游/pp v-else-ifscore 60成绩评定C奖励零食礼包/pp v-else成绩评定D惩罚一周不能玩手机/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {gender: 1,score: 80}})/script/body
/html
效果 5. v-on
作用注册事件 添加监听 提供处理逻辑。
Vue使用v-on指令监听DOM事件开发者可以将事件代码通过v-on指令绑定到DOM节点上。
Vue为v-on提供了一种简写形式如 click
语法
①v-on事件名 “内联语句”②v-on事件名 “methods中的函数名”
示例1内联语句
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappbutton v-on:clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 666}})/script
/body
/html
效果 示例2函数方式(无参)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappbutton clickchange切换显示隐藏/buttonh1 v-showisShow黑马程序员/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app2 new Vue({el: #app,data: {// 提供数据isShow: false},methods: {// 提供处理逻辑函数change() {// 让提供的所有methods中的函数this都指向当前实例this.isShow !this.isShow// app2.isShow !app2.isShow}},})/script
/body
/html
效果 示例3函数方式有参
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}/style
/head
bodydiv idappdiv classboxh3小黑自动售货机/h3button clickbuy(5)可乐5元/buttonbutton clickbuy(10)咖啡10元/button/divp银行卡余额{{ money }}元/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {money: 1000},methods: {buy(price) {this.money - price}},})/script
/body
/html
效果 6. v-bind
作用动态的设置html的标签属性 - src url title ……
语法v-bind:属性名表达式其中v-bind可以省略不写
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- img v-bind:srcimgUrl v-bind:titlemsg alt --!-- v-bind可以省略不写 --img :srcimgUrl :titlemsg alt/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {msg: 猴子,imgUrl: imgs/10-01.png}})/script
/body
/html
效果 图片切换案例 - 波仔学习之旅 核心思路分析
①数组存储图片路径 - [图片1图片2图片3···]
②准备下标index数组[下标] - v-bind设置src展示图片 - 修改下标切换图片
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappbutton v-showindex 0 clickindex--上一页/buttondivimg v-bind:srclist[index] alt/divbutton v-showindex list.length - 1 clickindex下一页/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [imgs/10-01.png,imgs/11-01.gif,imgs/11-02.gif,imgs/11-03.gif,imgs/11-04.png,imgs/11-05.png,],index: 0,},methods: {},})/script
/body
/html 7. v-for
作用基于数据循环多次渲染整个元素 - 数组、对象、数字···
遍历数组语法item每一项index下标
省略indexv-for item in 数组
v-for(item, index) in 数组 v-for中的key
语法key属性 “唯一标识”
作用给列表项添加的唯一标识便于Vue进行列表项的正确排序复用。
不加keyv-for的默认行为会尝试原地修改元素就地复用
在使用v-for时最好为每个迭代元素提供一个值不重复的key。
注意点
①key的值只能是字符串或数字类型②key的值必须具有唯一性③推荐使用id作为key唯一不推荐使用index作为key(会变化不对应) 当列表渲染被重新执行数组内容发生改变时如果不使用keyVue会为数组成员就近复用已存在的DOM节点如图1所示。 当使用key时Vue会根据key的变化重新排列节点顺序如图2所示并将移除key不存在的节点。 示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3小黑水果店/h3ulli v-for(item, index) in list {{index}} - {{ item }}/li/ulul!-- 当不需要的时候index可以省略此时括号也可以省略 --li v-foritem in list {{ item }}/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [西瓜, 苹果, 鸭梨]}})/script
/body
/html
效果 图书管理案例 - 小黑的书架
明确需求①基本渲染 - v-for②删除功能
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3小黑的书架/h3ulli v-for (item, index) in booksList :keyitem.idspan {{ item.name }}/spanspan{{ item.author }}/spanbutton clickdel(item.id)删除/button/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {booksList: [{ id: 1, name: 《红楼梦》, author: 曹雪芹 },{ id: 2, name: 《西游记》, author: 吴承恩 },{ id: 3, name: 《水浒传》, author: 施耐庵 },{ id: 4, name: 《三国演义》, author: 罗贯中 }]},methods: {del(id) {// filter根据条件保留满足条件的对应项得到一个新数组(filter不会改变原数组)this.booksList this.booksList.filter(item item.id ! id)}},})/script
/body
/html
效果 8. v-model
作用给表单元素使用双向数据绑定 - 可以快速获取或设置表单元素内容
① 数据变化 - 视图自动更新② 视图变化 - 数据自动更新
语法v-model 变量
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- v-model可以让数据和视图形成双向数据绑定 --账户input typetext v-modelusername brbr密码input typepassword v-modelpassword brbrbutton clicklogin()登录/buttonbutton clickreset()重置/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,password: },methods: {login() {console.log(this.username, this.password)},reset() {this.username this.password }}})/script
/body
/html
效果 三、综合案例——小黑记事本 需求明确① 列表渲染②删除功能③添加功能④底部统计⑤清空
html代码
!DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta http-equivX-UA-Compatible contentIEedge /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relstylesheet href./css/index.css /
title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1!-- 添加功能1. 通过v-model绑定输入框实时火区表单元素的内容2. 点击添加任务按钮进行新增--input placeholder请输入任务 classnew-todo v-modeltodoName /button classadd clickadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item, index) in list :keyitem.iddiv classviewspan classindex{{ index 1}}./span label{{ item.name }}/labelbutton classdestroy clickdel(item.id)/button/div/li/ul/section!-- 统计和清空 --!-- 如果没有任务了隐藏底部 --footer classfooter v-showlist.length 0!-- 统计 --span classtodo-count合 计:strong {{ list.length }} /strong/span!-- 清空 --button classclear-completed clickclear清空任务/button/footer
/section!-- 底部 --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{id: 1, name: 跑步一公里},{id: 2, name: 跳绳200次},{id: 3, name: 游泳100米},],todoName: },methods: {del(id) {this.list this.list.filter(item item.id ! id)},add() {if(this.todoName ) {alert(请输入任务名称)return}this.list.unshift({id: new Date(), // 当前的时间戳// id: this.list.length 1,name: this.todoName})this.todoName },clear() {this.list []}},})/script
/body
/htmlcss样式index.css
html,
body {margin: 0;padding: 0;
}
body {background: #fff;
}
button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}body {font: 14px Helvetica Neue, Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300;
}:focus {outline: 0;
}.hidden {display: none;
}#app {background: #fff;margin: 180px 0 40px 0;padding: 15px;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#app .header input {border: 2px solid rgba(175, 47, 47, 0.8);border-radius: 10px;
}
#app .add {position: absolute;right: 15px;top: 15px;height: 68px;width: 140px;text-align: center;background-color: rgba(175, 47, 47, 0.8);color: #fff;cursor: pointer;font-size: 18px;border-radius: 0 10px 10px 0;
}#app input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}#app input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}#app input::input-placeholder {font-style: italic;font-weight: 300;color: gray;
}#app h1 {position: absolute;top: -120px;width: 100%;left: 50%;transform: translateX(-50%);font-size: 60px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, 0.8);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility;
}.new-todo,
.edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.new-todo {padding: 16px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}.main {position: relative;z-index: 2;
}.todo-list {margin: 0;padding: 0;list-style: none;overflow: hidden;
}.todo-list li {position: relative;font-size: 24px;height: 60px;box-sizing: border-box;border-bottom: 1px solid #e6e6e6;
}.todo-list li:last-child {border-bottom: none;
}.todo-list .view .index {position: absolute;color: gray;left: 10px;top: 20px;font-size: 22px;
}.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesnt support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none;
}.todo-list li .toggle {opacity: 0;
}.todo-list li .toggle label {/*Firefox requires # to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id922433IE and Edge requires *everything* to be escaped to render, so we do that instead of just the # - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/*/background-image: url(data:image/svgxml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E);background-repeat: no-repeat;background-position: center left;
}.todo-list li .toggle:checked label {background-image: url(data:image/svgxml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E);
}.todo-list li label {word-break: break-all;padding: 15px 15px 15px 60px;display: block;line-height: 1.2;transition: color 0.4s;
}.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through;
}.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out;
}.todo-list li .destroy:hover {color: #af5b5e;
}.todo-list li .destroy:after {content: ×;
}.todo-list li:hover .destroy {display: block;
}.todo-list li .edit {display: none;
}.todo-list li.editing:last-child {margin-bottom: -1px;
}.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6;
}.footer:before {content: ;position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2);
}.todo-count {float: left;text-align: left;
}.todo-count strong {font-weight: 300;
}.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0;
}.filters li {display: inline;
}.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px;
}.filters li a:hover {border-color: rgba(175, 47, 47, 0.1);
}.filters li a.selected {border-color: rgba(175, 47, 47, 0.2);
}.clear-completed,
html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;
}.clear-completed:hover {text-decoration: underline;
}.info {margin: 50px auto 0;color: #bfbfbf;font-size: 15px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center;
}.info p {line-height: 1;
}.info a {color: inherit;text-decoration: none;font-weight: 400;
}.info a:hover {text-decoration: underline;
}/*Hack to remove background from Mobile Safari.Cant use it globally since it destroys checkboxes in Firefox
*/
media screen and (-webkit-min-device-pixel-ratio: 0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}
}media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;}
}效果
