初始vue3

如今新vue项目首选用vue3 + typescript + vite + pinia+……模式。在使用Vue2时，使用的是选项式api进行vue项目的开发，vue3在这里做了重大的更新，vue3使用组合式api进行对项目实例化和构建。另外需要注意vue项目需要nodeJS环境的支持，而vue3需要nodeJS的版本最低是node14.18版本，目前最新是node16的版本（奇数版本一般不用），所以在开发vue3项目之前首先需要安装对应的nodeJS环境。

vue2与vue3实例化vue实例对比：

vue2选项式api:

new Vue({
    el: '#app',
    data() {
        return {
            
        }
    },
    methods: {
        
    },
    computed: {
        
    }
})

vue3组合式api:

//生成一个vue实例
var app=Vue.createApp({
    data:function(){
			return{
				msg:"Hello Vue",
				num:0
				}
			},
	methods:{
					
		},
	computed: {
					
		},
});
//app挂载的意思
app.mount("#app");

vue3项目初体验：

这里通过引入vue.js的形式创建一个简单的vue3项目。

vue.js可以通过bootCDN下载。

<div id="app">
	<div>{
  {msg}}</div>
	<div>{
  {html}}</div>
	<div v-html="html"></div>
	<div>{
  {arr.join("-")}}</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.prod.js"></script>
<script>
	//生成一个vue实例
	var app=Vue.createApp({
		data:function(){
			return{
				msg:"Hello Vue",
                html:`<h1>HTML指令</h1>`,
				arr:[1,2,3,4,5,6]
				}
			}
		});
		//app挂载的意思
		app.mount("#app");
</script>

v-model数据双向绑定

1. v-model只能用在表单相关的元素（input、select、 textarea、） 或者自定义组件上

2. 方向一： 从状态model到view视图（页面中的内容） 状态数据 映射到了视图界面的内容

3. 方向二： 从view视图 到 状态 model input标签内容随着用户行为进行一个改变，输入的内容同步到状态数