1.初识Vue

墨颜丶2023-02-072024-11-12

渐进式开发框架

Vue定义为渐进式JavaScript框架，所谓渐进式，是指其被设计为可以自底向上逐层应用。可以使用Vue的框架提供的某层功能，也可以与其第三方库整合应用

第一个Vue应用

基于vue3.0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    
</head>
<body>
    <div style="text-align: center;" id="Application">
        <h1>{{count}}</h1>
        <button v-on:click="clickButton">点击</button:v-on>

    </div>
    <script>
        // 定义一个vue组件，名为App
        const App = {
            // 定义组件中的数据
            data() {
                return {
                    // 目前只用到了count数据
                    count:0
                }
            },
            // 定义组件中的函数
            methods:{
                // 实现单击按钮的方法
                clickButton(){
                    this.count = this.count + 1
                }
            }
        }
        // 将Vue组件绑定到页面上id为Application的元素上
        Vue.createApp(App).mount("#Application")
    </script>
</body>
</html>

我们定义Vue组件实际上定义了一个JavaScript的对象，其中data方法返回组件所需要的数据，methods属性用来定义组件所需要的方法函数。

通过Vue这种绑定的编程方式，只需要专注于数据逻辑，当数据本身修改时，绑定这些数据的元素也会相同修改。

简单的用户登录页面

分析需要完成哪些工作：

登陆页面要有标题，用来提示用户当前的登录状态。
在未登录时，需要有两个输入框以及登录按钮
在登录完成后，输入框需要隐藏，需要提供按钮让用户登出

如果使用原生的JavaScript DOM操作会有些复杂，借助Vue的单向绑定和条件渲染功能，完成这些会非常容易。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    
</head>
<body>
    <div id="Application" style="text-align: center;">
        <h1>{{title}}</h1>
        <!-- v-if是Vue的条件渲染功能，其指定的变量如果为True，则渲染这个元素 -->
        <!-- v-model用来进行双向绑定，当输入框中的文字变化时，其会将变化同步到绑定的变量上。同样变量的值发生改变时，输入框中的文本也会发生变化 -->
        <div v-if="noLogin">账号：<input v-model="username" type="text"></div>
        <div v-if="noLogin">密码：<input v-model="password" type="password"></div>
        <button v-on:click="click" style="border-radius: 30px; width: 100px; margin: 20px auto; color: white;background-color: blue;">{{buttontitle}}
    </div>
    <script>
        const App = {
            data(){
                return {
                    title:"欢迎您：请登录！",
                    noLogin:true,
                    username:"",
                    password:"",
                    buttontitle:"登录"
                }
            },
            methods:{
               click(){
                if(this.noLogin){
                    this.login()
                }else{
                    this.logout()
                }
               },
               // 登录
               login(){
                // 判断账号 或 密码是否为空
                if (this.username.length > 0 && this.password.length > 0){
                    // 登录提示后刷新页面
                    alert(`用户名:${this.username}密码:${this.password}`)
                    this.noLogin=false
                    this.title=`欢迎您：${this.username}`
                    this.buttontitle="注销"
                    this.username=""
                    this.password=''
                }else{
                    alert("请输入账号密码")
                }
               },
               // 等出
               logout(){
                    this.noLogin=true
                    this.title="欢迎您：请登录！"
                    this.buttontitle="登录"
                }
            }
        }
        Vue.createApp(App).mount("#Application")
    </script>

</body>
</html>