第一个Vue程序
.html
<!--view层 ${} 变成了一个模板--> <div id="app"> <ul> <li><span v-bind:title="m">鼠标悬停几秒查看此处动态绑定的提示信息！</span> </li> <li>{{name}}</li> <li>{{tit.name}}</li> </ul> <a v-bind:href="tit.url">b站链接</a> </div>
.script
var vm =new Vue({ el:"#app", //元素的缩写 el data:{ //Model ： 数据 m:'Hello vue!', name:'Hello 框架', tit:{ name:'Vue', url:'https://www.bilibili.com' } } });
07_事件处理-@click-@keyup
1.事件处理基本使用
事件的基本使用： 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上 3.methods中配置的函数，不需要箭头函数，否则this就不是vm了； 4.methods中配置的函数，都是被vue所管理的函数，this指向的是vm 或者 组件实例对象； 5.@click="demo" 和 @click="($event)"效果一致，但后者可以传参 ============================================================================== <div id="root"> <button v-on:click="fn1()">点我提示信息1（不传参）</button> <button v-on:click="fn2($event,66)">点我提示信息2（传参）</button> </div> ============================================================================== methods:{ fn1(event){ }, fn2(event,number) { console.log(event,number) //console.log(event.target.innerText) //console.log(this)//此处的this是vm alert('同学你好'); } }
2.事件修饰符
Vue中的事件修饰 1. prevent : 阻止事件的默认行为 event.preventDefault() 常用 2. stop : 停止事件冒泡 event.stopPropagation() 常用 3. once : 事件只触发一次（常用） ============================================================================== <!--阻止默认事件--> <a href="http://www.baidu.com" @click.prevent="showInfo">点击我提示信息</a> <!--阻止冒泡事件--> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo()">点击我提示信息</button> </div> <!--事件只触发一次（常用）--> <button @click.once="showInfo">点击我提示信息</button> ============================================================================== methods:{ showInfo(e){ // e.preventDefault();//阻止默认事件 // e.stopPropagation();//阻止冒泡 //e.onceProcessed(); //事件只触发一次 alert('同学你好'); } }
3.键盘事件
<!-- 键盘事件 1. keyup : 键盘弹起 2. keydown : 按下键盘 -->
08_计算属性- computed
1.姓名案例—用methods实现
因为methods没有缓存，所以只能反复调用,不建议使用这种方式
2.姓名案例—用计算属性去实现
一、计算属性: 1.定义:要用的属性不存在，要通过已有属性计算得来。 2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter. 3. get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势:与methods实现相比， 内部有缓存机制(复用)，效爷更高，调试方便。 5.备注: (1).计算属性最终会出现在vm上，直接读取使用即可。 (2).如果计算属性要被修改，那必须写set函数去响应修改，且set中 要引起计算时依赖的数据发生改变
<!--准备好一个容器--> <div id="root"> 姓:<input type="text" v-model="firstName"><br/> 名:<input type="text" v-model="lastName"><br/> 测试:<input type="text" v-model="x"><br/> 全名:<span>{{fullName}}</span><br/> <!--这里get只调用了1次，因为computed有缓存，所以直接就给其他调用的赋值了--> 全名:<span>{{fullName}}</span><br/> 全名:<span>{{fullName}}</span><br/> 全名:<span>{{fullName}}</span> </div>
const vm = new Vue({ el:'#root', data:{ firstName:'唐', lastName:'九', x:'你好' }, computed:{//计算属性 fullName:{ //1.get有什么用？当有人在读取fullName时，get就会被调用，且返回值就作为，fullName的值 //2.get什么是被调用？1.有人初次使用fullName的时候。2.fullName依赖数据发生改变的时候。 get(){ console.log('get被调用') //console.log(this);//此处的this是vm return this.firstName+'-'+this.lastName }, //set什么是被调用？ 当fullName被修改时 set(value){ console.log('set',value) let split = value.split('-'); this.firstName=split[0]; this.lastName=split[1] } }
3.data，methods，computed
二、data，methods，computed data里面的属性，你写什么value,就是什么属性放在vm上 methods里面的方法，你写什么方法，就是什么方法放在vm上 computed里面，写的计算属性，他不是你写什么，vm上就放什么， 而是vm自动去找get的计算结果（返回值），放在vm身上了， vm里面，放的计算结果的名字叫xxx
09_监视属性-watch
1.天气案例-监视属性
<!--准备好一个容器--> <div id="root"> <h2 >今天天气很{{info}}</h2> <button @click="btn">切换天气</button> </div>
const vm = new Vue ({ el:'#root', //添加属性,数据 data:{ isHot:true, }, //计算属性 computed:{ info(){ return this.isHot?'炎热':'凉爽'; } }, //方法，函数 methods:{ btn(){ this.isHot= !this.isHot; } }, //监视属性 watch:{ info:{ //handler 什么时候被调用？isHot发生改变的时候 handler(newValue,oldValue){ console.log("isHot 被修改了",newValue,oldValue) }, //立即执行，函数 immediate:true, //初始化时，让handler，调用一下 } } })
2.天气案例-深度监视
深度监视： （1）vue中的watch默认不检测对象内部值的改变（一层）。 （2）配置deep.true 可以监测对象内部值改变（多层）。 备注： （1）vue自身可以监视对象内部值的改变，但是vue提供的watch默认不可以 （2）使用时watch根据数据的具体结构，决定是否采用深度监视。 ============================================================================== <!--准备好一个容器--> <div id="root"> <h2 >a的值是:{{numbers.a}}</h2> <button @click="numbers.a++">点我a+1</button> </div> ============================================================================== const vm = new Vue ({ el:'#root', //添加属性,数据 data:{ numbers:{ a:1, b:1, } }, //监视属性：一般默认，不提供多级化机构的监控 watch:{ info:{ //handler 什么时候被调用？isHot发生改变的时候 handler(newValue,oldValue){ console.log("isHot 被修改了",newValue,oldValue) }, //立即执行，函数 immediate:true, //初始化时，让handler，调用一下 }, numbers:{ //深度监视，监视多级化结构中所有属性变化 deep:true, handler() { console.log("number改变了") } } } })
10_绑定样式-:class
绑定样式
<!--准备好一个容器--> <div id="root" > <!--绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --> <div class="basic" :class="mood" @click="btn">{{name}}</div><br> <!--绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 --> <div class="basic" :class="classArr">{{name}}</div><br> <!--绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用 --> <div class="basic" :class="classObj">{{name}} </div> ============================================================================== new Vue({ el:'#root', data:{ name:'肉肉', //字符串 mood:'normal', //数组 classArr:['atguigu1','atguigu2','atguigu3'], //对象 classObj:{ atguigu1:false, atguigu2:false, } } ============================================================================== <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ background-color: #0093E9; background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); } .sad{ background-color: #D9AFD9; background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%); } .normal{ background-color: #85FFBD; background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); } .atguigu1{ } .atguigu2{ border-radius: 15px 50px 30px 5px } .atguigu3{ background-color: cornflowerblue; } </style>
11_条件渲染-v-show : v-if
条件渲染
1.使用v-show，做条件渲染 <h2 v-show="false">欢迎来到{{name}}</h2> <h2 v-show="1===1">欢迎来到{{name}}</h2> 2.使用v-if做条件渲染 <h2 v-if="1===1">欢迎来到{{name}}</h2> <h2 v-if="false">欢迎来到{{name}}</h2> v-show不安全，在网页源码，可以看见，v-if看不见，所以安全！ 但是频繁切换，最好使用show 频率低的用v-if ============================================================================== <!--准备好一个容器--> <div id="root"> <h2 >当前n值是{{n}}</h2> <button @click="n++">点击+n</button> <!-- <div v-show="n===1">Angular</div> <div v-show="n===2">React</div> <div v-show="n===3">Vue</div> --> <!-- v-else和v-else-if--> <div v-if="n===1">Angular</div> <div v-else-if="n===2">React</div> <div v-else-if="n===3">Vue</div> <div v-else>哈哈哈</div> </div>
