Vue的使用2

一、Js和Vue的使用比较

       （一） 绑定元素

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

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

1.2 动态绑定：vue使用  data: {   info:" "  } 通过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()">来绑定事件。

        
        <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循环遍历

        名字 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})
            }