创建 vue 实例
index.html 文件:
My first Vue{{ name }}
app.js 文件:
// 创建 vue 实例
new Vue({
// 与 index.html 文件中 id="vue-app" 的 div 对应, 包含在这个 vue 实例的数据和方法, 都可以作用于这个 div 中.
el:'#vue-app',
data:{
name:'Rachel'
}
});
总结, 就是在 js 文件中处理数据以达到在页面上动态展现数据的效果.
data & methods
Html:
{{ greet('afternoon') }}
JS:
new Vue({
el: '#vue-app',
data: {
name: 'Rachel'
},
methods: {
greet: function(time) {
return 'Good ' + time + ' ' + this.name;
}
}
});
输出: Good afternoon Rachel
Data binding 数据绑定
流程/格式:
在 html 标签中添加:
v-bind: (标签的任意属性)="xxx"
在 js 文件中:
给 xxx 赋值即可.
Html:
LearnKu
LearnKu
JS:
data: {
website: "https://learnku.com",
websiteTag: 'LearnKu',
},
Events 事件
new Vue({
el: '#vue-app',
data: {
age: 25
},
methods: {
add:function(inc) {
this.age += inc;
},
click: function() {
alert('You clicked me');
}
}
});
Keyboard Events 键盘事件
logName: function() {
console.log('You entered your name');
}
Two-way Data Building 数据的双向传输
{{ name }}
{{ title }}
data: {
name: '',
title: ''
},
双向传输图示:
Computed Properties
Age: {{ age }}
AddtoA
A: {{ a }}
Age + A = {{ addToA() }}
AddtoB
B: {{ b }}
Age + B = {{ addToB() }}
data: {
// 给 a 和 b 均设初始值为 0
a: 0,
b: 0,
age: 25,
},
methods: {
addToA: function() {
// 便于在控制台查看方法被触发的时机
console.log('addToA');
return this.a + this.age;
},
addToB: function() {
// 便于在控制台查看方法被触发的时机
console.log('addToB');
return this.b + this.age;
}
}
按照上面这段代码, 单独点击哪个 button, 两个 methods 都会被执行, 这有损性能.
改进: 把 methods 中的代码挪到 computed 属性中, 它跟 methods 的作用很像, 区别就是它会检查方法中的数据是否有改变, 如果没有改变, 就不会执行, 就是定位更准确点吧.
computed: {
addToA: function() {
console.log('addToA');
return this.a + this.age;
},
addToB: function() {
console.log('addToB');
return this.b + this.age;
}
}
Html 中的代码稍作改动, 把调用方法的括号去掉, 否则报错:
Age + A = {{ addToA }}
Age + B = {{ addToB }}
Dynamic CSS 动态样式
方式一:
方式二(更加动态的方式):
把属性 a 的值用变量 available 表示, 在 js 文件中控制其为 true or false
添加点击事件, 控制 js 文件中 available 的值, 从而控制 class a 是否生效.
index.html 文件
Rachel
app.js 文件
data: {
available: true,
},
style.css 文件
span {
background: red;
display: inline-block;
}
.a span {
background: green
}
方式三:
最解耦的方式, 特别适合于一个元素上有很多个类的情况, 不需要在 html 中罗列所有的类, 而只需要在指定一个变量名, 然后在 js 文件中编辑所有的类就可以了:
Toggle a
Toggle b
Rachel
data: {
available: false,
nearby: false
},
computed: {
compClass: function() {
return {
a: this.available,
b: this.nearby
}
}
}
Conditionals 条件判断
Toggle Error
Toggle Success
Error
Success
Error
Success
data: {
error: false,
success: false
}
Loop for 循环
{{ character }}
{{info.name}} - {{ info.age}}
{{ index }}. {{info.name}} - {{ info.age}}
{{ key }} - {{ val }}
data: {
characters: ['Rachel', 'Ross', 'Emma'],
infos: [
{name: 'Rachel', age: 25},
{name: 'Ross', age: 30},
{name: 'Emma', age: 2}
]
}
Intro to Component
component is a reusable piece of code or template that we can use in different view instance.
// 对于 greeting 标签, 在此定义一次, 就可以在多个 vue 实例中复用
Vue.component('greeting', {
template: "
Hey there, I am {{name}}. Change
",// 在这里的 data 不是对象, 而是一个函数, 在函数里返回对象, data 函数有下面两种写法, 都可以
// 写法一
data:function() {
return {
name: 'Rachel'
}
},
// 写法二
data() {
return {
name: 'Rachel'
}
},
methods: {
changeName: function() {
this.name = 'Mario'
}
}
});
// 第一个 vue 实例
var one = new Vue({
el: '#vue-app-one',
});
// 第二个 vue 实例
var two = new Vue({
el: '#vue-app-two',
});
Refs
通过标签的 ref 属性, 可以在 js 文件中获取这个标签的所有信息.
Submit
Your fav food is {{ output }}
data: {
output: "Your fav food"
},
methods: {
readRefs: function() {
// 获取 input 标签的信息
this.output = this.$refs.input.value;
// 获取 div 标签的信息
alert(this.$refs.test.innerHTML);
}
}
单独打印 this.$refs 可以看到所有带 ref 属性的元素的详细信息:
console.log(this.$refs);
本作品采用《CC 协议》，转载必须注明作者和本文链接
9247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
