vue 相关
hello world
知识点：hello world 结构
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
Vue.createApp({
template: 'hello world'
}).mount("#root");
script>
body>
html>
定时器例子
知识点： 数据绑定
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
Vue.createApp({
data() {
return {
count: 1
}
},
template: '{
{count}}',
mounted() {
setInterval(() => {
this.count++;
}, 1000);
}
}).mount("#root");
script>
body>
html>
字符串反转例子
知识点： v-on 监听事件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
Vue.createApp({
data() {
return {
content: 'hello world'
}
},
methods: {
handleReverse() {
this.content = this.content.split('').reverse().join('');
}
},
template: `
{
{content}}
`
}).mount("#root");
script>
body>
html>
TodoLIst 例子
知识点：v-model 双向绑定，v-for 循环
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue);
this.inputValue = '';
}
},
template: `
- {
{item}} {
{index}}
`
}).mount("#root");
script>
body>
html>
组件拆分 TodoList
- 拆分组件
- vue 中如果想在属性上绑定 vue 变量，需要在属性前增加 v-bind。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
const app = Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue);
this.inputValue = '';
}
},
template: `
`
});
app.component('todo-item', {
props: ['item', 'index'],
template: '{
{index}}--{
{item}} '
});
app.mount("#root");
script>
body>
html>
Vue 中应用和组件的基础概念
// createApp 表示创建一个 Vue 应用，存储到 app 变量中
// 传入的参数表示，这个应用最外层的组件，应该如何展示
// mvvm 设计模式， m -> model 数据，v -> view 视图，vm -> viewModel 视图数据连接层
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
template: '{
{message}}';
});
// vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
// vm.$data.message
生命周期函数
// 生命周期函数：在某一时刻会自动执行的函数
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
// 在实例生成之前会自动执行的函数
beforeCreate() {
console.log('beforeCreate');
},
// 在实例生成之后会自动执行的函数
created() {
console.log('created');
},
// 在模板已经被编程函数之后立即自动执行的函数
// 在组件内容被渲染到页面之前自动执行的函数
beforeMount() {
console.log('beforeMount');
},
// 在组件内容被渲染到页面之后自动执行的函数
mounted() {
console.log('mounted');
},
// 当 data 中的数据发生变化时会自动执行的函数
beforeUpdate() {
console.log('beforeUpdate');
},
// 当 data 中的数据发生变化，同时页面完成更新后，会自动执行的函数
updated() {
console.log('updated');
},
// 当 Vue 应用失效时，自动执行的函数
beforeUnmount() {
console.log('beforeUnmount');
},
// 当 vue 应用失效时，且 dom 完全销毁之后，自动执行的函数
unmounted() {
console.log('unmounted');
}
});
想要显示的变量内容不作 html 转义
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
tempate: '';
});
const vm = app.mount('#root');
{ {}} 插值表达式中可以插入 js 表达式，但是不能写 js 语句
内容不随变量的变化而变化，而是只使用第一次的值
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
template: '{
{message}}'
});
const vm = app.mount('#root');
元素是否显示
const app = Vue.createApp({
data() {
return {
message: 'hello world',
show: true
}
},
template: '{
{message}}'
});
const vm = app.mount('#root');
事件绑定
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
methods: {
handleClick() {
alert('click');
}
},
template: '{
{message}}'
});
const vm = app.mount('#root');
v-on，v-bind 的简写
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
methods: {
handleClick() {
alert('click');
}
},
template: '{
{message}}'
});
const vm = app.mount('#root');
动态属性
动态属性可以在属性变量上加 [] 中括号来实现
const app = Vue.createApp({
data() {
return {
message: 'hello world',
name: 'title',
event: 'click'
}
},
methods: {
handleClick() {
alert('click');
}
},
template: '{
{message}}'
});
const vm = app.mount('#root');
修饰符阻止默认行为
const app = Vue.createApp({
data() {
return {
message: 'hello world',
name: 'title',
event: 'click'
}
},
methods: {
handleClick() {
alert('click');
}
},
template: `
`
});
const vm = app.mount('#root');
计算属性
const app = Vue.createApp({
data() {
return {
message: 'hello world',
count: 2,
price: 5
}
},
// 当计算属性依赖的内容发生变更时，才会重新执行
computed: {
total() {
return this.count * this.price;
}
},
methods: {
// 只要页面重新渲染，就会重新计算
getTotal() {
return this.count * this.price;
}
},
template: `{
{total}}`
});
const vm = app.mount('#root');
侦听器
const app = Vue.createApp({
data() {
return {
message: 'hello world',
count: 2,
price: 5,
newTotal: 0,
}
},
watch: {
// price 发生变化时，函数会执行
price() {
this.newTotal = this.price * this.count;
}
},
computed: {
// 当计算属性依赖的内容发生变更时，才会重新执行计算
total() {
return this.count * this.price;
}
},
template: `{
{newTotal}}`
});
const vm = app.mount('#root');
总结
computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存
computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁
样式
const app = createApp({
data: {
classString: 'red',
classObject: {
red: false, green: true},
classArr: ['red', 'green', {
brown: true}]
},
template: `
`
});
const vm = app.mount('#root');
父组件与子组件的 class
- 如果子组件的最外层只有一个标签那么父组件中调用时传入的 class 就直接会生效，如果子组件的最外城有多个标签那么外部父组件调用时传入的 class 就不会直接生效，需要子组件自己使用。
const app = createApp({
template: `
hello world
行内样式的定义
const app = Vue.createApp({
data: {
styleString: 'color: yellow',
styleObject: {
color: 'yellow'
},
},
template: 'hello world';
});
const vm = app.mount('root');
v-if，v-show
如果频繁显示隐藏，用 v-show，避免频繁的销毁创建元素
...
template: `
`;
...
template: `
if
else if
else
`;
v-for
const app = Vue.createApp({
data: {
listArray: ['first', 'second', 'thrid'],
listObject: {
first: 1,
second: 2,
thrid: 3
}
},
template: `
{
{item}}
{
{item}} -- {
{index}}
{
{value}} -- {
{key}}
{
{value}} == {
{key}} -- {
{index}}
`
});
为了提升 vue 的效率，在进行 v-for 循环的时候要给循环加 key值
template: `
{
{item}} -- {
{index}}
`
页面展示的变化
数组
- 使用数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
- 直接替换数组
this.listArray = ['bye', 'world'];
this.listArray = ['bye'].concat(['world']);
this.listArray = ['bye', 'world'].filter(item => item === 'bye');
- 直接更新数组的内容
this.listArray[1] = 'hello';
对象
直接添加对象的内容，也可以自动的展示出来
this.listObject.age = 18;
直接循环数字
template: `
{
{item}}
` // 会直接循环从 1 到 10 数字
如果再循环的过程中想要加判断
template: `
{
{value}} -- {key}
`
如果不想要外层的 div，可以用占位符
template: `
{
{value}} -- {
{key}}
`;
事件
额外获取参数同时传递事件对象
data() {
return {
counter: 0
}
},
methods: {
handleBtnClick(num, $event) {
this.counter += num;
}
},
template: '',
事件执行多个函数
template: `
`
事件修饰符
stop 阻止事件冒泡
self 判断点击的为自己
prevent 阻止默认行为
capture 会把事件运营模式变成的捕获模式
once 事件绑定只执行一次
passive 在事件为 scroll 时，会提升性能
template: `
`
按键修饰符
enter，tab，delete，esc，up，down，left，right
template: `
`
鼠标修饰符
left，right，middle
精确修饰符
exact
// 在按住 ctrl 并且没有按住其他键时，点击触发
template: `
123
`
双向绑定
- input
template: `
`
- textarea
template: `
`
- checkbox
const app = Vue.createApp({
data() {
return {
message: true
}
},
template: `
`
});
const app = Vue.createApp({
data() {
return {
message: []
}
},
template: `
`
});
checkbox 修改 true，false 选中的值
const app = Vue.createApp({
data() {
return {
message: 'world'
}
},
template: `
`
});
- radio
const app = Vue.createApp({
data() {
return {
message: ''
}
},
template: `
`
});
- select
const app = Vue.createApp({
data() {
return {
message: ''
}
},
template: `
`
});
const app = Vue.createApp({
data() {
return {
message: []
}
},
template: `
`
});
v-model 的修饰符
- lazy
input 框失去焦点时，model 绑定的数据才发生变化
const app = Vue.createApp({
data() {
return {
message: 'hello'
}
},
template: `
`
});
- number
对数据类型做转换，将字符串类型转为数字类型
const app = Vue.createApp({
data() {
return {
message: 123
}
},
template: `
`
});
trim
去掉前后的空格
组件的定义以及复用性
- 组件：页面的一部分
- 组件具有复用性
- 全局组件：只要定义了处处都能用，用起来简单，但是性能不高，名字建议，小写字母单词，中间用横线间隔
- 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大写字母开头驼峰命名
- 局部组件使用时要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射
全局组件
app.component('hello-world', {
template: 'hello world'
});
局部组件
const HelloWorld = {
template: 'hello world'
}
const app = Vue.createApp({
components: {
// 'hello-world': HelloWorld
HelloWorld
},
template: `
父子组件传值
const app = Vue.createApp({
template: `
如果使用静态传参，那么只能传字符串类型，而动态传参可以传数值类型等
const app = Vue.createApp({
data() {
return {
num: 123
}
},
template: `
传值的校验
type: String，Boolean，Array，Object，Function，Symbol
required：必填
default：默认值
app.component('test', {
props: {
content: Number
}
template: `
{
{typeof content}}
`
});
app.component('test', {
props: {
content: {
type: Number,
// required: true,
default: 789
}
},
template: `{
{content}}`
});
对传过来的值做更为深层次的校验
app.component('test', {
props: {
type: Number,
validator: function (value) {
return value < 1000;
},
default: function() {
return 456;
}
},
template: `{
{content}}`
});
绑定较多变量时的简写方式
v-bind=“params” 等价于 :a=“params.a” :b=“params.b” :c=“params.c”
const app = Vue.createApp({
data() {
return {
params: {
a: '123',
b: '456',
c: '789'
}
}
},
template: `- 属性传的时候，使用 content-abc 这种命名，接的时候使用 contentAbc 命名
- 单向数据流的概念：子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据
Non-prop 属性
- Non-props 属性为子组件未用 props 接收的负组件传过来的属性
- 如果子组件最外层只有一个元素，则子组件会自动继承父组件的 Non-props，如果不想继承，则需要添加 inhertAttrs: false，最外层如果多个元素，如果想继承父组件传过来的 Non-props，则需要在子元素上添加 v-bind="$attrs"
- 在其他位置也可以用到 Non-props 属性 this.$attrs
const app = Vue.createApp({
template: `
`
});
app.component('counter', {
mounted() {
console.log(this.$attrs);
},
// inhertAttrs : false,
template: `
Counter
Counter
Counter
`
});
子组件触发父组件事件
const app = Vue.createApp({
data() {
return {
count: 1
}
},
methods: {
handleAdd(step) {
this.count += step;
}
},
template: `
- 通过 emit 对向外触发的事件进行校验
- 通过数组校验
app.component('counter', {
props: ['count'],
emits: ['add'],
methods: {
handleClick() {
this.$emit('add', this.count + 3);
}
},
template: `
{
{count}}
`
});
- 通过对象校验
app.component('counter', {
props: ['count'],
emits: [{
add: (count) => {
if (count > 0) {
return true;
}
return false;
}
}],
methods: {
handleClick() {
this.$emit('add', this.count + 3);
}
},
template: `
{
{count}}
`
});
父子组件数据双向绑定，简写
const app = Vue.createApp({
data() {
return {
count: 1
}
},
template: 'v-model 自定义修饰符
const app = Vue.createApp({
data() {
return {
count: 'a'
}
},
template: `
slot 插槽
- slot 中使用的数据，作用域的问题
- 父模版里调用的数据属性，使用的都是父模版里的数据
- 子模版里调用的数据属性，使用的都是子模版里的数据
const app = Vue.createApp({
data() {
return {
text: '提交'
}
},
template: `
{
{text}}
`
});
app.component('myform', {
template: `
default value
`,
});
app.mount("#root");
- 具名插槽
const app = Vue.createApp({
template: `
header
footer
`
});
app.component('layout', {
template: `
v-slot:header 可简化为 #header
const app = Vue.createApp({
template: `
header
footer
`
});
- 作用域插槽
const app = Vue.createApp({
// {item} 为解构
template: `
{
{item}}
`
});
app.component('list', {
data() {
return {
list: [1,2,3]
}
},
template: `
动态组件
- keep-alive 会将组件中修改的内容保存到缓存中，再次使用时从缓存中取出来
const app = Vue.createApp({
data() {
return {
currentItem: 'input-item'
}
},
methods: {
handleClick() {
if (this.currentItem === 'input-item') {
this.currentItem = 'common-item';
} else {
this.currentItem = 'input-item';
}
}
},
template: `
`
});
app.component('input-item', {
template: ''
});
app.component('common-item', {
template: 'hello world'
});
app.mount("#root");
- 异步组件
const app = Vue.createApp({
template: `
其他基础知识点
- v-once 让某个元素标签只渲染一次
- ref 实际上是获取 Dom 节点 / 组件引用 的一个语法
const app = Vue.createApp({
data() {
return {
count: 1
}
},
mounted() {
this.$ref.count.innerHTML = 'hello';
},
template: `
{
{count}}
`
});
const app = Vue.createApp({
data() {
return {
count: 1
}
},
mounted() {
this.$ref.common.sayHello();
},
template: `
`
});
app.component('common-item', {
methods: {
sayHello() {
alert('hello');
}
},
template: ``
});
- provide / inject 跨层传递参数
const app = Vue.createApp({
provide: {
count: 1
}
...
});
app.component('child', {
...
});
app.component('child-child', {
inject: ['count']
});
const app = Vue.createApp({
data() {
return {
count: 1
}
},
provide() {
return {
count: this.count
};
}
...
});
app.component('child', {
...
});
app.component('child-child', {
inject: ['count']
});
使用 transition 标签实现单元素的过度和动画效果
使用
v-enter-from 开始进入
v-enter-active 进入过程
v-enter-to 进入结束
v-leave-from 开始离开
v-leave-active 离开过程
v-leave-to 离开结束
- 不自定命名
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
<style>
.v-enter-from {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 2s;
}
.v-enter-to {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
style>
head>
<body>
<div id="root">div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
template: `
hello world
`
});
app.mount('#root');
script>
body>
html>
- 自定义名称
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
<style>
.com-enter-from {
opacity: 0;
}
.com-enter-active, .com-leave-active {
transition: opacity 2s;
}
.com-enter-to {
opacity: 1;
}
.com-leave-to {
opacity: 0;
}
style>
head>
<body>
<div id="root">div>
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
template: `
hello world
`
});
app.mount('#root');
script>
body>
html>
自定义动画名称
template: `
hello world
`
按照动画或过度的时间执行
template: `
hello world
`
template: `
hello world
`
直接定义动画时间
template: `
hello world
`
template: `
hello world
`
js 动画
const app = Vue.createApp({
data() {
return {
show: false
}
},
methods: {
handleBeforeEnter(el) {
el.style.color = "red";
},
handleEnter(el, done) {
const timer = setInterval(() => {
const color = el.style.color;
if (color === 'red') {
el.style.color = 'blue';
} else {
el.style.color = 'red';
}
}, 1000);
setTimeout(() => {
clearInterval(timer);
done();
}, 3000)
},
handleEnterEnd() {
alert(111);
}
},
template: `
hello world!
`
});
app.mount('#root');
多个单元素之间的切换
- 先出后入 为 mode=“out-in” 先入后出 mode=“in-out”
template: `
hello world
bye world
`
- 元素初始就有动画效果
template: `
hello world
bye world
`
- 组件间切换
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
<style>
.v-leave-to,
.v-enter-from {
opacity: 0;
}
.v-leave-active,
.v-enter-active {
transition: opacity 2s ease 0s;
}
.v-leave-from,
.v-enter-to {
opacity: 1;
}
style>
head>
<body>
<div id="root">div>
<script>
const componentA = {
template: 'hello world'
};
const componentB = {
template: 'bye world'
};
const app = Vue.createApp({
components: {
'component-a': componentA,
'component-b': componentB
},
data() {
return {
currentComponent: 'component-a'
}
},
methods: {
handleClick() {
if (this.currentComponent === 'component-a') {
this.currentComponent = 'component-b';
} else {
this.currentComponent = 'component-a';
}
}
},
template: `
`
});
app.mount('#root');
script>
body>
html>
列表动画
.v-move 列表中移动的项的移动渐变动画
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
<style>
.list-item {
display: inline-block;
margin-left: 10px;
}
.v-enter-from {
opacity: 0;
transform: translateY(20px);
}
.v-enter-active {
transition: all 2s ease 0s;
}
.v-enter-to {
opacity: 1;
transform: translateY(0);
}
.v-move {
transition: all 2s ease 0s;
}
style>
head>
<body>
<div id="root">div>
<script>
const app = Vue.createApp({
data() {
return {
list: [1, 2, 3]
}
},
methods: {
handleClick() {
this.list.unshift(this.list.length + 1);
}
},
template: `
{
{item}}
`
});
app.mount('#root');
script>
body>
html>