本文档主要介绍
Vue3的用法，偶尔会穿插一些Vue3和Vue2的比较
创建
可以通过如下代码简单的创建一个vue应用
<html>
<head></head>
<body>
<div id="counter">
Counter: {{ counter }}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter')
</script>
</body>
</html>
需要留意两点，一是Vue.createApp接收的第一个参数是一个包含data和mounted等属性的对象，这是一个相对固定的用法，我们称之为是 app 对象。上述代码效果如下所示：
评注：
vue3的创建方式和vue2有所不同，我认为变化在于和react更像
HTML属性
我们可以动态修改HTML属性的数值，这里不能用花括号的方式，而是要用v-bind指令，举例如下：
<html>
<head>
<style>
.border {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="bind-attribute">
<div v-bind:title="message" v-bind:class="className">
鼠标hover查看信息
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AttributeBinding = {
data() {
return {
className: 'border',
message: '页面加载时间是： ' + new Date().toLocaleString()
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
</script>
</body>
</html>
注意：
v-bind:class可以简写成:class，关于样式的控制后面会专门讲到
事件 & 交互
需要一种方式来知晓用户的操作并且对其操作做出回应，比如需要实现用户点击按钮后展示一个弹框，那么就需要程序监听到点击操作并通过设置相应的变量来控制弹框的可见性。在Vue中我们主要是通过v-on指令来达到监听不同事件的目的
<html>
<head>
<style>
.border {
width: 100px;
height: 100px;
background-color: red;
}
.border.hide {
display: none;
}
</style>
</head>
<body>
<div id="bind-attribute">
<div v-bind:class="className">假设这是一个弹框</div>
<button v-on:click="toggle">展示/隐藏</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AttributeBinding = {
data() {
return {
className: 'border',
}
},
methods: {
toggle() {
if (this.className === 'border') {
this.className = 'border hide'
} else {
this.className = 'border'
}
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
</script>
</body>
</html>
注意：我们是在
methods里设定的函数内部通过this变量引用到data里的数据，所以要注意这里的toggle不能写成箭头函数，toggle: () => {}的写法是错误的，此时this指向的是Window
条件渲染
有时候我们希望通过不渲染相应的dom元素来控制元素的可见性，此时可以使用v-if指令
<html>
<head>
<style>
.border {
width: 100px;
height: 100px;
background-color: red;
}
.border.hide {
display: none;
}
</style>
</head>
<body>
<div id="bind-attribute">
<div v-if="show" class="border">假设这是一个弹框</div>
<button v-on:click="toggle">展示/隐藏</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AttributeBinding = {
data() {
return {
show: true
}
},
methods: {
toggle() {
this.show = !this.show;
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
</script>
</body>
</html>
这个效果和上一个是一样的，都是点击后展开或隐藏，区别在于这里的隐藏是因为没有渲染dom，而不是通过设置display样式
组件
几乎任何的视图层的前端框架都会提供组件来达到复用代码的能力，在React中我们可以通过创建返回jsx的函数或者是继承自React.Component的类来创建组件。而在Vue3中，一个组件就是一个有预定属性的对象（类比之前我们提到的app 对象），并将这个对象挂载到父组件的components属性中，并且可以将其写在父组件的模板中。
我们通过template属性定义组件的模板，通过props定义要传递的参数，通过在调用组件的模板里通过v-bind传递参数
<html>
<head></head>
<body>
<div id="main">
<my-component v-for="item in people" v-bind:name="item.name" v-bind:year="item.year"></my-component>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = {
data() {
return {
people: [{
name: 'jack',
year: 12
}, {
name: 'tom',
year: 10
}, {
name: 'mack',
year: 11
}]
}
},
components: {
// 注册一个新组件
MyComponent: {
props: ['name', 'year'],
template: `<li>hello , my name is {{name}} , i am {{year}} years old</li>`
}
}
}
Vue.createApp(app).mount('#main')
</script>
</body>
</html>
注意：初学
Vue的人会对子组件的props是个字符串数组不是很习惯，特别是会不断的在到底使用字符串还是变量而混淆。另外需要注意的是父组件给子组件是通过v-bind传递props参数的
