Vue的使用2

一、Js和Vue的使用比较

       (一) 绑定元素

Js使用id或者标签名,来通过document.querySelector(“元素名”)来绑定。

1.1 静态绑定:vue使用  : 元素,来绑定,eg:   :src

1.2 动态绑定:vue使用  data: {   info:" "  } 通过v-model来动态绑定标签元素,动态绑定时只能用在表单中

  <!-- v-model=“变量名” 控件值和变量互相影响-->
    <input type="text" v-model="info">
    <h1>{{info}}</h1>
    <img :src="user.url" width="100px " alt="">
    <hr>
    <input type="text" placeholder="输入用户名" v-model="user.username">
    <input type="text" placeholder="输入密码" v-model="user.password">

        (二)事件绑定

Js使用 οnclick="f()" 来绑定事件。

Vue通过@click=“f()”或者 v-on:click="f1()">来绑定事件。

        <!--vue中的onclick()-->
        <input type="button" value="按钮1" @click="f()">
        <input type="button" value="按钮2" v-on:click="f1()">

        (三)方法和值的创建

Js使用  function f() { }在标签里直接创建方法和值。

Vue在Vue方法中创建方法,与data在同一级。

在创建值时与 let v 在同一级别: let num = parseInt(Math.random() * 100) + 1;

//创建值
 let num = parseInt(Math.random() * 100) + 1;

 let v = new Vue({
        el: "body>div",
        data: {
            info:""
        },
        methods: {
            f(){
              alert("弹出了个内容2")
            }
        }
  })

        (四)创键对象

Js在标签下直接创建值 let i={ } //空对象

   //1创建空对象
    let p1 = {}
    //创建对象并赋值
    p1.name = "张三";
    p1.age = 20;
    //创建方法
    p1.run = function () {
        console.log(this.name + ":" + p1.age);
    }
    p1.run();

    //2实例化自带属性和方法的对象
    let p2 = {
        name: "李四",
        age: 10,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    p2.run();

    }

创建数组

   //3通过数组组装对象的方式分装列表数据
    let arr = [
        {title: "手机", pice: 21, saleCount: 2100},
        {title: "水果", pice: 155, saleCount: 2},
        {title: "鞋子", pice: 13, saleCount: 2020},];
    //遍历数组(forof==foreach)
    for (let product of arr) {//for(类型 变量名  of  遍历目标 )
        //获取对象
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let saleCountTd = document.createElement("td");
        //将遍历数组的值传入列表
        titleTd.innerText = product.title;
        priceTd.innerText = product.pice;
        saleCountTd.innerText = product.saleCount;
        //td添加tr
        tr.append(titleTd, priceTd, saleCountTd);
        //获取table表并添加
        let table = document.querySelector("table");
        table.append(tr);

Vue创建对象和数组

  data: {
            //创建空对象
            user{},

            emp: {
                name: "", salary: "", job: ""
            }

            arr: [
                {name: "张三", salzry: 3000, job: "销售"},
                {name: "李四", salzry: 3000, job: "人事"},
                {name: "王五", salzry: 3000, job: "销售"}],

           
       },

        (五)vue循环遍历

        <!--v-for循环遍历  ----->名字 in 循环数组 -->
        <li v-for="name in arr" v-text="name"></li>

        <tr v-for="(p,i) in persons">
            <td>{{i + 1}}</td>
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.type}}</td>
        </tr>

        (六)

拼接字符串

            input type="button" value="加" @click="f('+')">
            <input type="button" value="减" @click="f('-')">
            <input type="button" value="乘" @click="f('*')">
            <input type="button" value="除" @click="f('/')">    
       f(x) {
               //eval()此方法可以将此字符串以js代码的形式运行
               v.text03=eval(v.text01+x+v.text02);
            }

随机数

  let num = parseInt(Math.random() * 100) + 1;

从数组删除

    del(i) {
            //从数组中删除元素 splice(起始下标,删除长度)
                v.arr.splice(i,1);
            }

添加到数组

 f() {
                //push()方法添加元素到数组中
                v.arr.push({name: v.emp.name, salzry: v.emp.salary, job: v.emp.job})
            }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值