书店中文网站模板,wordpress 访问优化,备用网站域名,如何设置网站名字文章目录一、Vue基础1、第一个Vue程序2、el#xff1a;挂载点3、data#xff1a;数据对象二、模板语法1、v-once2、v-html3、v-bind4、v-text5、v-on三、计算属性和侦听器1、计算属性2、侦听器四、Class与Style绑定1、绑定HTML Class2、绑定内联样式五、条件渲染1、v-if2、v-…
文章目录一、Vue基础1、第一个Vue程序2、el挂载点3、data数据对象二、模板语法1、v-once2、v-html3、v-bind4、v-text5、v-on三、计算属性和侦听器1、计算属性2、侦听器四、Class与Style绑定1、绑定HTML Class2、绑定内联样式五、条件渲染1、v-if2、v-else3、v-else-if4、v-showv-if与v-show的区别六、列表渲染1、v-for七、表单输入绑定1、v-model八、组件基础1、基本示例2、通过 Prop 向子组件传递数据九、网络应用1、axios2、axiosvue一、Vue基础
1、第一个Vue程序
来自官方文档 引入Vue script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
声明式渲染
div idapp{{ message }}
/divvar app new Vue({el: #app,data: {message: Hello Vue!}
})2、el挂载点
Vue实例的作用范围 Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器 可以使用其他的选择器但是建议使用ID选择器
是否可以设置其他的dom元素 可以使用其他的双标签不能使用HTML和body
3、data数据对象
Vue中用到的数据定义在data中data中可以写复杂类型的数据渲染复杂类型数据时遵守js的语法即可
bodydiv idapp{{ message }}h2{{school.name}}{{school.mobile}}/h2ulli{{campus[0]}}/lili{{campus[1]}}/li/ul/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {message: Hello Vue!,school:{name:江西师范大学,mobile:123-321-9000},campus:[瑶湖校区,青山湖校区]}})/script
/body二、模板语法
1、v-once
使用 v-once 指令能执行一次性地插值当数据改变时插值处的内容不会更新
2、v-html
v-html指令的作用是设置元素的innerHTML内容中有html结构会被解析为标签v-text指令无论内容是什么只会解析为文本解析文本使用v-text需要解析html结构使用v-html
bodydiv idapph1{{ message }}/h1!-- 一次性插入不在修改 --h1 v-once{{ message }}/h1p{{ rawHtml }}/ppspan v-htmlrawHtml/span/p/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {message: Hello Vue!,rawHtml:span v-htmlrawHtmlhello/span}})/script
/body3、v-bind
v-bind指令的作用是为元素绑定属性完整写法是v-bind:属性名简写的话可以直接省略v-bind只保留:属性名需要动态的增删class建议使用对象的方式
bodydiv idapp!-- img v-bind:srcimgSrc alt --brimg :srcimgSrc stylewidth: 10em; alt :titleimgTitle !!!:class{active:isActive} clicktoggleActive/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {imgSrc:img/1.jpg,imgTitle:哈哈哈哈哈,isActive:false},methods: {toggleActive:function(){this.isActive !this.isActive;}},})/script
/body4、v-text
v-text指令的作用是设置标签的内容默认写法会替换全部内容使用插值表达式{{}}可以替换指定内容内部支持表达式
bodydiv idapph2 v-textmessage !test/h2h2 v-textinfo !test/h2h2{{message !}}test/h2/div!-- 开发环境版本包含了有帮助的命令行警告 --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar app new Vue({el:#app,data:{message:hello,info:This is v-text}})
/script
/body5、v-on
v-on指令的作用是为元素绑定事件事件名不需要写on指令可以简写为绑定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中的数据事件绑定的方法写成函数调用的形式可以传入自定义参数定义方法时需要定义形参来接收传入的实参事件的后面跟上.修饰符可以对事件进行限制.enter可以限制触发的按键为回车事件的修饰符有多种
事件修饰符 .stop .prevent .capture .self .once .passive
!-- 阻止单击事件继续传播 --
a v-on:click.stopdoThis/a!-- 提交事件不再重载页面 --
form v-on:submit.preventonSubmit/form!-- 修饰符可以串联 --
a v-on:click.stop.preventdoThat/a!-- 只有修饰符 --
form v-on:submit.prevent/form!-- 添加事件监听器时使用事件捕获模式 --
!-- 即内部元素触发的事件先在此处理然后才交由内部元素进行处理 --
div v-on:click.capturedoThis.../div!-- 只当在 event.target 是当前元素自身时触发处理函数 --
!-- 即事件不是从内部元素触发的 --
div v-on:click.selfdoThat.../div!-- 2.1.4 新增 点击事件将只会触发一次 --
a v-on:click.oncedoThis/a!-- 2.3.0 新增 滚动事件的默认行为 (即滚动行为) 将会立即触发 --
!-- 而不会等待 onScroll 完成 --
!-- 这其中包含 event.preventDefault() 的情况 --
div v-on:scroll.passiveonScroll.../div注意使用修饰符时顺序很重要相应的代码会以同样的顺序产生。因此用 v-on:click.prevent.self 会阻止所有的点击而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
!-- 只有在 key 是 Enter 时调用 vm.submit() --
input v-on:keyup.entersubmit!-- 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 --
input v-on:keyup.page-downonPageDown
按键码 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
系统修饰键 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 .ctrl .alt .shift .meta
.exact修饰符 .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
!-- 即使 Alt 或 Shift 被一同按下时也会触发 --
button v-on:click.ctrlonClickA/button!-- 有且只有 Ctrl 被按下的时候才触发 --
button v-on:click.ctrl.exactonCtrlClickA/button!-- 没有任何系统修饰符被按下的时候才触发 --
button v-on:click.exactonClickA/buttonbodydiv idappinput typebutton valuev-on指令 v-on:clickdoTestinput typebutton valuev-on简写 clickdoTestinput typebutton value双击事件 dblclickdoTesth2 clickchangeFood{{food}}/h2/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data:{food:西瓜},methods: {doTest:function(){alert(v-on指令);},changeFood:function(){this.food 好好吃}},})/script
/body三、计算属性和侦听器
1、计算属性
计算属性会将计算的结果进行缓存
bodydiv idexamplep{{ message }}/pp{{ reversedMessage }}/p/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar vm new Vue({el: #example,data: {message: Hello},computed: {// 计算属性的 getterreversedMessage: function () {// this 指向 vm 实例,会将计算的结果进行缓存return this.message.split().reverse().join()}}})/script
/body2、侦听器
Vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时这个方式是最有用的。
bodydiv idapp{{ message }}ulli v-foritem in arr{{item}}/li/ul/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {message: Hello Vue!,arr:[小明,小红,小军]},computed: {},watch: {message:function(val){console.log(监听事件~~~~~~~);console.log(val);},arr:function(val){console.log(val);}},})/script
/body四、Class与Style绑定
1、绑定HTML Class
bodydiv idapp!-- 通过对象的方式决定是否存在某个类 --div classstatic :class{ active: isActive}/div!-- 直接放置对象 --div v-bind:classclassObject/div!-- 放置数组 --div v-bind:class[activeClass, errorClass]/div/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {isActive: true,classObject:{active:true},activeClass: active,errorClass: text-danger}})/script
/body2、绑定内联样式
五、条件渲染
1、v-if
v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过操纵dom元素来切换显示状态表达式的值为true元素存在于dom树中为false从dom移除
2、v-else
可以使用 v-else 指令来表示 v-if 的else 块 v-else-if
3、v-else-if
顾名思义充当 v-if 的else-if 块可以连续使用 注意 v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面否则它将不会被识别。
bodydiv idappinput typebutton value切换显示 clicktoggleIsShowinput typebutton value切换选项显示 clickABIsShowh1 v-ifawesomeVue is awesome!/h1h1 v-elseOh no /h1br/h3 v-iftype AA/h3h3 v-else-iftype BB/h3/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data:{awesome:true,type:A,},methods: {toggleIsShow:function(){this.awesome !this.awesome;},ABIsShow:function(){this.type (this.type A) ? B: A}},})/script
/body4、v-show
v-show指令的作用是根据真假切换元素的显示状态原理是修改元素的display实现显示隐藏指令后面的内容最终都会解析为布尔值。值为true元素显示值为false元素隐藏数据改变之后对应元素的显示状态会同步更新 注意 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
bodydiv idappinput typebutton value切换显示状态 clickchangeIsShowinput typebutton value切换图片 clickchangeImgimg v-showisShow :srcimgUrl alt/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el:#app,data:{isShow:false,imgUrl:img/1.jpg},methods: {changeIsShow:function(){this.isShow !this.isShow},changeImg:function(){if(this.imgUrl img/1.jpg)this.imgUrl img/2.jpgelsethis.imgUrl img/1.jpg}},})/script
/bodyv-if与v-show的区别
v-if:不显示时第一次就直接不渲染如果内容已经显示将其改为不显示将内容直接从dom去除
v-show:不显示时就会改为display:none但是会渲染在dom上
频繁的切换v-show反之使用v-if前者的切换消耗小六、列表渲染
1、v-for
v-for指令的作用是根据数据生成列表结构数组经常和v-for结合使用语法是(item,index) in 数据item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上是响应式的
bodydiv idappulli v-for(it,index) in arr{{ index 1}}城市:{{ it }}/li/ulh2 v-foritem in vegetables v-bind:titleitem.name{{ item.name }}/h2/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {arr:[北京,上海,深圳],vegetables:[{name:番茄},{name:西红柿}]}})/script
/body七、表单输入绑定
1、v-model
v-model指令的作用是便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联绑定的数据–表单元素的值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单输入绑定/title
/head
bodydiv idapp!-- 文本 --input v-modelmessage placeholderedit mepMessage is: {{ message }}/pbr!-- 多行文本 --textarea v-modelmessages placeholder多行文本/textareabrspanMultiline message is:/spanp stylewhite-space: pre-line;{{ messages }}/pbr!-- 单个复选框 --input typecheckbox idcheckbox v-modelcheckedlabel forcheckbox{{ checked }}/labelbrbr!-- 多个复选框 --input typecheckbox idjack valueJack v-modelcheckedNameslabel forjackJack/labelinput typecheckbox idjohn valueJohn v-modelcheckedNameslabel forjohnJohn/labelinput typecheckbox idmike valueMike v-modelcheckedNameslabel formikeMike/labelbrspanChecked names: {{ checkedNames }}/spanbrbr!-- 单选按钮 --div idexample-4input typeradio idone valueOne v-modelpickedlabel foroneOne/labelbrinput typeradio idtwo valueTwo v-modelpickedlabel fortwoTwo/labelbrspanPicked: {{ picked }}/span/div!-- 单选 --div idexample-5select v-modelselectedoption disabled value请选择/optionoptionA/optionoptionB/optionoptionC/option/selectspanSelected: {{ selected }}/span/divbrbr!-- 多选 --!-- div idexample-6select v-modelselected multiple stylewidth: 50px;optionA/optionoptionB/optionoptionC/option/selectbrspanSelected: {{ selecteds }}/span/div --/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptvar app new Vue({el: #app,data: {message: Tsundere,messages: tsundere,checked: false,checkedNames:[],selected: ,picked: ,selecteds:[]},})/script
/body
/html八、组件基础
1、基本示例
// 定义一个名为 button-counter 的新组件
Vue.component(button-counter, {data: function () {return {count: 0}},template: button v-on:clickcountYou clicked me {{ count }} times./button
})组件是可复用的 Vue 实例且带有一个名字在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中把这个组件作为自定义元素来使用
div idcomponents-demobutton-counter/button-counter
/divnew Vue({ el: #components-demo })注意data必须是一个函数
2、通过 Prop 向子组件传递数据
注意每个组件必须只有一个根元素
body!-- 基本示例 --div idcomponents-demobutton-counter/button-counter/divhrdiv idblog-post-demoblog-post v-forpost in posts :keypost.id :titlepost.title /blog-post/divhr!--通过 Prop 向子组件传递数据 监听子组件事件--div idpostdiv :style{ fontSize: postFontSize em }!-- 父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件 --!-- 使用事件抛出一个值,通过 $event 访问到被抛出的这个值 --blog v-forpost in posts :postpost v-on:enlarge-textpostFontSize $event/blog/div/div hr!-- 在组件上使用v-model --div idtextcustom-input v-modelsearchText/custom-inputp{{searchText}}/p/divhrdiv idalertalert-box/alert-box/divhr!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscript// 定义一个名为 button-counter 的新组件Vue.component(button-counter, {data: function () {return {count: 0}},template: button v-on:clickcountYou clicked me {{ count }} times./button})new Vue({el: #components-demo})// 定义一个名为blog-post的组件Vue.component(blog-post, {props: [title],template: h3{{ title }}/h3})new Vue({el: #blog-post-demo,data:{posts: [{ id: 1, title: My journey with Vue },{ id: 2, title: Blogging with Vue },{ id: 3, title: Why Vue is so fun }]}})// 定义一个名为post的组件// 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件Vue.component(blog,{props:[post],template:div classblog-post\p{{ post.title }}/p\button v-on:click$emit(\enlarge-text\,0.1)\Enlarge text\/button\div v-htmlpost.content/div\/div})new Vue({el:#post,data:{posts:[{ id: 1, title: My journey with Vue,content:123 },{ id: 2, title: Blogging with Vue ,content:456 },{ id: 3, title: Why Vue is so fun,content:789 }],postFontSize:1}})Vue.component(custom-input, {props: [value],template: input:valuevalueinput$emit(input, $event.target.value)})new Vue({el:#text,data:{searchText:}})Vue.component(alert-box, {template: div classdemo-alert-boxstrongError!/strongslot/slot/div})new Vue({el:#alert})/script
/body
九、网络应用
1、axios
axios必须先导入才可以使用使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容或错误信息
官网地址https://github.com/axios/axios
2、axiosvue
axios回调函数中的this已经改变无法访问到data中数据把this保存起来回调函数中直接使用保存的this即可
