最基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
template: ‘<div>Hello World</div>‘
}).mount("#app")
</script>
</html>
createApp()方法：在第一篇文章编写HelloWorld的时候，就写过这句话Vue.createApp()从英文单词上理解，这个就是创建一个应用create-创建，App-Application-应用，前面的Vue就是Vue这个框架，所以Vue.createApp()的意思就是创建一个Vue的应用。
mount()方法mount()方法就是挂载到某个Html的DOM节点上，它接受一个字符串型参数,参数可以使用CSS选择器，一般都是ID选择器的形式，指定挂载的DOM元素。
Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm哪？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。
mvvm解释: 第一个
m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。
组件使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>佳丽列表</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
inputValue: ‘‘,
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue)
this.inputValue = ‘‘
}
},
template: `
<div>
<my-title />
<input v-model="inputValue" />
<button v-on:click="handleAddItem">增加佳丽</button>
<ul>
<my-jiali
v-for="(item,index) of list"
v-bind:item="item"
v-bind:index="index"
/>
</ul>
</div>
`
})
app.component(‘my-title‘, {
template: ‘<h1 style="text-align:center">象牙山洗脚城</h1>‘
})
app.component(‘my-jiali‘, {
props: [‘item‘, ‘index‘],
template: ` <li >[{{index}}]-{{item}}</li>`
})
app.mount("#app")
</script>
</html>
Vue3中有八个生命周期函数，
v-pre指令、v-cloak指令、v-once指令。 1：v-pre指令。 该指令不会解析vue语法，在模板中跳过vue的编译，而是直接把vue代码输出页面。如： list:"高时银博客" <div v-pre>{{list}}</div> 本来{{list}}是应该输出list属性的值 “高时银博客”，而使用了 v-pre 指令后，就直接输出源代码{{list}}。 2：v-cloak指令。 这个指令使用机率非常少。vue绑定数据时，渲染时会出现变量闪烁，例如 <div class="#app"> <p>{{value.name}}</p> </div> 在加载时会看到{{value.name}}在页面出现，过几秒才会渲染数据。而v-cloak就是用来解决这个问题的，如： <div class="#app" v-cloak> <p>{{value.name}}</p> </div> 在css里面要添加： [v-cloak] { display: none; } 这样就可以防止页面闪烁了。不过，实际使用中，我很少看到变量闪烁的情况，也许是数据量太小的缘故吧。 3：v-once指令。 这个指令表示，只渲染一次。 <div v-once>{{massage}}</div> <input v-model="massage" type="text"> <div>{{massage}}</div> 上面代码中，第一个div中的{{massage}}只渲染一次，当我们在input输入框中修改massge值时，第一个div因使用了v-once指令而不会再发生变化，而第二个div的内容会跟input内容变化而变化
@click.stop与@click.prevent
@click.stop 阻止事件冒泡 @click.prevent 阻止事件的默认行为， <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> //阻止a标签跳转，仅执行函数test4 <form action="/xxx" @submit.prevent="test5"> //阻止表单提交，仅执行函数test5 <input type="submit" value="注册"> </form>
@keyup.enter
//按下enter时，执行方法test7 <input type="text" @keyup.enter="test7"> methods: { test7 (event) { console.log(event.keyCode) alert(event.target.value) } }
原文：https://www.cnblogs.com/foreXdd/p/14732549.html