网站建设方面的书籍书籍,鹰潭网站建设,wordpress多功能主题,广东电子商务网站编译软件#xff1a;IntelliJ IDEA 2019.2.4 x64 运行环境#xff1a;Google浏览器 Vue框架版本#xff1a;Vue.js v2.7.14 目录 一. 框架是什么#xff1f;二. 怎么写一个Vue程序#xff08;以IDEA举例#xff09;#xff1f;三. 什么是声明式渲染?3.1 声明式3.2 渲染… 编译软件IntelliJ IDEA 2019.2.4 x64 运行环境Google浏览器 Vue框架版本Vue.js v2.7.14 目录 一. 框架是什么二. 怎么写一个Vue程序以IDEA举例三. 什么是声明式渲染?3.1 声明式3.2 渲染 四. Vue如何操作标签体(双标签中的内容)?五. Vue如何操作属性值5.1 单向绑定5.2 双向绑定 六. Vue如何实现条件渲染6.1 什么是条件渲染6.2 v-if6.3 v-else6.4 v-show6.5 v-if 与v-show的区别 七. Vue如何实现列表渲染7.1 简单数组7.2 对象数值 八. Vue如何实现事件驱动九. Vue如何实现取消控件默认行为9.1 什么是控件默认行为9.2 超链接与表单取消控件默认行为 十. Vue如何实现阻止事件冒泡10.1 关于事件修饰符10.2 什么是事件冒泡10.3 如何实现阻止事件冒泡 十一. Vue如何进行属性的侦听十二. Vue的生命周期十三. 钩子函数十四. 综合案例Vue版动态表格 一. 框架是什么
任何编程语言在最初的时候都是没有框架的后来随着在实际开发过程中不断的总结经验积累最佳的解决方案慢慢地人们发现在很多特定场景的特定问题总是可以套用固定的解决方案。
于是有人把成熟的固定解决方案收集起来整合在一起就形成了框架。
在使用框架时我们往往并不会关心框架是如何编程实现我们只会关心它能不能实现我们想要的代码逻辑当然前提是我们需要提前对框架进行声明即告诉它要做什么就像用洗衣机洗衣服时需要先放衣服洗衣液设置洗涤模式等相应功能参数。
而我们使用Vue框架就是在其导入了封装的固定的解决方案的js文件的基础上进行编程开发。 二. 怎么写一个Vue程序以IDEA举例
步骤 在官网上下载Vue框架的js文件 在IDEA上新建工程文件在其工程目录新建一个js文件夹并创建一个空白的Vue.js文件将官网上的Vue框架的js代码全选复制粘贴至我们新建的Vue.js上 新建一个HelloWorld.html文件在其上搭建Vue框架 a. 将Vue.js引入到网页内 ps在IDEA里直接将Vue.js拖拽至HelloWorld.html里自动实现引入 script srcvue.js/scriptb. 在body标签内设置一个区域(Vue要操作的区域) //在body里设置一个空的 div 元素具有 ID“app”
body
div idapp/div
/bodyc. 在div标签的下方创建Script标签并new Vue()对象 body
div idapp/div
/body
script//new Vue()对象new Vue({});
/scriptd. 给Vue对象传递一个js对象通过{}方式创建的js对象 script
new Vue({
el:#app,//指定为#app的目标元素用于Vue控制(选择控制区域
data:{},//一个空对象将用于存储此实例的数据模型。
methods:{} //一个空对象将用于定义此实例可能使用的任何自定义方法。
);
/script实现功能 a. 设置数据模型 //设置数据模型
data:{
msg:div的内容
},b. 将Vue对象中的数据模型和网页的标签体做一个绑定关系 body
div idapp!-- [{msg}}--插值表达式 -- 绑定数据模型 --div[{msg}}/div
/div
/bodyc. 这样我们在操作div中的内容的时候就是转化为操作msg 在元素上绑定事件 input typebuttonvalue获得div中的内容clickgetText/在Vue对象的methods内创建函数 methods:{
//创建自定义函数getText用于获取msg的值其实是获取div中的文本以警示框弹出
getText:function () {alert(this.msg);
},
//创建自定义函数setText用于设置msg的值实际上修改的是div中的内容
setText:function () {this.msgVue设置的新值
}案例对div标签体中的内容进行获取或修改 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue_HelloWorld/titlescript srcvue.js/script
/head
body
div idappdiv iddiv01{{msg}}/divinput typebutton value获取div的内容 idbtn01 clickgetText !-- 无参函数可以省略()但有参函数不能省略--input typebutton value修改div的内容 idbtn02 clicksetText
/div
scriptnew Vue({el:#app,//el是选择Vue可操作的区域data:{msg: 这是div的内容}, //设置数据模型methods:{getText:function () {alert(this.msg)},setText:function () {this.msg这是Vue设置的新值}}})/script/body
/html三. 什么是声明式渲染?
3.1 声明式 声明式是相对于编程式而言的。 声明式告诉框架做什么具体操作由框架完成编程式自己编写代码完成具体操作
3.2 渲染 上图含义解释
蓝色方框HTML标签红色圆形动态、尚未确定的数据蓝色圆形经过程序运算以后计算得到的具体的可以直接在页面上显示的数据、渲染程序计算动态数据得到具体数据的过程
举例如下 四. Vue如何操作标签体(双标签中的内容)?
语法 插值表达式{{数据模型中的key值)} 代码举例如下 div iddiv01{{msg}}/divdata:{msg: 这是div的内容}五. Vue如何操作属性值
5.1 单向绑定
释义 修改数据模型html页面同步效果但是用户修改html属性值数据模型不会随之改变 语法 v-bind:原属性名“数据模型的key值” 可以简写 :原属性名“数据模型的key值” 案例演示单向绑定的效果 !DOCTYPE html
html langen
headmeta charsetUTF-8titleVue_HelloWorld/titlescript srcvue.js/script
/head
body
div idapp!-- 单向绑定 v-blind --input typetext v-blind:valueusername brbrinput typebutton value显示文本框中的内容 clickgetValue/div
scriptnew Vue({el:#app,//el是选择Vue可操作的区域data:{username:admin},methods:{getValue:function () {alert(this.username)}}})/script/body
/html案例演示结果 ①输入前的变化 ②输入后的变化 5.2 双向绑定
释义 修改数据模型html页面同步效果用户修改html属性值数据模型会随之改变 语法 v-model:原属性名“数据模型的key值” 可以简写为如下所示 v-model“数据模型的key值” 注意 在input标签中双向绑定只能修改value因为客户只能修改value属性其他的属性用户也修改不了 案例演示实现双向绑定 !DOCTYPE html
html langen
headmeta charsetUTF-8titleVue_HelloWorld/titlescript srcvue.js/script
/head
body
div idapp!-- 双向绑定 v-blind --input typetext v-model:valueusername brbrinput typebutton value显示文本框中的内容 clickgetValue/div
scriptnew Vue({el:#app,//el是选择Vue可操作的区域data:{username:admin},methods:{getValue:function () {alert(this.username)}}})/script/body
/html案例演示结果 ①输入前 ②输入后的变化 tips v-model.trim数据模型的key值” 去前后空格 六. Vue如何实现条件渲染
6.1 什么是条件渲染 根据Vue对象中数据属性的值来判断是否对HTML页面内容进行渲染。即控制元素是否显示。 6.2 v-if
用法 根据表达式的值来决定是否渲染元素或组件当表达式的值为真时才会渲染否则不会渲染。 案例使用v-if在按按钮的同时改变div的内容 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#divs {border: 1px solid red;width: 100px;height: 150px;}/stylescript srcvue.js/script
/head
bodydiv idappdiv v-ifflag iddivs这是div的内容/divinput typebutton value按钮 clickchangeDiv
/div
scriptnew Vue({el:#app,data:{flag:true},methods:{changeDiv:function () {this.flag!this.flag;}}})/script/body
/html案例演示效果 ①变化前 ②变化后 6.3 v-else
用法 true不显示false显示 注意 不能单独使用必须要和v-if搭配 v-if和v-else中间不能有多余标签 案例演出实现二者搭配的效果 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#divs {border: 1px solid red;width: 100px;height: 150px;}/stylescript srcvue.js/script
/head
bodydiv idappdiv v-ifflag iddivs这是加了v-if渲染的div/divdiv v-elseflag 这是加了v-else渲染的div/divinput typebutton value按钮 clickchangeDiv
/div
scriptnew Vue({el:#app,data:{flag:true},methods:{changeDiv:function () {//按下按钮触发单击事件的瞬间flag被取反并同时作用于所渲染的标签体this.flag!this.flag;}}})/script/body
/html案例演示效果 ①变化前 ②变化后 6.4 v-show
用法 根据表达式的值来决定是否显示元素或组件当表达式的值为真时会显示否则会隐藏但是元素仍然会被渲染到 DOM 中。 案例演示实现v-show的效果 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#divs {border: 1px solid red;width: 100px;height: 150px;}/stylescript srcvue.js/script
/head
bodydiv idapp
!-- div v-ifflag iddivs这是加了v-if渲染的div/div--div v-showflag iddivs这是加了v-show渲染的div/divinput typebutton value按钮 clickchangeDiv/div
scriptnew Vue({el:#app,data:{flag:true},methods:{changeDiv:function () {//按下按钮触发单击事件的瞬间flag被取反并同时作用于所渲染的标签体this.flag!this.flag;}}})/script/body
/html案例实现效果 ①渲染前 ②渲染后 6.5 v-if 与v-show的区别
使用场景不同 v-if 适用于在条件满足时只渲染一次的情况。 v-show 适用于需要频繁切换显示与隐藏的情况。 why 因为 v-if 在条件不满足时会从 DOM 中删除元素而 v-show 则只是通过修改 CSS 样式来隐藏元素因此 v-show 的性能比 v-if 更好。 七. Vue如何实现列表渲染
用法 Vue 的列表渲染可以使用 v-for 指令它可以遍历数组或对象并将每个元素渲染出来。 位置 循环遍历哪个标签v-for加在哪个标签上 语法 v-for 7.1 简单数组 案例在hyml中的无序列表中遍历数据模型中的hobbys并显示在页面中 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcvue.js/script
/head
bodydiv idappulli v-forhobby in hobbys{{hobby}}/li/ulinput typebutton value新增 clickaddHobbyinput typebutton value删除 clickdeleteHobby
/div
scriptnew Vue({el:#app,data: {hobbys:[Java,mysql,写博客,刷视频号]} ,methods:{//新增一个习惯addHobby:function () {this.hobbys.push(CODM)},//删除一个习惯从后往前删deleteHobby:function () {this.hobbys.splice(this.hobbys.length-1,1)}}})/script/body
/html7.2 对象数值 案例在table标签中将数据模型中的computers对象数组遍历并显示到页面 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcvue.js/script
/head
bodydiv idapptabletrth序号/thth品牌/thth价格/th/trtr v-forcomputer in computerstd {{computer.id}}/tdtd {{computer.brand}}/tdtd {{computer.price}}/td/tr/table/div
scriptnew Vue({el:#app,//遍历对象数值data: {computers:[{id:1001,brand:华为,price: 7800}, {id:1002,brand:联想 ,price:8900}, {id:1003,brand:苹果,price:13000}]} })/script/body
/html需要索引的语法 v-for“(变量index) in 数组” 索引index从0开始可以加数学运算 案例在刚才的对象数组中加入序号 代码演示如下
/head
bodydiv idapptabletrth索引/thth序号/thth品牌/thth价格/th/trtr v-for(computer,index) in computerstd{{index1}}/tdtd {{computer.id}}/tdtd {{computer.brand}}/tdtd {{computer.price}}/td/tr/table/div
scriptnew Vue({el:#app,//遍历对象数值data: {computers:[{id:1001,brand:华为,price: 7800}, {id:1002,brand:联想 ,price:8900}, {id:1003,brand:苹果,price:13000}]}})/script/body
/html八. Vue如何实现事件驱动
语法 v-on:事件类型“函数调用” 案例实现单击事件和change事件 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcvue.js/script
/head
bodydiv idapp!-- 单击事件 --input typebutton value按钮 v-on:clickclickTest(10,java)br!-- change事件 --input typetext v-on:changechangeTest/div
scriptnew Vue({el:#app,data:{},methods:{clickTest:function (a,b) {alert(这是vue绑定并测试的单击事件)alert(传入的值:a\tb)},changeTest:function () {alert(这是vue绑定并测试的change事件)}}})/script/body
/html注意
上述事件驱动的语法可这样简写 v-on:click“clickTest” clickclickTest 下面的methods里的自定义函数可这样简写不常用 clickTest:function (a,b) {alert(这是vue绑定并测试的单击事件)alert(传入的值:a\tb)}clickTest(){alert(点击事件绑定成功)
}九. Vue如何实现取消控件默认行为
9.1 什么是控件默认行为
控件的默认行为指的是
点击超链接跳转页面点击表单提交按钮提交表单
9.2 超链接与表单取消控件默认行为
语法 js:event.preventDefault(); //取消控件的默认行为 Vue:click.prevent“clickTest” //100%取消 案例模拟实现超链接与表单取消控件默认行为 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcvue.js/script
/head
bodydiv idappa hrefhttps://www.baidu.com/ clickclickTest跳转至百度/aform actionhelloworld.html methodget submit.preventsubmitTest input typetext nameusernameinput typesubmit /form
/div
scriptnew Vue({el:#app,data:{},methods:{clickTest:function () {//如果你不根让超链接进行跳转alert(将要跳转至百度)//取消控件的默认行为event.preventDefault();},submitTest:function () {//如果你不根让超链接进行跳转alert(将要提交表单)//取消控件的默认行为// event.preventDefault();}}})/script/body
/html十. Vue如何实现阻止事件冒泡
10.1 关于事件修饰符 Vue事件修饰符是Vue提供的一种语法糖用于简化事件处理程序的编写。事件修饰符是在事件后面添加的特殊后缀用于改变事件的行为。 常见的事件修饰符有以下几种
.stop阻止事件冒泡.prevent阻止默认事件.capture事件捕获阶段触发事件处理程序.self只有在事件的目标元素上触发事件才会触发事件处理程序.once只触发一次事件处理程序.passive告诉浏览器不需要阻止默认事件以提高性能
10.2 什么是事件冒泡 指在 HTML 元素嵌套的结构中当一个事件被触发时它会从最内层的元素开始逐层向外传递直到传递到最外层的元素为止。在这个过程中如果某个元素绑定了事件处理函数它就会被调用执行。 例如当用户在一个按钮上点击鼠标时click 事件就会被触发并且会从按钮元素开始沿着层次结构向外传递直到传递到整个文档的最外层。在传递的过程中任何绑定了 click 事件的元素都会被调用执行相应的事件处理函数。
10.3 如何实现阻止事件冒泡
语法
js:event.stopPropagation(); //阻止事件冒泡
vue:click.stopdiv2Test案例模拟实现阻止事件冒泡 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcvue.js/scriptstyle#div1{border: 2px solid red;width: 300px;height: 300px;}#div2{border: 2px solid blue;width: 150px;height: 150px;}/style
/head
bodydiv idappdiv iddiv1 clickdiv1Testdiv iddiv2 click.stopdiv2Test/div/div/div
scriptnew Vue({el:#app,data:{},methods:{div1Test:function () {alert(点击了大红框);},div2Test:function () {//发生了事件冒泡即点中了小蓝框小蓝框的单击事件于大红框的单击事件先后触发alert(点击了小蓝框);//现有需求点击小蓝框只触发小蓝框的单击事件//js的原生阻止方法// event.stopPropagation();}}})/script/body
/html十一. Vue如何进行属性的侦听
释义 属性侦听是指在Vue实例中监听某个属性的变化当属性发生变化时执行相应的操作。 功能 当数据模型的值放生变化时被Vue监听到然后执行一个函数 案例尊姓和大名后面的文本要随着用户输入的值变化而变化且全名中的文本也要一起变化 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcvue.js/script
/head
bodydiv idappp尊姓:{{firstname}}/p
p大名:{{lastname}}/pinput typetext v-modelfirstnamebr
input typetext v-modellastnamep全名:{{fullname}}/p
/div
scriptnew Vue({el:#app,data:{firstname:本,lastname:拉登,fullname:本.拉登},methods:{},watch:{firstname: function () {this.fullnamethis.firstname.this.lastname;},lastname: function () {this.fullnamethis.firstname.this.lastname;}}})/script/body
/html十二. Vue的生命周期
Vue生命周期详细图解如下 ①官网版 ②中文图解版 对象的创建前beforeCreate 对象的创建后created 渲染挂载前beforeMount 渲染挂载后mounted 修改前beforeUpdate 修改后updated 销毁前beforeDestroy 销毁后Destroy 十三. 钩子函数
功能 让开发者在vue的生命周期阶段执行自定义函数 位置 和el/data/methods/watch同级别 案例创建自定义函数模拟演示beforeCreatecreatedbeforeMountmounted这四种生命周期的状态 代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcvue.js/script
/head
bodydiv idappdiv iddiv01{{msg}}/div/div
scriptnew Vue({el:#app,data:{msg:这是div中的内容},methods:{fun01:function () {console.log(这是fun01函数);}},beforeCreate:function () {console.log(vue对象初始化前执行...);console.log(this.msg);//没有this.fun01();//报错},created:function () {console.log(vue对象初始化后执行...);console.log(this.msg);//有值this.fun01();//可以调用到},beforeMount:function () {console.log(vue对象渲染前执行...);console.log(document.getElementById(div01).innerText);//{{msg}}},mounted:function () {console.log(vue对象渲染后执行...);console.log(document.getElementById(div01).innerText);//这是div中的内容}})/script/body
/html十四. 综合案例Vue版动态表格 案例需求 ① 创建一个table初始化员工的一些信息(编号、姓名、年龄、专业等) ② 创建一个表单用户输入员工的信息 ③ 表单中创建添加按钮点击添加按钮输入的员工信息追加到表格内 ④ 每条员工信息后都有一个删除的超链接点击删除删除当前员工信息 案例图解 案例代码演示如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue实现动态表格/titlescript srcvue.js/script
/head
bodydiv idapptable border1 cellspacing0px width250px aligncenter iduserstrth序号/thth用户/thth性别/thth操作/th/trtr v-forstudent in studentstd{{student.id}}/tdtd{{student.name}}/tdtd{{student.gender}}/tdtdinput typebutton value删除 clickdeleteUser /td/tr/tabletable border0 cellspacing0px width250px aligncenter idinputtrtd序号/tdtd colspan3input typetext v-model:valueid /td/trtrtd姓名/tdtd colspan3input typetext v-model:valuename /td/trtrtd性别/tdtd colspan3input typetext v-model:valuegender /td/trtrtd colspan4 aligncenterinput typebutton value添加用户 clickaddUser/td/tr/table
/div
scriptnew Vue({el:#app,data:{students:[{id:1,name:张三,gender:男,},{id:2,name:李四,gender:女},{id:3,name:王五,gender:男}],id:null,name:null,gender:null,},methods:{//删除用户deleteUser:function () {//event.target.parentNode -- 获取触发单击事件的按钮元素的父元素//event.target.parentElement -- 获取触发单击事件的按钮元素的父元素event.target.parentElement.parentElement.remove();},//思路将新添加的数据加入到data中students数组中即可addUser:function () {var data new Object();data.idthis.id;data.namethis.name;data.genderthis.gender;this.students.push(data);}}})/script/body
/html
