在公司用了很久的vue，从来没有系统学过，在此系统学习一波。
2.0 vue最简单版使用
我们知道vue是一个经常进行高度组件化的js工具库，但组件是什么？
如下例子。
<!DOCTYPE html>
<html lang="ch-Zn">
<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>Document</title>
</head>
<body>
<div id="app">
{{message}}
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
</todo-item>
</ol>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {//表示组件名称叫“todo-item”
props: ['todo'],//接收的属性叫tudo
template: '<li class="text">{{todo.text}}</li>'//模板叫这个
})
var app = new Vue({
el: '#app',
data: {
message: 'hello Vue!',
groceryList: [{
id: 0,
text: '蔬菜'
}, {
id: 1,
text: '奶酪'
}, {
id: 2,
text: '干果'
},
]
}
})
</script>
</html>
image.png
image.png
3.0 vue开发环境搭建
vue脚手架。
image.png
image.png
image.png
看到如下画面表示运行成功。
image.png
通过vsCode打开文件夹。
image.png
4.0 vue组件的生命周期
image.png
image.png
image.png
image.png
<template>
<div>
{{ log("render") }}
{{ now }}
<button @click="start = !start">{{ start ? "停止" : "开始" }}</button>
</div>
</template>
<script>
import moment from "moment";
export default {
data: function() {
console.log("data");
this.moment = moment;
this.log = window.console.log;
return {
now: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
start: false
};
},
watch: {
start() {
this.startClock();
}
},
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
this.startClock();
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeDestroy() {
console.log("beforeDestroy");
clearInterval(this.clockInterval);
},
destroyed() {
console.log("destroyed");
},
methods: {
startClock() {
clearInterval(this.clockInterval);
if (this.start) {
this.clockInterval = setInterval(() => {
this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
}, 1000);
}
}
}
};
</script>
5.0 函数式组件
无状态、无实例、没有this上下文、无生命周期。
就是一个function或者表达式。
6.0 指令（14种）
image.png
v-text会把元素内所有的东西替换掉。
v-bind:key == :key
v-on:click == @click
v-pre直接输出其中的字符串，而不是转译
{{}}符号v-once绑定的变量指挥执行一次。
自定义指令：
image.png
组件的一般使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 4</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// mvvm , vue 实例，vue 组件
const app = Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue);
this.inputValue = '';
}
},
template: `
<div>
<input v-model="inputValue" />
<button
v-on:click="handleAddItem"
v-bind:title="inputValue"
>
增加
</button>
<ul>
<todo-item
v-for="(item, index) of list"
v-bind:content="item"
v-bind:index="index"
/>
</ul>
</div>
`
});
app.component('todo-item', {
props: ['content', 'index'],
template: '<li>{{index}} -- {{content}}</li>'
});
app.mount('#root');
</script>
</html>
事件修饰符：stop, prevent, capture, self, once, passive
按键修饰符：enter, tab, delete, esc, up, down, left, right
鼠标修饰符：left, right, middle
精确修饰符：exact
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 12</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// event, $event
// 事件修饰符：stop, prevent, capture, self, once, passive
// 按键修饰符：enter, tab, delete, esc, up, down, left, right
// 鼠标修饰符：left, right, middle
// 精确修饰符：exact
const app = Vue.createApp({
methods: {
handleClick() {
console.log('click')
},
},
template: `
<div>
<div @click.ctrl.exact="handleClick">123</div>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
网友评论