1.创建项目
在<body>内引入vue的文件，之后用Vue.createApp()创建应用，再用mount()挂载应用到某一个元素上。比如”#app”，就是挂载到id为app的元素上。
2.语法
在创建应用时可以传递参数
data
const vueapp = {
data() {
return {
msg: "Hello Vue",//设置值
};
},
const app = Vue.createApp(vueapp).mount("#app");//创建应用并绑定到指定元素上
比如上面的msg:"Hello Vue"
在<div id="app"><h1>{{ msg }}</h1></div>中，vue会将“Hello Vue”绑定到{{ msg }}上。
除了在创建应用时传递参数设置数据，也可以用代码设置。
console.log(app.msg) // 输出已有的值: => Hello Vue
app.msg = "Hello Vue.js!" // 改变已有的值
console.log(app.msg) // 输出改变后的已有的值=> Hello Vue.js!
app.anothermsg = "javascript" // 设置新的值
console.log(app.anothermsg) // 输出新的值
此处仅使用了字符串作为例子，其他类型也可以使用
methods
这个就是方法了。
methods: {
logmsg() {
console.log(this.msg)
},
},
这里规定了一个叫addnumber()的方法，如果调用它，会在控制台打印msg，this就是指app，即是应用。
指令
开头为v-的特殊元素属性，它会执行一些操作。
v-bind
将一个值绑定到元素上。例如：
<img v-bind:src="example.com/xxx.jpg">
渲染后的元素，就会是
<img src="example.com/xxx.jpg">
也可以将v-bind去掉，改成<img :src="example.com/xxx.jpg">，结果不会改变。也可以用对象进行绑定<img v-bind="{ src:"example", 'class': 'isClass'}">。在这里，绑定class时，class的绑定与否取决于‘isClass’的真假值。
v-if
基于表达式值的真假性，来条件性地渲染元素或者模板片段。
<h1 v-if="isShow">some text</h1>// 如果isShow为真
v-else-if
和v-if作用相同，但v-if只能有一个，v-else-if可以有多个。v-else-if前必须跟着v-if。
<h1 v-if="isShow">some text</h1>// 如果isShow为真
<h1 v-else-if="isShow2">some text</h1>// 如果isShow2为真且v-if没有执行
<h1 v-else-if="isShow3">some text</h1>// 如果isShow3为真且上面的v-if和v-else-if没有执行
v-else
前面必须有v-if。如果v-if``v-else-if都判断失败了，就会执行v-else。
<h1 v-if="isShow">some text</h1>// 如果isShow为真
<h1 v-else-if="isShow2">some text</h1>// 如果isShow2为真且v-if没有执行
<h1 v-else-if="isShow3">some text</h1>// 如果isShow3为真且上面的v-if和v-else-if没有执行
<h1 v-else>something</h1>// 如果上面的判断都没有执行
v-for
基于数据多次渲染元素。
//items: [
//{ id: 1, text: "item1" },
//{ id: 2, text: "item2" },
//{ id: 3, text: "item3" }
//],
<div v-for="item in items">// in也可以用of替换
{{ item.text }}
</div>
在基于对象作为数据时，还可以使用(value, key) in anobject或(value, key, index) in anobject。value就是对象内的值，如
{"iamatext": "hi"}
中，value就是“hi”，key就是“iamatext”，index就是0。
一个元素上不建议同时使用v-if和v-for，两者之间的层级不明显。在Vue中，一个元素上如果同时出现了它们两个，v-if有比v-for更高的优先级。可以把v-if和v-for放在两个元素上来解决问题。
