Vue笔记01
什么是Vue? 怎么开始?
百度百科
Vue是一个流行的JavaScript框架， 用于构建用户界面，具有轻量级、 易学易用等特点，可以帮助开发人员快速、 高效地构建现代化的Web应用程序。
是目前最流行的前端框架 Vue作者尤雨溪
安装 创建 vue3
首先先安装16版本以上的node.js
使用CMD测试是否安装成功
1 | 输入: node -V |
创建项目(组件式)
创建项目文件夹使用cmd进入至项目文件夹
cmd中显示为
1 | Microsoft Windows [版本 10.0.22000.194] |
在cmd中输入安装Vue项目脚手架
1 | npm init vue@latest |
然后会出现 使用 ← → 键选择,enter确认
1 | ✔ Add TypeScript--是否添加TypeScript支持。选择No。 |
然后可以通过 VScodeVSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。 打开文件夹或者继续使用cmd
1 | cd 你的项目文件夹 |
拉取组件
1 | npm install |
启动
1 | npm run dev |
开始第一个Vue项目
打开App.vue文件 修改内容
1 | <template> |
在<template>标签中编写html代码 在<script>标签里写JS代码
1 | <template> |
我们定义了一个名为 test 的 Vue 组件，
并在 data 中定义了两个变量 title 和 content 并且绑定到了组件模板的 <h1>和<p>元素上，并使用了插值表达式 {{ }} 来显示数据内容
Vue语法模板
插值表达式
插值表达式是 Vue 模板语法的一种基本特性，它可以将 JavaScript 表达式嵌入到模板中，并在后续的渲染过程中替换成实际的结果显示给用户。
例如:
1 | <div>{{ message }}</div> |
上面的 Vue 指令是 Vue 模板语法的另一种基本特性，它们可以扩展模板语言的能力，并且在组件中执行一些逻辑操作。指令使用 v- 前缀来表示 上述代码中，使用 上述代码中，使用 4. 上面的代码中，使用 5. 上面的代码中，使用 在 Vue 3 中，可以通过 在这里，我们定义了一个响应式数据对象 这样就能使用 当使用 在模板中可以直接绑定 当点击按钮时， 这样就将 而在 Vue 3 中，我们不再使用 在这个示例中，我们使用 {{message}}就是一个插值表达式 Vue 在渲染模板时会自动计算该表达式并将其结果展示在该
插值表达式可以包含任意合法的 JavaScript 表达式 如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43<template>
<div>
<!--数组-->
{{ arr[1] }}
</div>
<div>
<!--方法-->
{{ hello() }}
</div>
<div>
<!--对象-->
{{ test.name }}
</div>
<!--这是js方法调用 -->
<div>当前秒数为：{{ second }}</div>
<!--表达式 -->
<div>{{1+1+1+11+1+1}}</div>
</template>
<script>
export default {
data() {
return {
second: 0, // 初始秒数为0
//数组
arr: ['啊对对对', '这是数组'],
//方法
hello() {
return "这是方法";
},
//对象
test: {
name: '这是对象',
age: 99999,
}
};
},created() {
setInterval(() => {
this.second += 1; // 每个1秒秒数加1
}, 1000);
}
};
</script>指令
v-if：根据表达式的真假值来有条件地渲染一个元素。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<template>
<div v-if="show">这个元素只会在 show 为真时显示
<button v-on:click="show=false">点击翻转值</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false // 初始化为 false
};
},
mounted() {
this.show = true; // 在组件挂载后将 show 改成 true，此时元素才会呈现出来
}
};
</script>
v-for：基于 Vue 实例中的数据循环渲染一组元素。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<template>
<ul>
<li v-for="item in test" :key="item">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
test: ["test1", "test2", "test3"]
};
}
};
</script>v-for 遍历了一个字符串数组，并将每个数组元素渲染到了一个 li 元素中。
v-model：通常用于表单元素，用于在表单元素（文本框、单选框、多选框等）和 Vue 实例之间双向绑定数据。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<template>
<div>
<input type="text" v-model="message" />
<p>您输入的内容是：{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "" // 初始化为一个空字符串
};
}
};
</script>v-model 使得表单元素和 Vue 实例绑定到一起，在文本框中输入内容时，Vue 实例中的数据也会跟着变化。v-bind：用于将数据绑定到 HTML 的属性上。1
2
3
4
5
6
7
8
9
10
11
12
13<template>
<img v-bind:src="imgUrl" alt="我的图片是外部图床 可能被浏览器拦截图片外链 打开控制台看看图片连接有没有填充上来就ok" />
</template>
<script>
export default {
data() {
return {
imgUrl: "https://s2.loli.net/2022/10/18/soq82lvxakjeHB1.jpg" // 图片地址
};
}
};
</script>v-bind 将组件实例中的数据绑定到了 img 标签的 src 属性上v-on：用于监听 DOM 事件，在触发事件时自动执行对应的方法。1
2
3
4
5
6
7
8
9
10
11
12
13<template>
<button v-on:click="testClick">点击按钮</button>
</template>
<script>
export default {
methods: {
testClick() {
alert("您点击了按钮");
}
}
};
</script>1
2
3<button v-on:click="testClick">按钮</button>
等价于
<button onclick="testClick()">按钮</button>v-on 监听了 button 元素的 click 事件，并在点击按钮时自动调用了相应的 testClick 方法进行处理。过滤器
Vue响应式
reactive
reactive() 方法创建一个响应式数据对象。
使用方法如下：1
2
3
4
5
6
7
8
9
10
11
12
13import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
})
return {
state
}
}
}state，当 state.count 的值发生变化时，对其订阅的视图都会自动更新。
需要注意的是，不要直接修改 state 对象的属性值，改为使用 .value API 显示调用。例如，如果想要将 count 的值加1，应该使用 state.count.value++，而非 state.count++。
同时，也可以使用 toRef() 将响应式对象中的某一项转化成 ref 类型：1
2
3
4
5const state = reactive({
name: 'John',
age: 28
});
const nameRef = toRef(state, 'name');nameRef.value 来读写 name 值，而任何对 name 的修改都会强制触发视图更新。
总的来说，reactive() 可以帮助我们实现“响应式”，即在数据变动时自动通知前端组件进行变更。ref
ref 函数创建变量时，会返回一个包含 value 属性的对象，这个属性的值为传入 ref() 中的初始值。
我们可以直接访问 value 属性来获取和修改这个变量的值，而这些操作都是响应式的，即数据源中数据发生变化时，界面上对应的地方都自动更新。
例如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const handleClick = () => {
count.value++;
};
return {
count,
handleClick
}
}
}count 变量：1
2
3
4
5
6<template>
<div>
<button @click="handleClick">Increment</button>
<p>Count: {{ count }}</p>
</div>
</template>handleClick 函数中调用 count.value++ 对 count 进行了修改，这时模板中展示 {{ count }} 的地方会自动更新显示当前的计数器值。
需要注意的一点是，在 Vue 3 中，使用 ref 创建的基础类型数据是不可变的，如果要改变它们的值，必须通过修改它们的 value 属性来实现（如 count.value++）。同时，如果需要把 ref 作为 prop 传递给子组件，需要加上 .value 即 :propName="refVariable.value"。1
2
3
4
5const state = reactive({
foo: 'bar'
});
const fooRef = toRef(state, 'foo');state.foo 转化为了 fooRef.value，fooRef 对象在被修改时，也会触发相应的视图更新。
beforeCreate 和 setup 分别对应的是 Vue 2 和 Vue 3 中创建组件时执行的生命周期钩子函数。
在 Vue 2 中，我们可以使用 beforeCreate 钩子来在实例初始化之后、创建完数据响应式之前执行一些逻辑。1
2
3beforeCreate(){
console.log('beforeCreate');
}beforeCreate 钩子，而是使用更加灵活和强大的 setup 函数。setup 函数用于代替 Vue 2.x 中的 beforeCreate 和 created 两个钩子函数的功能，并且可以访问到组件实例上下文对象，返回一个用于渲染组件的 render 函数所需要的数据。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { reactive } from 'vue';
export default {
setup() {
console.log('setup');
const state = reactive({
message: 'Hello, World!'
});
return {
state
}
}
}setup 函数创建了一个响应式状态对象，并将其作为返回值暴露出去，这样就可以在模板中直接使用了。
需要注意的是，在 Vue 3 中，你必须使用 setup 函数来创建组件，不能像 Vue 2 中一样直接使用选项对象导出组件（如 data()、methods 等），否则会抛出错误。
