指令
v-bind
-
属性和数据进行绑定
-
举例： 表单的value属性和一个数据绑定
-
说法： 绑定一个数据在某一个属性身上
<h4>属性和数据进行绑定</h4> <input type="text" v-bind:value="msg"> <!-- 简写 --> <input type="text" :value="msg"> new Vue({ el:'#app', data:{ msg:'请输入', } })
-
v-bind 【 单项数据绑定 】
-
绑定类名 绑定样式
-
为什么要绑定？
-
答： 通过操作数据就可以改变V中dom的样式，相当于操作了dom
-
类名的绑定 【 两种写法 】
- 数组的写法 【 推荐 】
<h4>类名绑定 - 数组写法</h4> <p :class="['size','bg']">vue</p><!-- 此时的size 和 bg 不是vue设置的 --> <p :class="[size2,bg2]">vue</p> new Vue({ el:'#app', data:{ size2:'size', bg2:'bg', } })- 对象的写法
<h4>类名绑定 - 对象写法</h4> <p class="size bg">原生js书写</p> <p :class="{size:true,bg:true}">vue</p><!-- 此时的size 和 bg 不是vue设置的 --> <p :class="{[size2]:true,[bg2]:true}">vue</p> new Vue({ el:'#app', data:{ size2:'size', bg2:'bg', } }) -
样式的绑定
- 数组的写法 【 推荐 】
<h4>样式绑定 - 数组</h4> <p style="width: 100px;height:100px;background:red">原生js书写</p> <p v-bind:style="[{width: '100px',height:'100px'},{background:'red'}]">vue</p> <!-- 简写 --> <p :style="[style1,bg1]">vue</p> new Vue({ el:'#app', data:{ style1:{ width:'100px', height:'100px' }, bg1:{ background:'yellow' }, } })- 对象的写法
<h4>样式绑定 - 对象</h4> <p style="width: 100px;height:100px;background:red">原生js书写</p> <p v-bind:style="{width:'100px',height:'100px',background:'red'}">vue</p> <!-- 简写 --> <p :style="{width: w,height:h,background:bg}">vue</p> new Vue({ el:'#app', data:{ w:'100px', h:'100px', bg:'red', } })
-
总结：
<!--总结 --> <!-- 对象的写法 --> <p :class="{[size2]:true,[bg2]:true}">vue</p> <!-- vue下面定义size2和bg2 --> <!-- 数组的写法 --> <p :class="[size2,bg2]">vue</p> <!-- vue下面定义size2和bg2 --> new Vue({ el:'#app', data:{ size2:'size', bg2:'bg', } })引深：
<!-- 引深： 灵活使用 --> <h4> 引深 </h4> <p :class="{[size2]:flage,[bg2]:flage}"></p> <p :class="[size2, flage?bg2:color]"></p><!-- 三目运算符 控制颜色 --> <p :class="[size2, flage&&bg2||color]"></p><!--短路原则 --> new Vue({ el:'#app', data:{ size2:'size', bg2:'bg', } })在已经有class的dom元素上 还可以使用v-bind添加类：
<p class="text" :class="[size2,bg2]"></p> <!-- 结果 <p class="text size bg"></p> --> new Vue({ el:'#app', data:{ size2:'size', bg2:'bg', } })可以绑定任意一个dom身上的属性：
<img :src="img" alt=""> new Vue({ el:'#app', data:{ img:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1681391545,4187928589&fm=85&s=0D803C72F2A477157583DA4D0300C0EE' } }) -
-
v-model 【 双向数据绑定 】
-
单向 【 数据改变， 视图改变 】v-bind
-
双向 【数据改变， 视图改变，反之，视图改变，数据改变 】
-
v-model默认绑定表单元素的value值
- form 表单标签
- input textarea … 表单元素
经验： 看到表单,想要得到它的value值，直接v-model
<div id="app"> <input type="text" v-model='msg'> </div> <script src="lib/vue.js"></script> <script> new Vue({ el:'#app', data:{ msg:'请输入' } }) -
思考： 如何使用单向数据绑定实现双向数据绑定效果
扩展：1：input身上有哪些事件？
1：focus 2： blu人 3：change 4：input
2：事件有几种绑定形式
1. js中绑定
var input = document.querySelector(‘input’)
input.oninput = function () {}
addEventList()) DOM2级事件 事件监听
2：html结构中绑定 function load () {}
（vue中事件绑定形式选择2）
3：事件包含哪几个部分？
事件源
事件类型
事件处理程序
4：vue中事件格式：
举例：
vue中事件格式： 举例： <div v-on:eventType = '事件处理程序'></div> */ --> <div id="app"> <input type="text" :value="msg" v-on:input="abc"> <!-- 简写 --> <input type="text" :value="msg" @input="abc"> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ msg:'请输入' }, methods:{ //事件处理程序 abc:function(e){ this.msg=e.target.value } } }) -
-
v-on 事件
- 基础事件绑定
<div id="app"> <button @click="fn">点击</button> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', methods:{ fn(){ alert('你好') } } })- 事件传参
<!-- 业务： 点击button按钮，弹出input的value 经验： 看到表单,想要得到它的value值，直接v-model vue事件传参 --> <div id="app" > <input type="text" v-model="msg"> <button @click="ev(msg)">点击</button> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ msg:'' }, methods:{ ev:function(msg){ alert(msg) } } })- 事件对象
<!-- 业务： 如果我们的fn函数接收2个参数，其中一个参数是事件对象，这个时事件对象e丢失了 解决： 在调用方法时，传入一个实际参数： $event --> <div id="app"> <input type="text" v-model="msg"> <button @click="fn(msg,$event)">点击</button> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ msg:'' }, methods:{ // fn(e){ // console.log(e) // } fn(val,e){//在调用方法时，传入一个实际参数： $event 如果不传 则输出的e为undefined console.log(val), console.log(e) } } })- 为什么要使用？【 案例： 事件冒泡 】 （ <!-- 给每盒子添加事件，会出现事件冒泡 ，解决：给每个事件添加阻止事件冒泡， 弊端：代码重复比较啊多，性能降低，因此使用修饰符来解决）
<div id="app"> <div class="box1" @click="box1"> <div class="box2" @click="box2"> <div class="box3" @click="box3"></div> </div> </div> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', methods:{ box1(e){ e.stopPropagation() alert('box1') }, box2(e){ e.stopPropagation() alert('box2') }, box3(e){ e.stopPropagation() alert('box3') } } })-
- 事件修饰符
1：为什么要用修饰符：答：给每盒子添加事件 问题：会出现事件冒泡
解决：给每个事件添加阻止事件冒泡
弊端：代码重复比较啊多，性能降低
因此使用修饰符来解决
2：事件修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!-- 阻止事件冒泡 修饰符 .stop 或者 .self--> <div id="app"> <div class="box1" @click.stop="box1"> <div class="box2" @click.stop="box2"> <div class="box3" @click.stop="box3"></div> </div> </div> <hr> <div class="box1" @click.self="box1"> <div class="box2" @click.self="box2"> <div class="box3" @click.self="box3"></div> </div> </div> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', methods: { box1(e) { alert('box1') }, box2(e) { alert('box2') }, box3(e) { alert('box3') } } })- 按键修饰符
<!-- 按回车键弹出input的value --> <div id="app"> <!-- 原生js写法 --> <!-- <input type="text" @keyup="click($event,msg)"> --> <hr> <!-- vue按键修饰符写法 --> <!-- 当按下回车键时弹出input的value --> <input type="text" v-model="msg" @keyup.13="click(msg)"> <!-- 或者 --> <input type="text" v-model="msg" @keyup.enter="click(msg)"> <!-- 当按下键盘p时弹出input的value --> <input type="text" v-model="msg" @keyup.p="click(msg)"> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ msg:'' }, methods:{ // vue按键修饰符写法 click(val){ alert(val) }, // 原生js写法 // click(e,val){ // if(e.KeyCode===13){ // alert(val) // } // } } }) -
思考： MVVM架构思想，是将逻辑放在VM中来做，V是用来展示视图的
-
模板语法 mustache 【 双大括号 】
- 支持度
- 支持数据类型
- 所有的类型都是支持的，但是console.log alert这些输出语法是不支持的
扩展：数据类型有哪些？【 2种说法 】
1. 第一种类型说法
初始数据类型： number string null undefined boolean
引用数据类型: object(对象一般分为对象，数组，函数（在vue中函数不可以作为摸板输出）)
2. 第二种说法
基本数据类型L: number string boolean
复杂数据类型: object
特殊数据类型: null undefined
<div id="app"> <p>num:{{num}}</p> <p>srt:{{srt}}</p> <p>nul:{{nul&&1||3}}</p> <p>und:{{und&&4||5}}</p> <p>blol:{{blol&&6||7}}</p> <p>obj:{{obj.name}}</p> <p>arr:{{arr[1]}}</p> <!-- <p>fun:{{(funtion(){aleret('1')})()}}</p> 报错--> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ num:12, srt:'nihao', nul:null, und:undefined, blol:true, obj:{ name:'张三' }, arr:[1,2,3], } })
method 方法
- 用来存储事件处理程序 （有事件处理程序时用method）
<div id="app">
<input type="text" :value="msg" v-on:input="abc">
<!-- 简写 -->
<input type="text" :value="msg" @input="abc">
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg:'请输入'
},
methods:{
//事件处理程序
abc:function(e){
this.msg=e.target.value
}
}
})
computed 计算属性
-
为什么要有这个选项？
答：V应该是用于数据展示，但是发现V做了一部分逻辑判断，违背了MVVM，所以使用计算属性。
2：（计算属性中存放的都是方法 都有返回值 计算属性一旦确定就不可更改了 ）
- 案例： 【 字符串反向 】、
<div id="app"> {{msg.split('').reverse().join('')}} <!-- 使用计算属性 直接将方法名当做全局变量一样直接使用--> {{newMsg}} </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ msg:'你好吗？' }, // 使用计算属性 computed:{ //计算属性中存放的都是方法 计算属性一旦确定就不可更改了 newMsg(){ return this.msg.split('').reverse().join('') } } }) -
计算属性是一个 选项， 选项值是一个对象，对象中存放的是方法
- 方法必须要有返回值 return
-
计算属性的使用
- 直接将方法名当做全局变量一样直接使用
<p> {{ newMsg }} </p>
-
总结： 什么时候使用计算属性？
- 满足两个条件即可
- 必须有逻辑处理，还有返回值
- 使用的结果，要当做全局变量一样使用
- 满足两个条件即可
-
计算属性一旦确定就不可更改了
-
案例联系计算属性
- 用户名书写
- 通过上面的案例我们知道了，计算属性还可以使用getter和setter
<!-- 姓与名的value 添加到姓名内 姓名发生改变姓与名随之改变--> <div id="app"> 姓：<input type="text" v-model="xing"> 名：<input type="text" v-model="ming"> 姓名：<input type="text" v-model="name"> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ xing:'', ming:'' }, computed:{ name:{ get(){ return this.xing+this.ming }, set(val){//val就是当前绑定元素的value值 this.xing=val.slice(0,1) this.ming=val.slice(1) } } } })
watch 侦听属性
-
以案例来学习watch - > 用户名写入
-
watch是一个选项， 选项值是一个对象
- 对象中可以存放的类型有哪些
- { [key: string]: string | Function | Object | Array }
- 常用的是方法和对象
-
总结：
由一个数据改变，引起的新的数据请求<div id="app"> 姓：<input type="text" v-model="xing"> 名：<input type="text" v-model="ming"> 姓名：<input type="text" v-model="name"> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data:{ xing:'', ming:'', name:'' }, watch:{ xing(val){ this.name=val+this.ming }, ming(val){ this.name=this.xing+val }, name:{ deep:true, handler: function (val) {//该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 this.xing=val.slice(0,1) this.ming=val.slice(1) }, } } })
vue:
1:在模板中 数据类似于全局变量 直接用的 ,属性身上没有花括号的 直接使用
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
