建设银信用卡网站首页深圳网站建设推荐

当前位置： 首页 > news >正文

建设银信用卡网站首页,深圳网站建设推荐,原创wordpress改成英文,珠海建网站该笔记是记录尚硅谷的Vue学习视频的笔记#xff0c;视频地址为#xff1a;学习视频地址 初始Vue Vue组件化的特点 组件化声明式编码虚拟DOMDiff算法#xff0c;尽量复用DOM节点 H5的组件#xff0c;是把某一个模块封装#xff0c;里面写HTML\CSS\JS等#xff0c;算是一… 该笔记是记录尚硅谷的Vue学习视频的笔记视频地址为学习视频地址 初始Vue Vue组件化的特点 组件化声明式编码虚拟DOMDiff算法尽量复用DOM节点 H5的组件是把某一个模块封装里面写HTML\CSS\JS等算是一个页面里面的某个模块。在移动端可能算是一个单独的view 移动端的组件指的是将某些功能类似或者业务封装为组件 脚手架即是一种安装Vue的方法 创建Vue实例 var vueName new Vue() Vue创建后需不需要传递参数传几个参数 只传一个参数并且该参数是一个对象类型对象类型使用{}该对象被称为配置对象 配置对象里面是key: value的形式 key是约定好的不能修改 value可以改但是value的类型不能改 div idapph2学校:{{schoolName}}/h2p年龄:{{age}}/p /divvar vueName new Vue({el:#app//el用于指定当前Vue实例为哪个容器服务data:{//data中用于存储数据数据供el所指定的容器去使用schoolName:Vue一中,age: 18} })el: #root el是element的简称 #app是一个id选择器 作用是将Vue创建的实例与div容器建立链接 Vue实例和容器是一一对应 模板语法 Vue模板语法有2大类 插值语法双大括号表示 功能用于解析标签体内容 语法{{xxx}}xxx是js表达式且可以直接读取到data中所有属性。指令语法v-开头 功能用于解析标签包括标签属性、标签体内容、绑定事件… 举例v-bind:hrefxxx 或者 简写为 :hrefxxxxxx同样要写js表达式且可以直接读取到data中所有属性 a hrefurl链接地址/a 这样a标签的url地址仅仅就是“url”字符串 a v-bind:hrefurl链接地址/a 使用v-bind会将url字符串看成表达式执行替换为data里面的key为url的value值 在控制台可以看到上面的代码转换为 a hrefhttps://www.baidu.com链接地址/a v-bind会将原来的字符串当做表达式去执行 Vue中有2种数据绑定的方式 v-bind是单向绑定数据只能从data流向页面 v-model是双向绑定 v-model只能应用在表单元素输入类元素上 el与data的两种写法 el 方法一el:#app 方法二vueName.\(mount(#app) data 方法一对象式 data:{//data中用于存储数据数据供el所指定的容器去使用schoolName:Vue一中,age: 18,url: https://www.baidu.com }方法二函数式 data:function(){//data中用于存储数据数据供el所指定的容器去使用return{schoolName:Vue一中,age: 18,url: https://www.baidu.com} }可简写为 data(){//data中用于存储数据数据供el所指定的容器去使用return{schoolName:Vue一中,age: 18,url: https://www.baidu.com} }MVVM模型 M模型Modeldata中的数据 V视图View模板代码 VM视图模型ViewModelVue实例 data中所有的属性最后都出现在了vm身上 vm身上所有的属性及Vue原型上所有属性在Vue模板中都可以直接使用 数据代理 defineProperty动态添加一个属性 let person {name: 张三,sex: 男}//需要三个值要加属性的对象要加属性的名字要加属性的值配置项Object.defineProperty(person, age, {value: 18})console.log(person);//{name: 张三, sex: 男, age: 18}数据代理通过一个对象代理对另一个对象中属性的操作读/写 主要是通过 get、set方法实现 事件绑定 使用v-on:xxx或者xxx 绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最终会在vm上methods中配置的函数不要使用箭头函数否则this就不是vm了methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象click demo 和 click demo(\)event) 效果一致但后者可以传参 传参只需要在方法后面加()即可 如果click后面跟的调用函数没有写()则函数的实现里面有默认参数event 如果()有自定义参数则没有event想要event则 需要写上参数 $event Vue中的事件修饰符 prevent阻止默认事件常用stop阻止事件冒泡常用once事件只触发一次常用capture使用事件的捕获模式self只有event.target是当前操作的元素时才触发事件passive事件的默认行为立即执行无需等待事件回调执行完毕 a hrefhttps://www.baidu.com click.preventshowInfo这是链接地址/a a hrefhttps://www.baidu.com click.onceshowInfo这是链接地址/a键盘事件 keydown 键盘按键按下 keyup 键盘按键松手 Vue中常用的按键别名 回车 enter 删除 delete 退出 esc 空格 space 换行 tab 上 up 下 down 左 left 右 right 计算属性 在引入计算属性之前先看几个不用计算属性的例子慢慢引出 计算属性 需求 分别输入姓和名字最后组合成姓名 插值法 即使用{{}} div idapp!– v-model双向绑定 –姓input typetext v-model:valuefirstNamebr!– v-model:value 可简写为 v-model –姓input typetext v-modelfirstNamebr名input typetext v-modellastNamebr全名span{{firstName - lastName}}/spanbr!– 或者 –全名span{{firstName}}-{{lastName}}/spanbr!– 不管输入几位姓只要前三位 –全名span{{firstName.slice(0, 3)}}-{{lastName}}/spanbr/divscript typetext/javascriptvar vueName new Vue({el:#app,data:{firstName: 张,lastName: 三}})/script 在firstName.slice(0, 3)里面仅仅是截取前三位的需求如果里面还有各种sao操作那{{}}里面要写的代码太多了因此可以写到一个methods里面 使用methods方法 div idapp全名span4{{fullName()}}/spanbr/divvar vueName new Vue({el:#app,data:{firstName: 张,lastName: 三},methods:{fullName(){return this.firstName - this.lastName;}}})计算属性 什么是属性 对于Vue来说data里面的数据都是属性 计算属性 要用的属性不存在要通过已有属性计算得来 拿现有的属性去加工、计算生成一个全新的属性 计算属性不放在data里面要放在computed里面 里面的属性是一个对象 对象里面有一个get方法 get方法里面的this是vm 计算属性最终会出现在vm上直接读取使用即可 bodydiv idapp!– v-model双向绑定 –姓input typetext v-model:valuefirstNamebr!– v-model:value 可简写为 v-model –姓input typetext v-modelfirstNamebr名input typetext v-modellastNamebr!– 写4个调用只被调用一次get有缓存 –全名span计算属性: {{fullName}}/spanbr全名span计算属性: {{fullName}}/spanbr全名span计算属性: {{fullName}}/spanbr全名span计算属性: {{fullName}}/spanbr全名span计算属性: {{fullName}}/spanbr/divscript typetext/javascriptvar vueName new Vue({el:#app,data:{firstName: 张,lastName: 三},computed:{fullName:{// get有什么作用当有人读取fullName时get就会被调用且返回值就作为fullName的值// get什么时候调用1. 初次读取fullName的时候 2.所依赖的数据发生变化时get(){console.log(get被调用);return this.firstName - this.lastName;},// set什么时候被调用当fullName被修改时set(value){console.log(set被调用, value);const array value.split(-)this.firstName array[0];this.lastName array[1];}}}})/script/body当只读不改只使用get不使用set可以简写 computed:{// 是一个函数fullName2:function(){console.log(当get使用);},fullName3(){console.log(当get使用);}} 2023年 监听属性 !DOCTYPE html htmlheadmeta charsetutf-8title/title!– script src../js/v2.6.10/vue.js/script –script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptstyle typetext/css.active{color: red;}/style/headbodydiv idapph2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/divscript typetext/javascriptvar vueName new Vue({el:#app,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(天气被修改了);}}}})/script/body /html//监视多级结构中某个属性的变化numbers.a:{//监视多级结构中所有属性的变化deep:true,handler(){console.log(a被改变了)}}