建网站怎么弄,大学院系网站建设,免费建站有哪些,营销型网站的缺点文章目录 #x1f4da;Vue简介#x1f4da;初识Vue#x1f4da;模板语法#x1f4da;数据绑定#x1f4da;MVVM模型#x1f4da;数据代理#x1f407;回顾Object.defineproperty方法#x1f407;何为数据代理#x1f407;Vue中的数据代理 #x1f4da;事件处理#… 文章目录 Vue简介初识Vue模板语法数据绑定MVVM模型数据代理回顾Object.defineproperty方法何为数据代理Vue中的数据代理 事件处理事件的基本使用事件修饰符键盘事件 计算属性与监视计算属性姓名案例监视属性天气案例computed vs watch 学习链接尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通本文对应p1-p25博客参考尚硅谷公开笔记补充记录实操。 Vue简介
英文官网中文官网 初识Vue
关于官网与视频p3已略有出入文档指南API查字典互动指南示例…Vue开发者工具安装 vscode插件安装提效 想让Vue工作就必须创建一个Vue实例且要传入一个配置对象root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法root容器里的代码被称为Vue模板Vue实例和容器是一一对应的容器设置好模板实例给定数据真实开发中只有一个Vue实例并且会配合着组件一起使用{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title初识Vue/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器 --div idrooth1Hello{{name.toUpperCase()}}{{address}}/h1/divscript typetext/javascript //阻止 vue 在启动时生成生产提示。Vue.config.productionTip false //创建Vue实例new Vue({//el用于指定当前Vue实例为哪个容器服务这里用id选择器绑定其他选择器也一样el:#root, //data存储数据数据供el所指定的容器去使用//值我们暂时先写成一个对象。data:{name:lalayouyi,address:你好呀}})/script/body
/html模板语法
⭐️插值语法 功能用于解析标签体内容。写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。 ⭐️指令语法 功能用于解析标签包括标签属性、标签体内容、绑定事件…。举例v-bind:hrefxxx 或 简写为 :hrefxxx不是都可以简写xxx同样要写js表达式且可以直接读取到data中的所有属性。备注Vue中有很多的指令且形式都是v-???此处我们只是拿v-bind举个例子。 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title模板语法/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1插值语法/h1h3你好{{name}}/h3hr/h1指令语法/h1a v-bind:hrefblog.url.toUpperCase()点我去{{blog.name}}学习1/abra :hrefblog.url点我去{{blog.name}}学习2/a/div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false new Vue({el:#root,data:{name:lalayouyi,blog:{name:csdn,url:https://blog.csdn.net/m0_63398413,}}})/script
/html数据绑定
单向绑定(v-bind)数据只能从data流向页面。双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。 双向绑定一般都应用在表单类元素上如input、select等。v-model:value可以简写为 v-model因为v-model默认收集的就是value值。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title数据绑定/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot!-- 普通写法 --!-- 单向数据绑定input typetext v-bind:valuenamebr/双向数据绑定input typetext v-model:valuenamebr/ --!-- 简写 --单向数据绑定input typetext :valuenamebr/双向数据绑定input typetext v-modelnamebr/!-- 如下代码是错误的因为v-model只能应用在表单类元素输入类元素上 --!-- h2 v-model:xname你好啊/h2 --/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:lalayouyi}})/script
/html⭐️data与el的2种写法
el有2种写法 (1).new Vue时候配置el属性。(2).先创建Vue实例随后再通过vm.$mount(#root)指定el的值。 data有2种写法 (1).对象式(2).函数式如何选择目前哪种写法都可以以后学习到组件时data必须使用函数式否则会报错。 一个重要的原则由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleel与data的两种写法/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1你好{{name}}/h1/div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false //el的两种写法/* const v new Vue({//el:#root, //第一种写法data:{name:lalayouyi}})console.log(v)v.$mount(#root) //第二种写法 *///data的两种写法new Vue({el:#root,//data的第一种写法对象式/* data:{name:lalayouyi} *///data的第二种写法函数式data(){console.log(,this) //此处的this是Vue实例对象return{name:lalayouyi}}})/script
/htmlMVVM模型
M模型(Model) data中的数据。V视图(View) 模板代码。VM视图模型(ViewModel)Vue实例。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title理解MVVM/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth1博客昵称{{name}}/h1h1博客作者{{owner}}/h1!-- 所有出现在vue原型上的都可以 --h1测试一下1{{11}}/h1h1测试一下2{{$options}}/h1h1测试一下3{{$emit}}/h1h1测试一下4{{_c}}/h1/div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false // 在文档中经常会使用vm表示Vue实例const vm new Vue({el:#root,data:{name:啦啦右一,owner:右一,}})console.log(vm)/script
/html观察发现 data中所有的属性最后都出现在了vm身上。 vm身上所有的属性 及 Vue原型上所有属性在Vue模板中都可以直接使用。
数据代理
回顾Object.defineproperty方法
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title回顾Object.defineproperty方法/title/headbodyscript typetext/javascript let person {name:张三,sex:男,}Object.defineProperty(person,age,{value:18,enumerable:true, //控制属性是否可以枚举默认值是falsewritable:true, //控制属性是否可以被修改默认值是falseconfigurable:true, //控制属性是否可以被删除默认值是false})/script/body
/html!DOCTYPE html
htmlheadmeta charsetUTF-8 /title回顾Object.defineproperty方法/title/headbodyscript typetext/javascript let number 18let person {name:张三,sex:男,}Object.defineProperty(person,age,{//当有人读取person的age属性时get函数(getter)就会被调用且返回值就是age的值get(){console.log(有人读取age属性了)return number},//当有人修改person的age属性时set函数(setter)就会被调用且会收到修改的具体值set(value){console.log(有人修改了age属性且值是,value)number value}})/script/body
/html何为数据代理
数据代理通过一个对象代理对另一个对象中属性的操作读/写)
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title何为数据代理/title/headbodyscript typetext/javascript let obj {x:100}let obj2 {y:200}Object.defineProperty(obj2,x,{get(){return obj.x},set(value){obj.x value}})/script/body
/htmlVue中的数据代理
Vue中的数据代理通过vm对象来代理data对象中属性的操作读/写。Vue中数据代理的好处更加方便的操作data中的数据。基本原理 通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作读/写data中对应的属性。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVue中的数据代理/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2学校名称{{name}}/h2h2学校地址{{address}}/h2/div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false const vm new Vue({el:#root,data:{name:尚硅谷,address:宏福科技园}})/script
/html事件处理
事件的基本使用
使用v-on:xxx或xxx绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最终会在vm上methods中配置的函数不要用箭头函数否则this就不是vm了methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象clickdemo和clickdemo($event)效果一致但后者可以传参
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件的基本使用/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2你好呀我是{{name}}/h2button v-on:clickshowInfo点我提示信息/buttonbutton clickshowInfo1点我提示信息1不传参/buttonbutton clickshowInfo2($event,66)点我提示信息2传参/button/div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false const vm new Vue({el:#root,data:{name:啦啦右一,},methods:{showInfo(){alert(你好)},showInfo1(event){console.log(event.target.innerText)console.log(this) //此处的this是vmalert(同学你好)},showInfo2(event,number){console.log(event,number)console.log(event.target.innerText)console.log(this) //此处的this是vmalert(同学你好)}}})/script
/html事件修饰符
prevent阻止默认事件常用stop阻止事件冒泡常用once事件只触发一次常用capture使用事件的捕获模式self只有event.target是当前操作的元素时才触发事件passive事件的默认行为立即执行无需等待事件回调执行完毕修饰符可以连续写。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件修饰符/title!-- 引入Vue --script typetext/javascript src../js/vue.js/scriptstyle*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: pink;overflow: auto;}li{height: 100px;}/style/headbody !-- 准备好一个容器-- div idrooth2欢迎来到{{name}}学习/h2!-- 阻止默认事件常用 --a hrefhttp://www.atguigu.com click.preventshowInfo点我提示信息/a!-- 阻止事件冒泡常用 --div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button!-- 修饰符可以连续写 --!-- a hrefhttp://www.atguigu.com click.prevent.stopshowInfo点我提示信息/a --/div!-- 事件只触发一次常用 --button click.onceshowInfo点我提示信息/button!-- 使用事件的捕获模式先捕获后冒泡 --div classbox1 click.captureshowMsg(1)div1div classbox2 clickshowMsg(2)div2/div/div!-- 只有event.target是当前操作的元素时才触发事件 --div classdemo1 click.selfshowInfobutton clickshowInfo点我提示信息/button/div!-- 事件的默认行为立即执行滚动条先往下走再跑循环无需等待事件回调执行完毕 --ul wheel.passivedemo classlistli1/lili2/lili3/lili4/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷},methods:{showInfo(e){alert(同学你好)console.log(e.target)},showMsg(msg){console.log(msg)},demo(){for (let i 0; i 100000; i) {console.log(#)}console.log(累坏了)}}})/script
/html实操出真知 键盘事件
Vue中常用的按键别名 回车 enter删除 delete (捕获“删除”和“退格”键)退出 esc空格 space换行 tab (特殊必须配合keydown去使用)上 up下 down左 left右 right Vue未提供别名的按键可以使用按键原始的key值去绑定但注意要转为kebab-case短横线命名系统修饰键用法特殊ctrl、alt、shift、meta 配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发。配合keydown使用正常触发事件。总结来说keydown事件在按下键盘按键时触发keyup事件在释放键盘按键时触发。 也可以使用keyCode去指定具体的按键不推荐Vue.config.keyCodes.自定义键名 键码可以去定制按键别名。keyup.ctrl.y意思是ctrl和y一起按的时候触发。
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title键盘事件/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2!-- input typetext placeholder按下回车提示输入 keydown.entershowInfo --input typetext placeholder按下回车提示输入 keydown.huicheshowInfo/div/bodyscript typetext/javascript//阻止vue在启动时生成生产提示。Vue.config.productionTip false Vue.config.keyCodes.huiche 13 //定义了一个别名按键new Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(e){// 输出按键名字和编码// console.log(e.key,e.keyCode)console.log(e.target.value)}},})/script
/html计算属性与监视
计算属性姓名案例 ⭐️插值语法实现 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_插值语法实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot!-- v-model双向绑定 --姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{firstName}}-{{lastName}}/span/div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false new Vue({el:#root,data:{firstName:张,lastName:三}})/script
/html⭐️methods实现 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_methods实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName()}}/span/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{firstName:张,lastName:三},methods: {fullName(){console.log(---fullName)return this.firstName - this.lastName}},})/script
/html⭐️计算属性实现 定义要用的属性不存在要通过已有属性计算得来。配置方法computed:{}原理底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行 初次读取时会执行一次。当依赖的数据发生改变时会被再次调用。 优势与methods实现相比内部有缓存机制复用多个fullName调用一次get效率更高调试方便。备注 计算属性最终会出现在vm上直接读取使用即可。如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变。 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_计算属性实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascript//阻止vue在启动时生成生产提示。Vue.config.productionTip false const vm new Vue({el:#root,data:{firstName:张,lastName:三},computed:{fullName:{//get有什么作用当有人读取fullName时get就会被调用且返回值就作为fullName的值//get什么时候调用1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log(get被调用了)// console.log(this) //此处的this是vmreturn this.firstName - this.lastName},//set什么时候调用? 当fullName被修改时。set(value){console.log(set,value)const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}}}})/script
/html⭐️计算属性简写 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_计算属性实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false const vm new Vue({el:#root,data:{firstName:张,lastName:三,},computed:{//简写确定只读不改的时候即只有set忽略时才能简写fullName(){console.log(get被调用了)return this.firstName - this.lastName}}})/script
/html监视属性天气案例 ⭐️天气案例实现 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title天气案例/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2今天天气很{{info}}/h2!-- 绑定事件的时候xxxyyy yyy可以写一些简单的语句 --!-- button clickisHot !isHot切换天气/button --button clickchangeWeather切换天气/button/div/bodyscript typetext/javascript//阻止vue在启动时生成生产提示。Vue.config.productionTip false const vm new Vue({el:#root,data:{isHot:true,},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},})/script
/html⭐️监视属性watch 当被监视的属性变化时, 回调函数自动调用, 进行相关操作。监视的属性必须存在才能进行监视watch和handler通常是配套使用的。watch用于观察监视数据的变化一旦数据发生变化就会触发对应的handler函数来执行相应的操作。监视的两种写法 new Vue时传入watch配置通过vm.$watch监视 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title天气案例_监视属性/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{isHot:true,},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},/* watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}} */})vm.$watch(isHot,{immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}})/script
/html⭐️深度监视 Vue中的watch默认不监测对象内部值的改变一层。配置deep:true可以监测对象内部值改变多层。备注 Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以使用watch时根据数据的具体结构决定是否采用深度监视。 !DOCTYPE html
htmlheadmeta charsetUTF-8 /title天气案例_深度监视/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idrooth2今天天气很{{info}}/h2button clickchangeWeather切换天气/buttonhr/h3a的值是:{{numbers.a}}/h3button clicknumbers.a点我让a1/buttonh3b的值是:{{numbers.b}}/h3button clicknumbers.b点我让b1/buttonbutton clicknumbers {a:666,b:888}彻底替换掉numbers/button/div/bodyscript typetext/javascript//阻止vue在启动时生成生产提示。Vue.config.productionTip false const vm new Vue({el:#root,data:{isHot:true,numbers:{a:1,b:1,}},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},watch:{isHot:{// immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}},//监视多级结构中某个属性的变化numbers.a:{handler(){console.log(a被改变了)}},//监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log(numbers改变了)}}}})/script
/html⭐️监视属性简写前提是除handler之外没有额外的属性要求 watch:{//正常写法isHot:{// immediate:true, //初始化时让handler调用一下// deep:true,//深度监视handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}, //简写isHot(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)}
}//正常写法
vm.$watch(isHot,{immediate:true, //初始化时让handler调用一下deep:true,//深度监视handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}
}) //简写
vm.$watch(isHot,function(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)
}) computed vs watch
computed能完成的功能watch都可以完成。watch能完成的功能computed不一定能完成例如watch可以进行异步操作。两个重要的小原则 所有被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象。所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数这样this的指向才是vm 或 组件实例对象。 ⭐️姓名案例的watch实现!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_watch实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascript//阻止 vue 在启动时生成生产提示。Vue.config.productionTip false const vm new Vue({el:#root,data:{firstName:张,lastName:三,fullName:张-三},watch:{firstName(val){// 延迟setTimeout((){console.log(this)this.fullName val - this.lastName},1000);},lastName(val){this.fullName this.firstName - val}}})/script
/html
