Vue3.x的安装和初始化
vue3的官网
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88
下载Vue2.x
npm install vue
Vue3.x的CDN加载
<script src="https://unpkg.com/vue@next"></script>
Vue3.x相关下载
# 更新npm到最新
npm install npm@latest -g
# 下载vue3.x
npm install vue@next
npm i vue@next
# 不建议全局安装，因为vue总是在框架项目中各自使用各自的
npm install vue@next -g
# 更新vue
npm update vue@next
# 卸载vue
npm uninstall vue@next
我们指定，在国内访问国外的服务器非常的慢，而npm的官网镜像就是国外的服务器。为了节省安装模块的时间，可以使用淘宝镜像，安装命名如下：
npm install -g cnpm --registry=https://registry.npmmirror.com
以后就可以直接使用cnpm安装任何模块了
cnpm install vue@next
第一个Vue3.x实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--定义一个视图-->
<div id="app"><!---View视图--->
<input type="text" v-model="title"/>
<!--渲染data数据模型中数据到视图中-->
<h1>{ {title} }< /h1>
<!--渲染属性-->
<a v-bind:href="url" target="_blank">yykk网站< /a>
<!--渲染html-->
<p>{ {chtml} }< /p>
<p v-html="chtml">< /p>
<!--事件绑定和处理-->
<button v-on:click="clickme">点我< /button>
</div>
<!--引入vue3.xjs-->
<script src="js/vue.global.js"></script>
<!--创建一个vue实例-->
<script>
const vm = Vue.createApp({
//--------------ViewModel---vue
data() {
//数据模型Model -- JavaBean
return {
title: "Hello Vue3.x我来了!!!",
url: "https://www.itbooking.net",
chtml: "<strong>我是一个帅哥!!!</storng>"
}
},
methods: {
clickme() {
alert(this.title)
this.title = "nihao";
}
}
}).mount("#app"); //挂载点
/*
* vue规律:
* 初始化是固定格式，Vue.createApp任何一个单词都不能写错，必须完全匹配。
* vue2和vue3的改变：初始化发生了改变和data不在对象，而是一个函数+返回对象+和生命周期进行融合。
*
*
* 1：如果你页面上的数据需要被替换，那么就必须先到data中定义一个属性
* 2: 想尽一切办法然后通过axios或者一些事件去改变这个data属性，vue就自动去替换view视图
* 3: 替换过程中，可能会用vue指令和语法
* 4: 后续用在vue指令上的东西都必须在data中定义
*
* */
</script>
</body>
</html>