Vue 基础入门

一. Vue 基础(一) Vue 简介🔰Vue 是渐进式JavaScript框架。🔰官网文档：https://v2.cn.vuejs.org/v2/guide/🔰Vue是基于MVVM模式实现的一套框架（把页面分成Model、View 、ViewModel 三部分）。🔰MVVM的工作原理：当数据源发生变化时，会被ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model 数据源中(二) 第一个Vue程序导入开发版本的 Vue.js!--开发环境版本，包含了有帮助的命令行警告--scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"/script创建Vue实例对象，设置el属性和data属性scriptvarapp=newVue({el:"#apps",data:{message:"Hello Vue"}})/script使用简洁的模板语法把数据渲染到页面上divid="apps"{ { message}}/div(三) el: 挂载点🔰el是用来设置Vue实例挂载（管理）的元素🔰Vue会管理el选项命中的元素及其内部的后代元素🔰可以使用其他的选择器，但是建议使用ID选择器(el:"#apps"/ el:".apps"/ el:"div")🔰可以使用其他的双标签，不能使用HTML和BODYvarapp=newVue({el:"#app"})(四) data: 数据对象🔰Vue中用到的数据定义在data中🔰data中可以写复杂类型的数据🔰渲染复杂类型数据时，遵守js的语法即可🔰有多组数据时，用,隔开bodydivid="app"!-- 字符串 --{ { message}}!-- 对象 --h2{ {school.name}} { {school.mobile}}/h2!-- 数组 --li{ {campus[0]}}/li/div/bodyscriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"/scriptscriptvarapp=newVue({el:"#app",data:{// 字符串message:"Hello Vue",// 对象school:{name:"艾莉",mobile:"1234567"},// 数组campus:["北京小区","上海小区","新疆小区"]}})/script使用{ {}}获取到 data 内的数据，{ {}}可以书写数字，表达式，运算符号。(五) methods：方法🔰Vue中用到的方法定义在methods中🔰有多个方法时，用,隔开varapp=newVue({el:"#app",data:{content:0},methods:{方法名:function(){// 逻辑},dolt:function(){// 逻辑}}})二. 内置指令(一) v-text (内容绑定)🔰作用：设置标签的内容🔰默认写法会替换全部内容，使用差值表达式{ {}}可以替换指定内容h2v-text="message"大家好/h2若想部分替换，使用如下格式：h3北民大，{ {message}}/h3若想写逻辑代码，支持写表达式：h2v-text="message + '!'"大家好/h2h3北民大，{ {message + "!"}}/h3(二) v-html (html 结构绑定)🔰作用：设置元素的innerHTML🔰内容中有html元素结构会被解析为标签🔰v-text指令无论内容是什么，只会解析为文本🔰解析文本使用v-text，需要解析html结构使用v-html实例：pv-html="content"/pscriptvarapp=newVue({el:"#app",data:{content:"a href='#'人民/a"}})/script(三) v-show (显示切换 [修改display属性])🔰作用：根据表达值的真假，切换元素的显示状态🔰原理：修改元素的display属性，实现显示隐藏🔰指令后面的内容，最终都会解析为布尔值🔰值为true元素显示，值为false元素隐藏🔰数据改变之后，对应元素的显示状态会同步更新实例：根据表达值显示或隐藏元素!-- 为true，直接显示图片 --1imgsrc="./caocao.jpg"v-show="true"!-- 变量 isShow 的值为true，显示图片 --2imgsrc="./caocaos.jpg"v-show="isShow"!-- 表达式的值为true，显示图片 --3imgsrc="./caocao.jpg"v-show="age=18"（频繁切换，用v-show）(四) v-if (显示切换 [操作 dom 元素])🔰作用：根据表达值的真假，切换元素的显示状态🔰本质：通过操纵dom元素来切换显示状态🔰表达式的值为true，元素存在于dom树中；为false，从dom树中移除实例：根据表达值，移除或保留元素divv-if="isShow"我是人！/divdivv-if="temperature 35"好热呀！/div（一次性关闭，用v-if，如弹窗广告）(五) v-bind (属性绑定)🔰作用：设置元素的属性（如：src, title, class）🔰完整写法是v-bind:属性名img v-bind:src="imgSrc"🔰简写的话可以直接省略v- bind，只保留:属性名img :src="imgSrc"🔰需要动态的增删class建议使用对象的方式img v-bind:class="isActive?'active':''"// 建议使用以下方式img v-bind:class="{active:isActive}"(六) v-for (列表循环)🔰作用：根据数据生成列表结构🔰数组经常和v-for结合使用🔰语法是(item, index) in 数据🔰item 和 index 可以结合其他指令一起使用🔰数组长度的更新会同步到页面上，是响应式的实例：数组遍历，对象遍历，添加 / 移除 对象元素bodyspanid="app"inputtype="button"value="添加数据"@click="add"inputtype="button"value="移除数据"@click="remove"ulliv-for="(item, index) in arr":key="item.id"{ { index +1}} 学习专区 { { item }}/li/ulspanv-for="item in vegetables":title="item.name"{ { item.name }}/spandivv-for="index,key,value in user"{ { index }}-- { {key }} -- { {value}}/div/span/body(七) v-model (表单元素绑定)🔰作用：设置和获取表单元素的值（双向数据绑定）🔰绑定的数据会和表单元素值相关联🔰邦定的数据←→表单元素的值实例：输入内容和下面的内容同步更新bodydivid="app"inputv-model="massage"type="text"h2{ {massage}}/h2/div/bodyscriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"/scriptscriptvarapp=newVue({el:"#app",data:{massage:'艾莉'}})/script🔰为了方便用户输入的内容进行处理，vue为v-model指令提供了3个修饰符：修饰符作用示例.number转换为数值input v-model.number='age'/.trim去掉开始和结尾的空格input v-model.trim='age'/.lazy将 input 事件切换为 change 事件input v-model.lazy='age'/(八) v-on (事件绑定)🔰作用：为元素绑定事件，如click等；🔰事件名不需要写on；–v-on: 事件名="方法"v-on: click="dolt"🔰指令可以简写为@； --(v-on: click="dolt" -- @click="dolt")🔰绑定的方法定义在methods属性中；🔰方法内部通过this关键字可以访问定义在data中数据scriptvarapp=newVue({el:"#app",data:{food:"西红柿炒鸡蛋"},methods:{dolt:function(){this.food+="好好吃！"}}})/script1. 事件方法传参🔰事件绑定的方法写成函数调用的形式，可以传入自定义参数input type="button" @click="dolt(2, '古力')"🔰定义方法时需要定义形参来接收传入的实参dolt:function(p1, p2) { console.log(p1 + p2); }🔰事件的后面跟上.修饰符可以对事件进行限制🔰.enter可以限制触发的按键为回车input type="text" @keyup.enter="sayHi"bodydivid="app"inputtype="button"@click="dolt(2, '古力')"inputtype="text"@keyup.enter="sayHi"/div/bodyscriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"/scriptscriptvarapp=newVue({el:"#app",methods:{dolt:function(p1,p2){console.log(p1+p2);},sayHi:function(){alert('你好')}}})/script2. 事件修饰符🔰事件修饰符：是和事件连接起来决定事件的触发或者阻止stop:阻止事件冒泡 (给孩子添加，阻止冒泡)prevent:用于阻止标签的默认事件self:用来针对当前标签的事件触发 (给父亲添加，阻止孩子骚扰)once:只让事件执行一次!-- 阻止单击事件继续传播 --av-on:click.stop="doThis"/a!-- 提交事件不再重载页面 --formv-on:submit.prevent="onSubmit"/form!-- 修饰符可以串联 --av-on:click.stop.prevent="doThat"/a!-- 只有修饰符 --formv-on:submit.prevent/form!-- 添加事件监听器时使用事件捕获模式 --!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --divv-on:click.capture="doThis".../div!-- 只当在 event.target 是当前元素自身时触发处理函数 --!-- 即事件不是从内部元素触发的 --divv-on:click.self="doThat".../div!-- prevent:用于阻止标签的默认事件 --ahref