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

2022-08-27 23:31:38 阅读：157 来源： 互联网

标签：arr 27 name 08 绑定 age Vue 2022 app

学习心得

今天主要学习了在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>

标签：arr,27,name,08,绑定,age,Vue,2022,app
来源： https://www.cnblogs.com/wxp0909/p/16631781.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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