vue3快速上手和基本特性

1）vue使用方式

1）cdn方式

        该方式无需使用包管理工具，只要用script标签引入js文件即可，可以快速使用vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2）创建vue项目

        创建vue项目时需要nodejs环境，安装好nodejs后先为nodejs换一个国内镜像源以提升下载速度。

 npm config set registry https://registry.npmmirror.com

        接下来就可以创建项目了，首先移动到你要创建项目的目录下，执行如下命令

npm create vue@latest

        之后跟着提示就可以创建一个vue项目了，不过启动项目还需要做如下操作：

首先移动到项目目录下

cd <your-project-name>

获取所有依赖

npm install

运行项目

npm run dev

2）vue的特性

1）组件化

        创建好vue项目后打开index.html

可以发现这个页面引入了一个main.js，打开该文件后发现其引入了三个文件

其中打开app.vue发现 

        共引入了三个，RouterLink, RouterView， HelloWorld，且均在代码中出现。还能发现You did it!，修改为其他值后发现主页的数据也跟着变动了，可以断定这是主页的左半部分。将RouterView删除后发现页面少了一半，可以断定这是主页的右半部分。

        打开HelloWorld所在的文件

        可以发现msg正式上文中Helloword标签中的属性，且后三个红框的内容都是页面上存在的文字，此时不妨大胆猜测一下：我们将这段代码作为一个组件，命名为helloword，将在使用helloword时传入一个msg的属性得到显示效果，这个显示效果可以写在页面的任何位置。

        为了验证我们的猜想，我们将<RouterView />也换成<HelloWorld msg="You did it!" />

        至此我们发现了vue是组件化的，可以很方便的复用代码。它允许你将UI拆分成可复用的独立部分，并可以嵌套组合使用。每个Vue组件都包含自己的模板、逻辑和样式，vue项目正是由这一个个组件构成的

2）数据绑定

        数据绑定是vue的一个重要特性，即数据到视图的双向绑定。当数据发生变化时，视图会自动更新；当视图中的表单元素被修改时，数据也会自动更新。省去了每次都要重新获取数据的步骤。下文将会详细讲解数据绑定的使用方法

3）基本语法

1）挂载

        首先提取vue包

const {createApp} = Vue

        然后调用createApp，并将这个函数挂载到#app这个元素上

createApp().mount("#app")

       这样就将createApp挂载到了#app上，进行下一步操作

2）数据传递

        为createApp()函数传入参数，参数是一个对象，用配置对象属性的方式配置该对象的内容，内有data(){}用于返回想要的数据，返回的数据是对象。还可以放一些方法等

<div id="app">我是{{person.name}}，{{message}}</div>
<script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    message:"v我50，让你当大将军",
                    person:{
                        name:"秦始皇",
                        age:11,
                        gender:1
                    },
                    number1:10,
                    number2:5
                }
            },
            methods:{
                m1(num){
                    this.number1 = num
                }
            }
        }).mount("#app")
</script>

3）页面接收数据

        1）插值表达式

        {{}}为差值表达式，可以放在被挂载元素的任何位置，内部放变量名。

<div id="app">我是{{person.name}}，{{message}}</div>

        这段代码的显示效果是我是秦始皇，v我50封你做大将军。

        差值表达式的功能非常强大，它可以方便的对数据进行各种操作，如下

{{person. Gender==1?"男":"女"}}<br>
<label for="">{{number1}}/{{number2}}=</label><label for="">{{number1/number2}}</label><br>
<label for="">欢迎语=</label><label for="">{{message.toLowerCase()}}</label><br>

2）数据绑定

        在标签内不能使用插值表达式，但是可以使用数据绑定，使用方式是将v-bind添加到属性前面。v-bind可省略，只留一个冒号。

<input type="text" v-bind:value="message">
<input type="text" :placeholder="message">

3）双向数据绑定

        使用v-model:属性，默认绑定value，当value属性发生变化时script中的值随之改变。

<input type="text" v-model:="message">

4）事件绑定

        绑定事件现在的写法有所变化，使用@或v_on:事件名="函数名(参数列表)"如果无参数则无需括号。

<button type="button" @click="m1">按钮</button>

        如果点击这个按钮则带有v-model属性的标签值会自动更新