主体负责人电话修改 网站备案,什么样算网站需要备案,外链网站推荐几个,网站模板演示怎么做vue相关介绍
Vue的两种使用方式#xff1a;
1、vue核心包开发 场景#xff1a;局部模块改造
2、vue核心包vue插件工程化开发 场景#xff1a;整站开发
概念#xff1a;vue是用于构建用户界面的渐进式框架
创建vue实例
创建Vue实例#xff0c;初始化渲染步骤
1、vue核心包开发 场景局部模块改造
2、vue核心包vue插件工程化开发 场景整站开发
概念vue是用于构建用户界面的渐进式框架
创建vue实例
创建Vue实例初始化渲染步骤 准备容器引包官网开发版本的包/生产版本的包创建Vue实例 new vue()指定配置项→渲染数据 el指定挂载点即指明渲染的是哪一个地方填写的是选择器data提供数据
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id app{{msg}}
/div
!-- 引入开发版本的核心包 --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script
script//一旦引入了vue.js核心包在全局环境就有了vue构造函数const app new Vue({// 通过el配置选择器指定el管理是哪一个盒子el:#app,// 通过data提供数据data:{msg:666,}})
/script
/body
/html 插值表达式{{ }}
插值表达式是一种vue模板语法 作用利用表达式进行插值渲染到页面中其中表达式是一种可以被求值的代码JS引擎会将其计算出一个结果 语法{{表达式}}
注意点
1、使用数据时数据必须是存在的
2、支持的是表达式还可以是拼接字符串而非语句比如if for
3、不能在标签属性中使用{{ }}插值
p title{{username}}我是标签/p vue响应式特性
响应式数据变化视图自动更新 vue指令
指令带有v-前缀的特殊标签属性
指令—v-html
!-- vue指令v-前缀的标签属性 --
div v-html str/div 作用设置元素的innerHTML
语法v-html ”表达式“
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id appdiv v-html msg/div/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{msg:a href http://www.itheima.com黑马/a}})/script
/body
/html vue指令v-show vs v-if
v-show
1、作用控制元素显示隐藏
2、语法v-show”表达式“表达式值true显示否则隐藏
3、底层原理切换css的displaynone来控制显示隐藏
4、使用场景频繁切换显示隐藏场景
v-if
1、作用控制元素显示隐藏条件渲染
2、语法v-if”表达式“表达式值true显示否则隐藏
3、底层原理根据判断条件控制元素的创建和移除
4、使用场景要么显示要么隐藏不频繁切换的场景 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id appdiv v-show flag class box我是show/divdiv v-if flag class box我是if/divdiv class box我是if/div
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{flag:false}})/script
/body
/html
vue指令v-else v-else-if
1、作用辅助v-if进行判断渲染
2、语法v-else v-else-if ”表达式“
3、注意需要紧挨着v-if一起使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id appp v-if sex 1性别男/pp v-else性别女/phrp v-if grade 90成绩评定A奖励电脑一台/pp v-else v-else-if grade 90 grade 80成绩评定B/pp v-else v-else-if grade 80 grade 70成绩评定C/pp v-else v-else-if grade 70成绩评定D/p
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{grade:58,sex:8}})/script
/body
/html 指令v-on
1、作用注册事件 添加监听 提供处理逻辑
2、语法 v-on事件名”内联语句“ v-on事件名”methods中的函数名“
内联语句示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id app!-- click可以换做划入等动作例如mouseenterv-on:这一部分可以被替换为 --button v-on:clickcount/button!-- button clickcount/button --span{{count}}/spanbutton v-on:clickcount---/button!-- button clickcount---/button --
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{count:0}})/script
/body
/html
函数名示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id appbutton click isDisplay切换显示隐藏/buttonh1 v-show isShow黑马程序员/h1
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{isShow:true},methods:{isDisplay(){this.isShow !this.isShow;}}})/script
/body
/html v-on调用传参 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id appdiv class boxh3小黑自动售货机/h3button click buy(5)可乐5元/buttonbutton click buy(10)咖啡10元/button/divdiv银行卡余额{{money}}/div
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{money:100},methods:{buy(price){this.money - price;}}})/script
/body
/html 指令v-bind
1、作用动态的设置html的标签属性 → src url title......
2、语法v-bind:属性名 ”表达式“即是将表达式的值设置给前面的属性名后面的表达式一定是已经被定义过的否则会报错
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id app
!-- 简写方式直接 v-bind:src → :src --img v-bind:srcimgURL alt
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{imgURL:./images/taobao.jpg},})/script
/body
/html
指令v-for
1、作用基于数据循环多次渲染整个元素可以遍历数组、对象、数字等
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id apph3小黑水果店/h3ul!-- list[index] 也可以用item表示for后面的括号里面也可以只有item省略index--li v-for(item , index) in list{{list[index]}}/li/ul
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{list:[西瓜, 苹果, 香蕉]},})/script
/body
/html 案例展示图书管理案例
明确需求
1、基本渲染
2、删除功能
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id apph3小黑的书架/h3ulli v-for(item , index) in bookListspan{{ item.name }}/spanspan{{ item.author }}/span!-- 注册点击事件通过id进行删除数组中的数据 --button clickdel(item.id)删除/button/li/ul
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{bookList:[{id:1, name:《红楼梦》, author:曹雪芹},{id:2, name:《西游记》, author:吴承恩},{id:3, name:《水浒传》, author:施耐庵}]},methods:{del(id){// filter根据条件保留满足条件的对影响得到一个新数组this.bookList this.bookList.filter(item item.id! id)}}})/script
/body
/html
指令v-for的key
语法key属性 ”唯一标识“
作用给列表项添加唯一标识。便于vue进行列表项的正确排序复用
没有加key的情况 点击删除 可以发现粉色的背景颜色依然存在
而加上key后 v-for的默认行文会尝试原地修改元素也就是当我们删除三个元素中的第一个元素时候如果没有加那么就相当于删除的是最后一个元素然后将文字位置进行对应的修改
注意点
key的值只能是字符串或数字
key的值必须具有唯一性
推荐使用id作为key
指令v-model
1、作用给表单元素使用双向数据绑定→可以快速获取或设置表单元素内容
数据变化→视图自动更新
视图变化→数据自动更新
2、语法v-model‘变量’
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div id app!-- --账户input typetext v-modelusernamebrbr密码input typepassword v-modelpwd brbrbutton v-on:clicklogin登录/buttonbutton v-on:clickreset重置/button
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{username:,pwd:},methods:{login(){console.log(this.username);console.log(this.pwd);},reset(){this.username;this.pwd;}}})/script
/body
/html
综合案例小黑记事本
功能需求
1、列表渲染
2、删除功能
3、添加功能
4、底部统计和清空
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleinput[typetext] {border: 1px solid black;border-radius: 5px;padding: 5px;} /style
/head
bodydiv idappdivh3记事本/h3divinput typetext v-modelcontent!-- 添加功能1、通过v-model绑定输入框实时获取表单元素的内容2、点击按钮进行新增--button clickadd 添加/button/divdivulli v-for(item,index) in list :keyitem.idspan{{index 1}}/spanspan{{item.content}}/spanbutton clickdel(item.id)删除/button/li/ulspan合计{{list.length}}/spanbutton clickclear清空/button/div/div
/div
script src./vue.js/script
scriptconst app new Vue({el:#app,data:{list:[{id:1,content:跑步1公里},{id:2,content:跳绳200次},{id:3,content:游泳100米}]},methods:{add(){this.list.push({id:this.list.length1,content:this.content})},del(id){this.list this.list.filter(item item.id! id)},clear(){this.list []}}})/script
/body
/html
指令修饰符
通过”.指明一些指令后缀不同后缀封装了不同的处理操作→简化代码
1、按键修饰符
keyup.enter→键盘回车监听没有加后缀的时候按住任意键都可出发监听但是加上了就只能通过回车触发 因此既可通过点击添加按钮添加任务也可以通过回车
2、v-model修饰符
v-model.trim→去除首尾空格
v-model.number→转数字 输入年龄的时候原来是实际上是字符串使用.number可以将其转换为数字但是如果输入的不是数字得到的仍然是字符串
3、事件修饰符
事件名.stop→阻止冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.father{width: 200px;height: 200px;background-color:red;}.son{width: 100px;height: 100px;background-color:blue;}/style
/head
bodydiv idappdiv clickfather classfatherdiv click.stopson classson/div/div
/div
script src./vue.js/script
scriptconst app new Vue({el:#app,data:{username:,age:},methods:{father(){alert(父亲被点击了)},son(){alert(儿子被点击了)}}})/script
/body
/html
在加上后缀之前点击儿子的时候会触发点击父亲的事件但是当加上后缀之后就不会触发父亲事件
事件名.prevent→阻止默认行为
v-bind对于样式控制的增强
为了方便开发者进行样式控制vue扩展了v-bind的语法可以针对class类名和style行内样式进行控制
操作class
语法
:class 对象/数组
1、对象→键就是类名值是布尔值如果值为true有这个类否则没有这个类
div classbox :class{类名:布尔值,类名2布尔值}/div
试用场景一个类名来回切换 2、数组→数组中所有的类都会添加到盒子上本质就是一个class列表
div classbox :class[类名1,类名2,类名3]/div
试用场景批量添加或删除类 三种表示方式具有相同的效果
导航高亮案例
点击哪一个哪一个就显示高亮 核心思路
1、基于数据动态渲染tab
2、准备下标记录高亮的是哪一个tab
3、基于下标动态控制class类名
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* li标签中的a作为顶部并排的导航 */ul {list-style-type: none;padding: 0;margin: 0;overflow: hidden;background-color: #333;}li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}/* 鼠标移入li变色 */.active{background-color: pink;}/style
/head
bodydiv idappul!-- 点击切换activeIndex的值 --li v-for(item, index) in list :keyitem.id clickactiveIndex indexa href# :class{active:index activeIndex}{{item.name}}/a/li/ul/divscript src./vue.js /scriptscriptconst app new Vue({el:#app,data:{// 记录高亮activeIndex:0,list:[{id:1, name:京东秒杀},{id:2, name:每日特价},{id:3, name:品类秒杀}]}})/script
/body
/html v-bind对于样式控制增强-操作styl
语法
style“样式对象” 注意点属性值需要用引号引起来当属性名含有‘-’时也需要用引号
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width:200px;height:200px;background-color: pink;}/style
/head
bodydiv idappdiv classbox :style{width:400px, height:400px, background-color:green}/div/divscript src./vue.js /scriptscriptconst app new Vue({el:#app,data:{// 记录高亮activeIndex:0,list:[{id:1, name:京东秒杀},{id:2, name:每日特价},{id:3, name:品类秒杀}]}})/script
/body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.progress{/* 圆角矩形 */border-radius: 10px;/* 边框 */border: 1px solid #ccc;/* 背景色 */background-color: black;width:200px;}.inner{/* 圆角矩形 */border-radius: 10px;/* 边框 */border: 1px solid #ccc;background-color: blue;height:100%;}/style
/head
bodydiv idappdiv classprogressdiv classinner :style{width:percent %}span{{percent}}%/span/div/divdivbutton clickpercent 25设置25%/buttonbutton clickpercent 50设置50%/buttonbutton clickpercent 100设置100%/button/div/divscript src./vue.js /scriptscriptconst app new Vue({el:#app,data:{percent:30}})/script
/body
/html v-model应用于其他表单元素
常见的表单元素都可以用v-model绑定关联→快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/style
/head
bodydiv idapph1小黑学习网/h1brbr姓名input typetext v-modelusernamebrbr是否单身input typecheckboxbrbr性别!-- 1、name:给单选框加上name属性可以分组同一组相互会互斥2、value给单选框加上value属性用于提交给后台数据--input typeradio namegender value1 v-modelgender 男input typeradio namegender value2 v-modelgender 女brbr所在城市!-- 1、option需要设置value值提交给后台2、select的value值关联了选中的value值--select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103成都/option/selectbrbr自我描述brbrtextarea v-modeldesc name id cols30 rows10/textareabrbrbutton注册/button/divscript src./vue.js /scriptscriptconst app new Vue({el:#app,data:{username:,gender:1,cityId:101,desc:}})/script
/body
/html 计算属性
概念
基于现有的数据计算出来的新属性依赖数据变化自动重新计算
语法
1、声明在computed配置项中一个计算属性对应一个函数
2、使用起来和普通属性一样使用{{计算属性名}}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 表格每一项都有边框*/table {border: 1px solid #ccc;}/* 表格每一项都有边框*/table th {width:50px;border: 1px solid #ccc;}/* 文字居中显示 */td, th {text-align: center;}table td {width:50px;border: 1px solid #ccc;}/style/style
/head
bodydiv idapptabletrth名字/thth数量/th/trtr v-for(item , index) in list :keyitem.idtd{{item.name}}/tdtd{{item.num}}/td/trbrbr/table!-- 不能加括号 --div礼物总数为:{{totalCount}}个/div/divscript src./vue.js /scriptscriptconst app new Vue({el:#app,data:{list:[{id:1, name:篮球, num:1},{id:2, name:足球, num:2},{id:3, name:排球, num:3},{id:4, name:气球, num:4}]},computed:{totalCount(){// 基于现有数据编写求值逻辑// 计算属性函数内部可以直接通过this访问到app实例let total this.list.reduce((sum, item) sum item.num, 0);return total;}}})/script
/body
/html 计算属性vs方法methods
计算属性
作用封装了一段对于数据的处理求得一个结果 缓存特性提升性能
计算属性会对计算出来 的结果缓存再次使用直接读取缓存依赖项变化了会自动重新计算并再次缓存
methods方法
作用给实例提供一个方法调用来处理业务逻辑 计算属性完整写法 计算属性默认的简写只能读取访问不能修改
如果要修改需要写出计算属性的完整写法 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/style
/head
bodydiv idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{fullName}}/spanbrbrbutton clickchangeName改名卡/button/divscript src./vue.js /scriptscriptconst app new Vue({el:#app,data:{firstName:刘,lastName:备},methods:{changeName(){this.fullName fullName;}},computed:{fullName:{// 当fullName计算属性被获取求值时执行get有缓存优先读缓存// 会将返回值作为求值的结果get(){return this.firstName this.lastName},set(){this.firstName firstName;this.lastName lastName;}}}})/script
/body
/html watch侦听器 监视器
作用监视数据变化执行一些业务逻辑或异步操作
语法
1、简答类型简单类型数据直接监视
2、完整写法添加额外配置项 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 为文本输入框添加边框 *//style
/head
bodydiv idapp!-- 翻译框 --div classboxtextarea v-modelwords cols30 rows10老值/textareatextarea v-modelperson.name cols30 rows10/textarea/div
/divscript src./vue.js/script
scriptconst app new Vue({el:#app,data:{words:,person:{name:}},methods:{},watch:{words(newValue, oldValue){console.log(变化了,newValue,oldValue);},person.name(newValue){console.log(变化了,newValue);}}})/script
/body
/html
