01、Vue笔记-01

！毛不易

已于 2023-09-27 02:44:41 修改

阅读量40

点赞数

文章标签： vue.js 笔记前端

于 2023-09-27 02:33:26 首次发布

本文链接：https://blog.csdn.net/qq_28400607/article/details/133329985

版权

vue2 （3~4）

认识vue2
vue2安装
快速入门
插值表达式
指令
事件处理
生命周期
watch/computed
组件
插槽
动画

vue3—社区

01、vue的官方网站

https://cn.vuejs.org/ —–vue3
https://v2.cn.vuejs.org/ — vue2
作者：尤雨溪（google、阿里，自由的开源项目的创作者）

02、Vue什么？

vue底层核心逻辑是：js
就好比：gin –go，springboot—java的关系

html/css/javascript

js操作dom是非常的笨重，而且视频的数据会混合在一起。


<div id="box" name="baby">我是一个盒子</div>
<script>
    // 拿到div的dom对象
    var boxDom = document.querySelector("#box");
    // 你就可以去做事情 --- 
    // 生个多个孩子 追加子元素 
    boxDom.innerHTML = "<span>第一个孩子生成了</span><span>第二个孩子生成了</span>"
    // 去小号：添加属性
    boxDom.setAttribute("username","baobei")
    // 给漂亮的衣服（css）,
    boxDom.style.background = "red"
    // （逛街）绑定事件
    boxDom.onclick = function(){
        alert(1);
    }
    // 没事回回娘家，找父辈元素
    alert(boxDom.parentElement.innerHTML)
    alert(boxDom.children.length)
</script>

操作的是dom，成本非常的高。

Vue诞生的原因：在js前端，并没有一个和成熟语言java中类似的经典的开发模式：mvc

03、MVC

什么是mvc。它是一种分层架构的开发理念。在开发中我们编写代码，应该应该分层，然后各司其职。这里mvc分别代表是：

M —-Model—–data
V—-View —— jsp
C—–数据的控制和处理—-servlet

如果不分层架构的代码会是什么样子的呢？

在java的早期开发，其实只有servlet没有所谓的jsp等。那么所以得前端代码和处理全部放在一个类文件中如下：M+(VC)

public void doGet(req,response){
   
    // 1：查询数据库数据
    User user = new User();
    user.setUsername("飞哥")

    // 2:返回页面
    Printer writer = response.getWrite();
    
    writer.println("<!DOCTYPE html>");
    writer.println("<html lang=\"en\">");
    writer.println("<head>");
    writer.println("<meta charset=\"UTF-8\">");
    writer.println("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">");
    writer.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">");
    writer.println("<title>Document</title>");
    writer.println("</head>");
    writer.println("<body>");
    writer.println("<div id=\"box\" name=\"baby\">"+user.username+"</div>");
    writer.println("</body>");
    writer.flush();
    writer.close();
}

后面开始分层架构演变:MVC

Mode —-struct

// 1：查询数据库数据
User user = new User();
user.setUsername("飞哥")

View —index.jsp—-index.html

<%@tabglib xxxxx%>
<!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>
</head>
<body>
    

    <div id="box" name="baby">${user.username}</div>
    <script>
        // 拿到div的dom对象
        var boxDom = document.querySelector("#box");
        // 你就可以去做事情 --- 
        // 生个多个孩子 追加子元素 
        boxDom.innerHTML = "<span>第一个孩子生成了</span><span>第二个孩子生成了</span>"
        // 去小号：添加属性
        boxDom.setAttribute("username","baobei")
        // 给漂亮的衣服（css）,
        boxDom.style.background = "red"
        // （逛街）绑定事件
        boxDom.onclick = function(){
            alert(1);
        }
        // 没事回回娘家，找父辈元素
        alert(boxDom.parentElement.innerHTML)
        alert(boxDom.children.length)
    </script>

</body>
</html>

Controller —Servlet—-gin

@WebServet("/index")
public class IndexServlet extends HttpServlet{
    public void doGet(req,response){
        // 1：查询数据库数据
        User user = new User();
        user.setUsername("飞哥")
        // 2:数据放作用域
        req.setAttribute("user",user);
        // 3:跳转jsp页面
        req.getDispatcherServlet("index.jsp").forWard(req,response);
    }
}

gin

gin.get("/index",function(c ginServer){
    // ginServer ---req,response
	 // 1：查询数据库数据
     user := new User();
     user.Username = "飞哥"

     c.html(200,"index.html",gin.H{"user":user})
})

js代码的非mvc模式


<div id="box" name="baby">我是一个盒子</div>
<script>
    // 拿到div的dom对象
    var boxDom = document.querySelector("#box");

  
    // 1：查询数据库数据
    var user = {
        usernName:"飞哥"
    };

    // 你就可以去做事情 --- 
    // 生个多个孩子 追加子元素 
    boxDom.innerHTML = "<span>"+user.userName+"</span><span>"+user.userName+</span>"
    // 去小号：添加属性
    boxDom.setAttribute("username","baobei")
    // 给漂亮的衣服（css）,
    boxDom.style.background = "red"
    // （逛街）绑定事件
    boxDom.onclick = function(){
        alert(1);
    }
    // 没事回回娘家，找父辈元素
    alert(boxDom.parentElement.innerHTML)
    alert(boxDom.children.length)
</script>

04、MVVM

angularjs – ng–xxx
- vue —v-xxx
- react

— vue的核心思想：并没有去采用mvc的架构模式，而是采用mvvm模型。

为什么不采用：mvc开发模型

<!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>
</head>
<body>
    

    <div id="box" name="baby">
        <span>{{user.username}}</span>
    </div>

    <script>
        //不允许出现任何的dom操作和view的内容 

        // 数据-------------------Model---ajax
        var user = {
            username:"飞哥",
            age:36
        }

        // 谁来完成数据和视图的碰撞呢？-------controller----gin的角色---Controlelr----Vue
        
    </script>
</body>
</html>

说明：如果vue是按照mvc架构方式来架构的话，说明vue组件充当的就是controller的角色，也就控制器角色，

负责把页面视图找到?
数据要准备好？

Vue为什么不按照mvc去开发?

如果vue是按照mvc的开发模式，是满足不了需求。因为还有一种情况，就改变视图也要改变数据
mvc是一种单向

05、安装Vue2

下载代码：https://v2.cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1: 初始化

<!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>
</head>
<body>
   
    <div id="box" name="baby">
        <h1>{{title}}</h1>
        <p>用户：<input type="text" v-model="username"></p>
        <p>密码：<input type="text" v-model="password"></p>
        <p><button @click="handleLogin">登录</button></p>
    </div>

    <script src="js/vue.js"></script>
    <script>
        // vue --双向数据绑定的能力，改变数据会改变视图，改变视图（v-model）就会改变数据
        // m---model ---- vm(vue) ----  v---视图
        new Vue({
            el:"#box", // 负责把页面视图找到?
            // 定义数据
            data:{
                title:"学相伴登录",
                username:"",
                password:""
            },
            // 定义方法
            methods:{
                handleLogin(){
                    this.username = "xxxx"
                    this.password = "123456"
                }
            }
        })
    </script>

</body>
</html>

06 、什么是响应式数据

定义在vue对象中的data中的数据都称之为相应式数据。这种响应式数据，

无论你在vue任何地方修改和改变都会改变视图。
在视图能够通过{{}} 和指令定义的名字，必须在data定义

结论

以后未来你想要渲染数据到视图上，首先第一件事情就是在data中定义一个变量，然后想办法给赋值，或者追加或者覆盖，它就会自动改变视图。

07、为什么在vue开发都都使用this调用？

<!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>
</head>
<body>
  

    <div id="app">
        {{title}}
        <h1 v-text="title"></h1>
    </div>


    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app", // 负责把页面视图找到?
            // 定义数据
            data:{
                title:"我是一个标题"
            },
            // 生命周期方法初始化调用
            created(){
                // 调用方法是this
                this.handleChange();
            },
            // 定义方法
            methods:{ 
                handleChange(){
                   // 复制改变也是this
                   this.title = "我变了 ！！！";
                }
            }
        })
    </script>

</body>
</html>

08、事件定义在哪里？

在methods中定义。调用就使用：事件去绑定 v-on:事件类型=“methods定义的事件名”

<!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>
</head>
<body>
  

    <div id="app">

        <p>账号：<input type="text"></p>
        <p>密码1：<input type="text" v-on:keyup="handleLogin($event,100)"></p>
        <p>密码2：<input type="text" v-on:keyup="handleLogin($event,100)"></p>
        <button @click="handleToLogin">登录4</button>
        <button @click="handleToLogin($event)">登录4</button>
        <button @click="handleToLogin()">登录4</button>
    </div>


    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app", // 负责把页面视图找到?
            // 定义方法
            methods:{ 
                handleLogin(e,num){
                    if(e.keyCode == 13){
                        this.handleToLogin();
                    }
                },
                handleToLogin(){
                    alert("去登录!!!")
                }
            }
        })
    </script>

</body>
</html>