2022-08-27 第四小组王星苹学习心得

2022/8/27 23:52:58

编程Tag： vue APP name 绑定 age arr 08 27 2022

本文主要是介绍2022-08-27 第四小组王星苹学习心得，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

学习心得

今天主要学习了在html里面用Vue库，也是一个js文件，这个也是相当于写好的东西可以直接用。Vue.js的核心是一个采用简洁的模板语法来声明式地将数据渲染进DOM的系统。实现了双向数据绑定。Vue.js可以进行组件化开发，是代码编写量大大减少。

应用场景：

1.Web开发

2.移动端开发

3.跨平台应用开发

心情

今日心情还可以，感觉需要记的东西虽然多，但是都和一点学过的有相似之处。

掌握情况：还行一小般

学习总结

Vue.js是通过虚拟DOM来减少对DOM的直接操作

v-bind是用来绑定DOM属性的指令

v-model是Vue中实现数据双向绑定

v-for指令基于一个数组来渲染一个列表，需要item in items形式的特殊语法，其中items是源数据数组，而item则是迭代的数组元素的别名。也可以用它来遍历一个对象的property。

v-for在使用的时候最好添加key，且key最好不是索引。

@ ，v-on都属于Vue绑定事件的指令

v-on:click能够实现页面单击事件绑定

v-if ,v-else ,v-show ,可以实现条件判断。v-bind不可以

模型层定义了person变量内容为{name:"jack",sex:"male"},用<p>{{person.name}}<p>可以输出。

模型层定义了address变量，输出页面<p v-html = "{{address}}"><p>

在Vue实例中用methods定义方法

Model和View改变任意一个，另一个也改变

Vue是一套构建用户界面的渐进式框架（MVVM），能进行数据的双向绑定，.Vue采用自底向上增量的开发的设计。不仅仅为简单的单页应用程序提供驱动，复杂的也可以。

htmlcss--->javascript--->JQuery---->vue,react,angular

一个JavaScript库

vue也可以说是JavaScript框架。

尤雨溪

插值表达式

</div>

 <script src="js/vue.js"></script>
    <script>


      // 1.创建一个vue实例
      const app = new Vue({
        // el用来给Vue实例一个作用域
        el: "#app",
        data: {
          // 用来给Vue定义一些相关的数据
          msg: "欢迎使用Vue",
        },
      });

v-for写在哪个标签中

遍历几个写几个。

面试题：99.99999999%

v-if直接操作DOM元素，底层

v-show是通过css控制DOM元素

  <body>
    <div id="app">
      <h1 v-if="false">欢迎光临</h1>
    </div>


    <script src="js/vue.js"></script>
    <script>
      const app = new Vue({
        
        el: "#app",
        data: {
          msg:"hello Vue",
        },
      });


    </script>
  </body
Vue:

-----vue-----：

注意事项：

1、注意vue实例的作用域
2、事件绑定（v-on:click）和属性绑定（v-bind:src）
3、v-if和v-show区别*****
4、双向绑定应用在表单元素上
5、双向绑定在不同的表单元素上的用法 radio checkbox select
6、双大括号，Vue的属性或事件用Vue自己的数据，不需要写双大括号。其他地方，必须写双大括号
7、vue的解析过程，最终展现出来的HTML页面，是没有vue的语法的

自己理解的写法

下面这个起的名字，一般是上面某个标签里的id属性

先const 名字 = new Vue（{

el:"#名字"

名字data:{

名字1:"",

名字2,

methods:{

方法名1(){

......

方法名2(){

......

});

步骤就是把各种方法写在一个methods里。

data和methods里面都是 : ,

在html里面数组的一些方法名字:

let arr = [5,2,-1];

  在数组的末尾追加
            arr.push(4);


            删除数组的末尾的元素
            arr.pop(2);


            从指定位置删除指定个数个元素
            arr.splice(1,1);


            修改
            arr[1] = -1;


            反转
            arr.reverse();


            从小到大排序
            arr.sort();


            查找
            console.log(arr.find());


            包含
            console.log(arr.includes(0));
            
            console.lo

  <body>


        <div id="app">
            <input type="text" v-model="msg">
            <button @click="add()">添加</button>
            <ul>
                <li v-for="(item,index) in lists">
                    {{item}}
                    <a href="#" @click="del(index)">删除</a>
                </li>
            </ul>
            <span>总数量：{{lists.length}}条</span><button @click="cler">删除所有</button>
        </div>


        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    lists:["第一次记事","汪峰发新专辑"],
                    msg:''
                },
                methods: {
                    add() {
                        /*
                            把我们文本框输入的内容
                            msg
                            追加到数组里      
                        */
                       this.lists.push(this.msg);
                       this.msg = '';
                    },
                    cler() {
                        this.lists = [];
                    },
                    del(index) {
                        this.lists.splice(index,1);
                    }
                },
            });
        </script>
    </body>

1、追加

2、注意文本框要清空

3、删除除了删除记录，还要修改总记录数

4、删除所有，所有记录删除，总记录数归0

练习题

<!DOCTYPE html>
<html>

<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>学生录入系统</title>
    <style>
        #app {
            /*position: absolute;*/
            margin-left: 100px;
            margin-top: 100px;
            border: 2px solid gold;
        }

        table {
            width: 825px;
            text-align: center;
            border: 1px solid rgb(240, 117, 10);
            background-color: rgb(19, 242, 49);
        }
    </style>
</head>

<body>
    <div id="app">

        <div style="width: 600px;">

            <legend>学生信息录入系统</legend>

            <div>姓名：<input type="text" placeholder="请输入姓名" v-model="user.name" /></div> <!-- v-model  双向绑定数据 -->
            <br />
            <div>年龄：<input type="text" v-model="user.age" /></div>
            <br />
            <div>性别:&nbsp;&nbsp;<select v-model="user.sex">

                    <option>男</option>

                    <option>女</option>

                </select>
            </div>
            <br />
            <div>手机：<input type="text" placeholder="请输入电话号" v-model="user.phoneNumber" /></div>
            <br />

            <button type="submit" @click="newUser">创建新用户</button>


        </div>

        <br />

        <table>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>手机</td>
                <td>删除</td>
            </tr>

            <tr v-for="item in users">
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td>{{item.phoneNumber}}</td>

                <td><button @click="del(index)">删除</button></td>
            </tr>

        </table>

    </div>
</body>
<script src="js/vue.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        data: {

            user: {
                name: "",
                sex: "",
                age: "",
                phoneNumber: ""

            },
            users: [
                { name: '灰原哀', age: 20, sex: '女', phone: '19988884869' },
                { name: '工藤新一', age: 22, sex: '男', phone: '15900001111' },
            ]
        },
        methods: {


            newUser: function () {
                if (this.user.name == "") {
                    alert("名字错误");
                } else if (this.user.age == "" || this.user.age < 0) {
                    alert("年龄错误");

                } else {
                    this.users.push({ name: this.user.name, sex: this.user.sex, age: this.user.age, phoneNumber: this.user.phoneNumber })
                }
            },
            del: function (index) {
                this.users.splice(index, 1);

            },
        }
    });


</script>

</html>

这篇关于2022-08-27 第四小组王星苹学习心得的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

2022-08-27 第四小组 王星苹 学习心得