Vue学习笔记01——插值表达式和事件修饰符
最近学长给我们一个关于前端Vue的教学资料，他认为非常实用，值得我们花时间去学习。我这边的项目也快完成了，省出一些时间，正好可以每天挤出一些时间学习Vue的知识！
这是我前两天的学习笔记，正好是个day1内容，和大家分享一下！
初始模板
初始模板
插值表达式
1、修饰指令 v-cloak,v-text-v-html 区别
v-cloak：渲染使用，只会增加输出内容，不会替换输出内容，能够解决 插值表达式闪烁的问题
//
+++++{{ msg }}----
v-text：渲染使用，替换输出内容
//
====
v-html：渲染使用，替换输出内容
//
+++
2、绑定指令 v-bind与v-on的区别
v-bind：提供属性绑定的指令,缩写为**?*
//
在绑定的时候，拼接绑定内容：`:title=“btnTitle + ‘, 这是追加的内容’”
v-on：提供事件绑定机制，缩写为**@**
//
var vm =new Vue({
el:'#app',
data:{
msg:'1',
msg1:"123",
mytitle:"可爱的小明明！！！！"
},
methods:{
show:function(){
alert('贱贱的小贱贱！！！')
}
}
})
v-on练习：跑马灯效果
var vm = new Vue({
el:"#app",
data:{
msg:'~小~贱~贱~的~^^~~闷~^~骚~~^^时刻~啊~啊~啊~a~~~~~~~~~~~~~'
},
methods:{
sao(){
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0,1)
// 获取到 后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end +start
},100)
},
mengsao(){
clearInterval(this.intervalId)
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
this.intervalId = null;
}
}
})
// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
3、v-model
v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定;
使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定;(比如在表格中msg修改数据同时，也可以修改掉msg的值)
注意： v-model 只能运用在 表单元素中:input(radio, text, address, email…) select checkbox textarea
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
},
methods: {
}
});
v-model：练习简易计算器
html：
Vue：
var vm = new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
result: 0,
opt: "+"
},
methods: {
calc() {
switch(this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
}
/*var codeStr ='parseInt(this.n1)' + this.opt + ' parseInt(this.n2)'
this.result = eval(codeStr)*/
}
}
})
4、 v-bind运用——样式class和style
使用class样式
- 数组
这是一个邪恶的H1
- 数组中使用三元表达式
这是一个邪恶的H1
- 数组中嵌套对象
这是一个邪恶的H1
在数组中使用 对象来代替三元表达式，提高代码的可读性
4.直接使用对象
这是一个邪恶的H1
5.使用对象2
这是一个很大很大的H1，大到你无法想象！！！
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
使用style样式
- 直接在元素上通过
:style的形式，书写样式对象
这是一个善良的H1
- 将样式对象，定义到
data中，并直接引用到:style中
- 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
这是一个善良的H1
- 在
:style中通过数组，引用多个data上的样式对象
- 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
这是一个善良的H1
5、Vue指令之v-for和key属性
-
迭代数组
- 索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
methods: {}
});
-
迭代对象中的属性
{{val}} --- {{key}} --- {{i}}
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '托尼·屎大颗',
gender: '男'
}
},
methods: {}
});
-
迭代数字
这是第 {{i}} 个P标签
//注意，从1开始
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
key
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的
v-for 循环的时候，key 属性只能使用 number获取string。
key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值。
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值。
{{item.id}} --- {{item.name}}
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })//push向后插入，unshift向前插入
}
}
});
6、Vue指令之v-if和v-show
实例代码：
这是用v-if控制的元素
这是用v-show控制的元素
特点
v-if 的特点：每次都会重新删除或创建元素。
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式。
性能
v-if 有较高的切换性能消耗。
v-show 有较高的初始渲染消耗。
推荐使用
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show。
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if。
事件修饰符
-
.stop 阻止冒泡
-
.prevent 阻止默认事件
-
.capture 添加事件侦听器时使用事件捕获模式
-
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调,只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
-
.once 事件只触发一次
事件修饰符可以串联，同时使用
代码实例：
html
vue代码：
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
});
总结：
Vue框架能够很好的与后台得到的数据进行配合使用，感觉学了这个会非常的实用。