内容目录
Vue基础
1.ES6基本用法
参考资料：http://es6.ruanyifeng.com/
let和const
- 块级作用域
- 不存在变量提升
- 不能重复声明
- const声明常量，一旦声明不可更改
模板字符串
`....${变量名} `箭头函数（this问题）
1.将箭头函数转化为es5的普通函数。
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}2.普通函数this指向
function Person() {
this.a = 0;
this.add = function() {
console.log(this.a);
};
}
var a = 6;
var p = new Person();
p.add(); // 输出：03.箭头函数this与普通函数对比
var person = {
name: "alex",
fav()=> {
console.log(this); // 在箭头函数中，'this' 的值由外部作用域确定。在这里，由于 'fav' 方法没有被任何对象的方法调用，所以 'this' 的值是全局对象（在浏览器中通常是 'window' 对象）。因此，这行代码将输出 'window'。
},
showName() {
console.log(this); // 在常规函数中，'this' 的值由函数的调用方式确定。由于 'showName' 是作为 'person' 对象的一个方法被调用的，所以 'this' 指向的是 'person' 对象。因此，这行代码将输出 'person' 对象的描述。
}
}
person.fav(); // 调用 'person' 对象的 'fav' 方法。这将输出 'window'。
person.showName(); // 调用 'person' 对象的 'showName' 方法。这将输出 'person' 对象的描述。对象
class Person{
constructor(name,age){ //构造函数
this.name = name;
this.age = age;
}
showName(){ //方法
alert(this.name)
}
};
var p2 = new Person('张三',20);
p2.showName();2.Vue的基本用法
new Vue({
el:'#app',
data(){
return {
}
},
methods:{ //对象字面量，字面量类似于常量。a:{}== a={}。
},
watch:{
},
computed:{
}
})指令系统
差值语法：{{}}
v-html
v-if和v-show：在其中v-if涉及到DOM节点的创建和销毁，v-show通过控制CSS属性（display）来控制元素的显示和隐藏。
v-bind :
v-on @
watch 监听属性
computed 监听多个属性，产生缓存的数据属性，防止DOM性能消耗
v-model 双向数据绑定 只能应用在input，textarea，select
3.js与c++中对象与函数
js与中对象和函数
在JavaScript中，对象和函数是两种基本的数据类型，它们在编程中起着非常重要的作用。
对象（Object）：
对象是JavaScript中表示复杂数据结构的主要方式，它是一种复合数据类型。在JavaScript中，几乎所有的东西都是对象，包括数组、函数等。对象可以包含多个属性，每个属性由一个键和一个值组成。键是字符串，用于唯一标识属性，值可以是任何类型：数字、字符串、布尔值、对象、数组、函数等。对象在JavaScript中是引用类型。
例如：
let person = {
name: "John",
age: 30,
city: "New York"
};在这个例子中，person是一个对象，它有三个属性：name、age和city。
函数（Function）：
函数是执行特定任务的代码块。在JavaScript中，函数是一等公民，可以作为参数传递给其他函数，也可以作为其他函数的返回值。函数可以有参数（输入），也可以有返回值（输出）。
函数的基本语法如下：
function functionName(parameters) {
// function body
}例如：
function greet(name) {
return "Hello, " + name;
}在这个例子中，greet是一个函数，它接受一个参数name，并返回一个字符串。
对象与函数的结合：
在JavaScript中，对象和函数经常一起使用。对象可以包含函数作为其属性，这样的函数被称为方法。通过在对象上调用方法，可以执行特定的任务。例如：
let person = {
name: "John",
age: 30,
city: "New York",
greet: function() {
return "Hello, " + this.name;
}
};
console.log(person.greet()); // 输出 "Hello, John"在这个例子中，person对象有一个名为greet的方法。通过调用person.greet()，可以执行该方法并返回一个字符串。
c++中对象和函数
在C++中，对象和函数是两个重要的概念，它们在面向对象编程中起着关键作用。下面是关于对象和函数的详细解释：
- 对象（Object）：
- 定义：对象是面向对象编程中的一个基本概念。它代表一个具体的实体或事物。在C++中，对象通常与类的实例相关联。
- 属性：每个对象都有其属性，这些属性描述了对象的特征或状态。例如，一个“汽车”类可能有“颜色”、“型号”和“速度”等属性。
- 方法：对象的行为是通过方法（或函数）来定义的。方法是与特定对象相关联的函数，用于执行该对象的特定操作。例如，一个“汽车”类可能有“加速”、“刹车”和“转弯”等方法。
- 创建对象：使用关键字
new在堆上动态分配内存来创建对象。也可以使用关键字auto或static在栈上创建对象。
- 函数（Function）：
- 定义：函数是一段代码的逻辑单元，它执行特定的任务并可能返回一个值。
- 特点：函数是C++的基本组成部分，用于封装代码、重用代码和组织程序逻辑。函数可以被其他函数调用，以执行特定的操作或计算。
- 参数：函数可以接受参数，这些参数允许函数接收输入数据，以便在函数体内部执行操作。
- 返回值：函数可以返回一个值，该值可以在调用函数时使用或传递给其他函数。
- 函数声明与定义：通常，函数在头文件中声明，并在源文件中定义。函数的声明提供了函数的原型，即函数的名称、返回类型和参数列表。
以下是一个简单的C++代码示例，展示了对象和函数的用法：
#include <iostream>
using namespace std;
// 函数声明
int add(int a, int b);
// 类声明
class Calculator {
private:
int result;
public:
// 构造函数
Calculator(int a, int b) { result = add(a, b); }
// 方法（或函数）
void display() { cout << "The sum is: " << result << endl; }
};
// 函数定义
int add(int a, int b) {
return a + b;
}
int main() {
// 创建对象并调用方法（或函数）
Calculator myCalc(5, 3);
myCalc.display(); // 输出: The sum is: 8
return 0;
}这个示例中，add 是一个简单的函数，用于计算两个整数的和。Calculator 是一个类，它有一个私有成员变量 result 和一个公有方法 display。在 main 函数中，我们创建了一个 Calculator 类的对象 myCalc，并调用了它的 display 方法来显示结果。
4 组件之间通信
1.组建的创建
//1,打油诗: 1.声子 2.挂子 3.用子
//1.声子
//局部组件的创建
var App = {
tempalte:`
<div class='app'></div>`
};
//全局组件的创建（不用挂子）
Vue.component('组件的名字'，{
data(){
return {
}
},
methods:{
},...
})
//2.挂子
new Vue({
el:"#app",
//用子
template:`<App />`,
components:{
//当键和值一致时，使用一下简写，全程为：App：App
App
}
})2.组件之间通信
父子组件之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('Test1',{
data(){
return {
test:'test01...',
fn:'我是子组件中的值'
}
},
//挂载父组件中的属性
props:['value'],
template: `<div>
<h2>{{ test }}</h2>
<h2>{{ value }}</h2>
<!-- 1.0子传父 -->
<button @click='like'>子传父</button>
</div>`,
methods:{
like(){
//2.0子组件向父组件传值
this.$emit('pop',this.fn);
}
}
});
Vue.component('Test2',{
data(){
return {
test:'test02...'
}
},
//2.挂载父组件中的属性
props:['value'],
//3.挂载父组件中的属性
template: `<div>
<h2>{{ test }}</h2>
<h2>{{ value }}</h2>
</div>`,
});
const App = {
data(){
return {
msg:'我是父组件中的值'
}
},
template: `
<div>
<button @click = "handleClick">按钮</button>
<!--1.父组件先子组件通信：绑定属性-->
<Test1 :value='msg' @pop='popshow'/>
<Test2 :value='msg'/>
</div>
`,
methods:{
handleClick(){
this.msg = "我还会回来的......";
},
//3.0执行自定义事件对应的方法
popshow(val){
alert(val);
}
},
}
new Vue({
el:'#app',
data:{
},
components:{
//相同效果App:App
App
}
})
</script>
</body>
</html>平行组件
//1.创建一个vue实例
var bus = new Vue();
//A=>B 平行传递的时候，先声明B中bus.$on('自定义事件名'，function(val){...})
//2.声明B中的$on
Vue.component('Test2',{
data(){
return {
test:'test02...'
}
},
created(){
bus.$on('pose',function(val){
alert((val));
})
}
//3.对A中$emit进行设置
Vue.component('Test1',{
data(){
return {
test:'test01...'
}
}，
template: `<div>
<button @click='sos'>平行传递</button>
</div>`,
methods:{
sos(){
bus.$emit('pose',this.test);
}
}
});5过滤器的使用
局部过滤器
//1.注册局部过滤器 在组件对象中定义
filters:{
'过滤器的名字':function(value){
}
}
//2.使用过滤器 使用管道符 |
{{price | '过滤器的名字'}}全局过滤器
// 注册全局的过滤器
//第一个参数是过滤器的名字，第二个参数是执行的操作
Vue.filter('reverse',function(value) {
return value.split('').reverse().join('');
});
//使用跟 局部过滤器一样