注意:
1、所谓指令,其实就是元素的属性
2、所有的指令,前提是在js中声明了是Vue对象
3、参数
1、静态参数:一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute:
此处的href是参数
v-on 指令,它用于监听 DOM 事件,在这里参数是监听的事件名
2、动态参数:可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:例如:(动态参数不是太理解)
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href。
同样的你可以使用动态参数为一个动态的事件名绑定处理函数:
在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus。
实例: 点击会有弹窗的出现
var vm = new Vue({
el: "#add",
data: {
message: "张浩琦",
whos: "click",
},
methods: {
tanChuang: function() {
alert(123456)
}
}
})
3、在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
以下符合逻辑但是不是表达式的也不会生效
{{ var a = 1 }}
{{ if (ok) { return message } }}
v-text指令
设置标签的文本值(textContent)
1、v-text已经将文本的内容替换,所以源文本的内容不会显示
2、{{content}}实在原来的文本的基础上进行拼接。
v-text的使用:
{{ info }}
深圳
{{}}的使用:
{{message}}深圳
v-text拼接文本 :
var app = new Vue({
el: "#add",
data: {
message: "黑马程序员",
info: "白马程序员"
}
})
v-once指令
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:
这个将不会改变: {{ msg }}
msg只随着属性的变化而变化一次
v-html指令
设置元素的innerHTML
1、更新文本的值,直接将原文本替换,和v-html差不多
2、当v-html指向的内容符合HTML标签的形式时,会生成新的标签。
v-html更新文本
黑马程序员
v-html新增标签
var vm = new Vue({
el: "#add",
data: {
content: "白马程序员",
info: "黄马程序员",
message: "程序员"
}
})
v-html和v-text的对比
//显示的是一个百度链接
//显示的是百度链接
var vm = new Vue({
el: "#add",
data: {
weblink: "百度链接"
}
})
v-on指令
为元素绑定事件 监听DOM事件
1、格式
1、
2、
事件名为常用事件 click mouseover 等
2、点击事件
或者 v-on:换成@
3、直接更改属性的值
4、Vue写方法
var app = new Vue({
el: "add",
data: {
message: "张浩琦",
foo:"123"
},
methods: {
dolt: function() {
//逻辑
}
}
})
5、触发函数
触发函数时会出现集中不同情况
1、一个按钮触发一个函数
无参数时 方法的名称可以不加小括号
2、一个按钮触发两个函数(两个函数都需要带小括号,执行顺序按照先后顺序)
var app = new Vue({
el: "#add",
data: {
message: "张浩琦",
},
methods: {
dolt: function() {
alert(this);
},
dolttwo: function() {
console.log(this); // this指的是当前创建的app这个Vue对象
console.log(this.message); //张浩琦
}
}
})
Vue的操作重在操作数据(文本域),而非操作Dom元素(操作Vue的时候时,需要使用this)
使用事件点击更改谋个标签的内容
点击之后,调用dolttwo方法,message的内容由张浩琦换成刘倩倩,span标签里面的内容也更改为现在的message内容
{{message}}
var app = new Vue({
el: "#add",
data: {
message: "张浩琦",
},
methods: {
dolt: function() {
alert(this);
},
dolttwo: function() {
this.message = "刘倩倩"
//this.message+="刘倩倩";
函数每调用一次,message后面就添加一个刘倩倩
//this.message-="刘倩倩";
点击一次,显示Nan;
}
}
})
计数器的实战
0-10之间
var vm = new Vue({
el: "#pss",
data: {
message: 0
},
methods: {
add() {
console.log(this)
if (this.message >= 10) {
this.message = 0;
} else {
this.message += 1;
// 或者
// this.message++;
}
},
sub() {
if (this.message <= 0) {
this.message = 10;
} else {
this.message -= 1;
// 或者
// this.message--;
}
console.log(this)
}
}
})
v-on补充
传递自定义参数,事件修饰符@keyup后的.XXX(https://cn.vuejs.org/v2/api/#v-on)
方法传递参数
键盘监听(以回车为例)
或者
如果不加.enter,则按键盘上的任意按钮,都会调用sayHi('小铁',555)的方法
var vm = new Vue({
el: "#add",
data: {
},
methods: {
//含有参数的方法
doIt: function(p1, p2) {
console.log(p1, p2)
},
sayHi: function(p3, p4) {
console.log(p3, p4)
}
}
})
访问原生事件DOM对象$event
//如果此处参数是event,则输出的时候会报错
var vm = new Vue({
el: "#add",
data: {
},
methods: {
warn: function(event) {
console.log(event)
}
}
})
v-show指令
根据表达值的真假,切换元素的显示和隐藏(其实是操作元素的display)
1、< img src="" v-show="true">;true显示,false不显示
2、v-show里面的值还可以加判断
v-show="false" 标签元素不显示
v-show="isShow" isShow的值为false 标签元素不显示
v-show="isShow" isShow的值为true 标签元素显示 点击不显示
v-show="age==16"显示,否则隐藏 此处v-show里面的值为boolean值
var vm = new Vue({
el: "#add",
data: {
isShow: true,
isHidde: false,
},
methods: {
visPic() {
//使isShow的值变为true
this.isShow = false
//或者
this.isShow = !this.isShow
},
//此方法每调用一次,age增加1
addAge() {
this.age++;
}
}
})
v-if指令
根据表达式的真假,切换元素显示和隐藏(操纵Dom元素,而非样式,v-show操纵的是样式)
1、用法和v-show完全一样,v-if改变的是Dom元素的添加或删除,v-show改变的是样式,不会新增加Dom元素和删除Dom元素的
2、实际工作中,频繁切换的元素用v-show,反之用v-if,因为操作Dom消耗比较大。
v-if和v-else的使用
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
张浩琦
是的
var vm = new Vue({
el: "#add",
data: {
awesome: false //此时显示的是 是的
//当为true时 显示的是张浩琦
}
})
template元素,一个不可见的包裹元素
是的
Paragraph 1 Paragraph 2 Title
var vm = new Vue({
el: "#add",
data: {
ok: true //此时template里面包裹的元素都可以显示出来。 如果不添加vue指令,不管是直接在template元素里面添加内容还是添加元素,template里面的内容都显示不出来
}
})
v-else-if
A
B
C
D
没有选项了啊
var vm = new Vue({
el: "#add",
data: {
ok: true, //此时template里面包裹的元素都可以显示出来。 如果不添加vue指令,不管是直接在template元素里面添加内容还是添加元素,template里面的内容都显示不出来
type: "132" //此时网页显示的是没有选项了啊
}
})
用key 管理可复用的元素
可复用元素举例 此处的表单元素即可复用元素 这样做其实是不符合实际的,要用key属性来解决
//更改为这个,元素里面的内容就会重新渲染,而不是重复使用 //
//这里也需要更改,不能和复用的元素的key值一样 //
var vm = new Vue({
el: "#add",
data: {
loginType: "username",
},
methods: {
change: function() {
console.log(this.loginType)
this.loginType = "sef"
console.log(this.loginType)
}
}
})
v-bind指令
操作元素的属性(如:src,title,class等)
格式
1、< img v-bind:src ="imgSrc" >
2、< img v-bind:title="imgTitle+'123456'"> 拼接
3、< img v-bind:class="isActive?'active':''">三元表达式的形式表示判断,判断isActive的值,如果符合,class的属性值为active,如果不符合,class的属性值为空。(这种写法比较麻烦,可以采用对象的形式)
4、< img v-bind:class ="{active:isActive}"> 对象的形式表示判断,如果isActive的值为true,class的属性为active,否则class的属性为空
5、简写形式:< img :class ="{active:isActive}">(v-bind可以删除,但是在属性前需要加一个:)
为一个标签赋的属性赋予两个变量的值
啦啦啦啦啦
添加一个属性值
添加一个属性值
添加两个属性值
var vm = new Vue({
el: "#add",
data: {
imgSrc: "./image/q1.jpg",
imgTitle: "这是一个标签",
judge: true,
classes: "fonts",
changeColor: "red"
}
})
综合写法
var vm = new Vue({
el:"#demo",
data:{
one:"string",
classa:true,
classb:false
}
})
效果
5、遗留问题
待解决
问题一:判断并把vue对象的变量作为此标签的class值
判断并把vue对象的属性值作为此标签的class值
//此时添加的span标签的class的属性值为classes而非fonts
解决方式:
问题二: 如何用对象的形式一次添加两个属性值
对象形式判断条件是否成立,成立变为块元素,不成立变为行元素
添加一个属性值
解决措施:两个属性值判断之间用逗号隔开
添加一个属性值41564156416
var vm = new Vue({
el: "#add",
data: {
imgSrc: "./image/q1.jpg",
imgTitle: "这是一个标签",
judge: true,
classes: "fonts"
}
})
v-bind指令的详细补充 包括样式的改变
修改class和style, v-bind指令与一半属性共存
对象语法
样式一:
.static {
width: 100px;
height: 100px;
border: 1px solid red;
}
.backgroundcolor {
background-color: green;
}
.divBig {
width: 200px;
height: 200px;
}
1234656
var vm = new Vue({
el: "#add",
data: {
classOne: true, 如果classOne为false,则divBig此类名属性则无法发挥作用
classTwo: true
与上同理
}
})
样式二:将所有的样式写在一个属性对象中
.active {
width: 100px;
height: 100px;
background-color: red;
}
var vm = new Vue({
el: "#add",
data: {
classObject: {
//此时的类名为active
active: true,
' text-danger': false
}
}
})
使用计算属性(看不懂)
var vm = new Vue({
el: "#app",
data: {
active: true,
error: null
},
computed: {
classObject: function() {
return {
active: this.active && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
数组语法
可以把一个数组传给 v-bind:class,以应用一个 class 列表:
样式一:将对象存入到数组中
.active {
width: 100px;
height: 100px;
}
.error {
background-color: red;
}
var vm = new Vue({
el: "#add",
data: {
activeClass: "active",
errorClass: "error",
}
})
样式二:三元表达式形式
.active {
width: 100px;
height: 100px;
}
.error {
background-color: red;
}
var vm = new Vue({
el: "#add",
data: {
activeClass: "active",
errorClass: "error",
panduan: false,
}
})
对象语法在数组中使用
.active {
width: 100px;
height: 100px;
}
.error {
background-color: red;
}
.question {
border: 10px solid black;
}
var vm = new Vue({
el: "#add",
data: {
activeClass: false,
errorClass: true,
questionClass: "question"
}
})
用在组件上(没有操作过,官方原文档)
当在一个自定义组件上使用 class 属性时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如,如果你声明了这个组件:
Vue.component('my-component', {
template: '
'})
然后在使用它的时候添加一些 class:
HTML 将被渲染为:
对于带数据绑定 class 也同样适用:
当 isActive 为 truthy[1] 时,HTML 将被渲染成为:
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
张浩琦
var vm = new Vue({
el: "#add",
data: {
activeColor: 'yellow',
fontSize: '30',
styleObject: {
border: "20px solid red",
width: "200px",
height: "200px"
}
}
})
使用方法和class的更改差不多
v-for指令
根据数据生成列表结构(列表的生成依赖数据,所以在data里面建立)
v-for指定的内容会随着vue对象的数据的改变而进行dom节点数量的改变
语法:
语法一:列表的每一项内容为数组的内容(列表里面如果有原内容,则原内容每一次都会被打印)
//item是遍历的每一项,可以改名字,但是得遵循命名规则
//in 关键字 不能修改
//arr 要循环的数据名
//如果li标签里面原本就有内容,例如“张浩琦”,那么遍历的每一项数据生成的节点都是张浩琦
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
结果
张浩琦
张浩琦
张浩琦
张浩琦
张浩琦
语法中的内容不一样
内容用一个对象储存
-
{{item.name}}
结果1-10
v-model(model 模型;典型;模特儿)
便捷获取和设置表单元素的值(双向数据绑定) 需要和表单元素一起使用
双向绑定即当message的内容改变,表单的内容会随着改变,表单的内容改变,message的内容也会随着改变
{{message}}
var vm = new Vue({
el: "#add",
data: {
message: "张浩琦"
},
methods: {
add: function() {
this.message = "刘倩倩"
}
}
})
修饰符(不是太清楚)
.lazy(懒加载)
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:
没有.lazy
加上.lazy
{{message}}
span中的值并不会随着message的改变而同步改变,只有表单失去焦点时,span中的值才会同步改变,类似于change
var vm = new Vue({
el: "#add",
data: {
message: "张浩琦"
},
methods: {
change: function() {
this.message = "刘倩倩"
},
nub: function() {
alert("15465")
}
}
})
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
.ref像v-model一样,实现数据的双向绑定(主要是为了获取当前的元素对象input对象)
{{name}}
{{age}}
new Vue({
el: "#add",
data: {
name: " ",
age: 32
},
methods: {
getName: function() {
console.log(this.$refs);
// 相当于ref的父级,包含了标签中ref的所有内容 所以此处输出的也有age的内容
},
getAge: function() {
console.log(this.$refs.age.value);
}
}
})
项目实战
小黑记事本项目
学到的内容
1、数组元素的长度 content.length
2、 this.content.splice(index, 1); 删除指定的索引内容,如果是2,则删除当前索引内容和之后的那个索引内容
- {{index+1}}{{item}}
var vm = new Vue({
el: "#littleBlack",
data: {
message: "泡面",
content: ["吃饭饭", "睡觉觉", "敲代码"]
},
methods: {
addContent: function() {
this.content.push(this.message);
this.message = " ";
},
remove: function(index) {
console.log(index);
//splice(index,1)删除指定的索引,一次删除一个元素 如果是2删除索引和索引后面的元素
this.content.splice(index, 1);
},
clearAll: function() {
this.content = " ";
}
}
})