芯が強い人になるESTJ-A

截屏2023-02-02 7.09.08.jpg
截屏2023-02-02 7.10.14.jpg

Vue最大特色，去dom化,指令是来解决问题的，看看都解决了什么问题

截屏2023-02-02 7.16.29.jpg

MVVM

<!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}}<br>
        <span v-html="title"></span><br>
        <span v-text="title"></span>

    </div>

    <!-- 第一步引入vue，并初始化 -->
    <script src="js/vue.min.js"></script>
    <script>
        var vue = new Vue({
            <!-- 绑定哪个节点，响应数据在data里面  -->
            el:"#app",
            data:{
                title:"2023 vue 2.0我来了"
            }
        })
    </script>
</body>
</html>

截屏2023-02-03 5.48.56.jpg
截屏2023-02-03 5.51.49.jpg

{{}}和v-html,v-text,解决文本问题
插值表达式{{}}不能写在指令上，就是无法使用在标签内部！！！

<!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">
        <!-- {{}}只会全部解析，直解析文字需要v-html ,{{}}可以四则运算和三木运算符，-->
        <div v-html="content"></div>
        <!-- {{}}= v-text,会原封不动解析s -->
        <div v-text="content"></div>
        {{content}}
        
        
    </div>

    <!-- 第一步引入vue，并初始化 -->
    <script src="js/vue.min.js"></script>
    <script>
        var vue = new Vue({
            <!-- 绑定哪个节点，响应数据在data里面,data就是model  -->
            el:"#app",
            data:{
                content:"<h1>hello我是一个标题</h1>"
            }
        })
    </script>
</body>
</html>

截屏2023-02-04 6.34.38.jpg

v-bind:可以简写就是冒号:，解决属性问题

数据是动态加载的，后台加载的，请不要写死！！！
截屏2023-02-04 6.46.41.jpg

<!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" v-cloak>
        <div v-text="content"></div>
        <div v-html="content"></div>
        <!-- 由于html里面无法使用指令，那如何取到id呢，就需要v-bind -->
        <div v-bind:userid="user.id" v-bind:username="user.username">{{user.username}}</div>
    </div>
    

    <script src="js/vue.min.js"></script>
    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                user:{id:1,username:"feige"},
                content:"<h1>helloworld</h1>"
            }

        })
    </script>
</body>
</html>

v-model，解决form元素值同步问题，输入的表单信息传递给data，解决双向绑定问题

v-model本质解决，把输入框中信息，拿到，回填到data里面
截屏2023-02-04 7.43.50.jpg

<!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">
        <form accept="index.jsp" method="get">
            <p>用户名:<input type="text" v-model="username"></p>
            <p>密码:<input type="password" v-model="password"></p>
            <input type="submit" @click.prevent = "login" value="提交">
            <p>你输入的值是:数据会发生改变{{username}}和{{password}}</p>
        </form>
        </form>
        </form>

    </div>
    

    <script src="js/vue.min.js"></script>
    <script>
        var vue = new Vue({
            //指定渲染范围
            el:"#app",
            //数据定义位置，也就是Model
            data:{
                username: "",
                password: ""
                
            },
            //事件定义的位置，@事件类型="事件名"
            methods:{
                login(){
                    var username = this.username;
                    var password = this.password;
                    console.log("你登录的信息是",username,password)
                }

            }

        })
    </script>
</body>
</html>

v-for

截屏2023-02-04 17.06.27.jpg

<!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>
    <style>
        table{border-collapse:collapse ;width: 100%;}
        table th,table td{border: 1px solid #ccc;text-align: center;padding:4px;}
        table tr.odd{background: #ccc;}
    </style>
</head>
<body>
    <div id="app">
        <table>
             <!-- thead表格头 -->
            <thead>
                <!-- //xxx in 数组,用什么取得值呢？？用差值表达式{{}} -->
                <tr>
                    <th></th>
                    <th>编号</th>
                    <th>id</th>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>手机</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- tbody表格主体 -->
            <tbody>
                <tr v-for="(user,index) in users" :class="[index%2==0?'odd':'']" ::key="user.id">
                    <td><input type="checkbox" ></td>
                    <td>{{index}}</td>
                    <td>{{user.id}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.phone}}</td>
                    <!-- 删除也是通过索引index去删除 -->
                    <td><button @click="handleDel(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    

    <script src="js/vue.min.js"></script>
    <script>
        var vue = new Vue({
            //指定渲染范围
            el:"#app",
            //数据定义位置，也就是Model
            data:{
                //users数组
                users:[
                {id:1,username:"feige1",age:35,phone:"13100000000"},
                {id:2,username:"张三",age:36,phone:"13200000000"},
                {id:3,username:"狂神",age:37,phone:"13300000000"},
                {id:4,username:"狂神2",age:7,phone:"134400000000"},
                {id:5,username:"狂神3",age:17,phone:"13990000000"}
                ]
                
            },
            //事件定义的位置，@事件类型="事件名"
            methods:{
                handleDel(index){
                    <!-- 删除数据，通过splice，通过索引，删除一个 -->
                    this.users.splice(index,1);
                }

            }

        })
    </script>
</body>
</html>

v-if,v-show

v-if,v-else-if,v-else

v-on事件指令,有简写方法@click

<!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" v-clock>
        <!-- v-on:和＠都可以使用，是简写 -->
        <button v-on:click="handleLogin">登陆</button>
        <button @click="handleLogin">登陆</button>
        <button @click="handleLogin($event)">登陆</button>
    </div>
    

    <script src="js/vue.min.js"></script>
    <script>
        var vue = new Vue({
            //指定渲染范围
            el:"#app",
            //数据定义位置，也就是Model
            data:{
                
            },
            //事件定义的位置，@事件类型="事件名"
            methods:{
                handleLogin(env){
                    alert(1);
                    console.log(env)
                }
            }

        })
    </script>
</body>
</html>

keyCode,按键盘事件，keyup,keydown,

<!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">
        <form method="post" action="xxxxx">
            <p>账号:<input type="text"></p>
            <p>账号:<input type="password" @keyup="handleEnt($event)"></p>
            <p><button value="" @click.prevent="handleLogin">登陆</button></p>
        </form>

    </div>
    

    <script src="js/vue.min.js"></script>
    <script>
        var vue = new Vue({
            //指定渲染范围
            el:"#app",
            //数据定义位置，也就是Model
            data:{
                
            },
            //事件定义的位置，@事件类型="事件名"
            methods:{
                <!-- 敲击回车就可以提交,敲击回车调用下方函数 -->
                handleEnt(evn){
                    if(evn.keyCode==13){
                        this.handleLogin();
                    }
                },
                handleLogin(){
                    console.log("登陆就开始了")
                }

            }

        })
    </script>
</body>
</html>

事件修饰符

阻止冒泡，。。。
截屏2023-02-05 5.33.53.jpg

让form表单不要提交数据

方法一：

    <div id="app">
        <!-- 方法一，不让form提交数据，onsubmit="return false;" -->
        <form method="post" action="xxxxx" onsubmit="return false;">
            <p>账号:<input type="text"></p>
            <p>账号:<input type="password" @keyup="handleEnt($event)"></p>
            <p><button value="" @click.prevent="handleLogin">登陆</button></p>
        </form>

    </div>

方法二：函数方法，追加$event,去函数里面添加e.preventDefault();

 <!-- 方法一，不让form提交数据，event事件，函数中追加e.preventDefault(); -->
    <div id="app">
        <form method="post" action="xxxxx">
            <p>账号:<input type="text"></p>
            <p>账号:<input type="password" @keyup="handleEnt($event)"></p>
            <p><button value="" @click="handleLogin($event)">登陆</button></p>
        </form>

    </div>

///vue
<script>
        var vue = new Vue({
            //指定渲染范围
            el:"#app",
            //数据定义位置，也就是Model
            data:{
                
            },
            //事件定义的位置，@事件类型="事件名"
            methods:{
                handleLogin(e){
                    console.log("登陆就开始了")
                    e.preventDefault();
                }

            }

        })
    </script>

方法三：vue中的事件修饰符

    <div id="app">
        <form method="post" action="xxxxx" >
            <p>账号:<input type="text"></p>
            <p>账号:<input type="password" @keyup="handleEnt($event)"></p>
            <p><button value="" @click.prevent="handleLogin()">登陆</button></p>
        </form>

    </div>

指令总结vue

截屏2023-02-05 6.34.11.jpg

截屏2023-02-05 6.40.04.jpg

vuejs生命周期

截屏2023-02-05 6.44.41.jpg

Vue中的join()、reverse()、 split()三个函数用法解析


var message = "Hello 2023 Vue.js vue2"
 message.split('').reverse().join('')

//split分割，拆分
message.split('')==["H","e","l","l","o","2","0","2","3","V","u","e",".","j","s","v","u","e","2"]

//reverse,数据反转

//join('')重组，把数组变成一个字符串，

# 2023-vue2.0,vue=javascript

Vue最大特色，去dom化,指令是来解决问题的，看看都解决了什么问题

v-if,v-else-if,v-else

让form表单不要提交数据