Vue的基本指令你了解多少

1、引入vue.js

<script src="../js/vue.js"></script>
    <div id="app">{{message}}</div>
    <script>
        //let (变量) const(常量)
        // function test(){
        //     console.log('其实在vue.js里面设置了vue的方法这样就可以直接进行new Vue了');
        // }
        // test();
        
        //声明式编程  只需要进行声明其他的都不需要进行管理
        //能够做到数据与界面完全分离
        const app=new Vue({
            el:'#app', //用于管理要挂载的元素
            data:{ //定义数据
                message: '你好啊,Vue'
            }
        });
        //上面的就是将id=app的元素交给了Vue实例进行管理
    </script>

<div id="app">
      <ul>
        <li v-for="item in movies">{{item}}</li>
      </ul>
      <p>{{message}}</p>
    </div>
    <div id="app1">{{message}}</div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "李加喜",
          movies: ["海贼王", "八佰"],
        },
      });响应式

<div id="app">
      <span>显示数量{{count}}</span>
      <button @click="add">+</button>
      <button @click="del">-</button>
    </div>
    <script>
      // @click是v-on的简写
      let btn = new Vue({
        el: "#app",
        data: {
          count: 0,
        },
        //该属性用于在Vue对象里面定义方法
        methods: {
          add() {
            this.count++;
          },
          del() {
            this.count--;
          },
        },
      });
    </script>计数器

代码的缩进最好是上一级的两个缩进

<!-- 
      Mustache:语法  {{}}  
      可以插入到标签里面也可以是一个简单的表达式
     -->
    <script src="../js/vue.js"></script>
    <div id="app">
      <span>{{message}}</span><br />
      <span>{{firstName+lastName}}</span><br />
      <span>{{firstName}} {{lastName}}</span>
    </div>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          firstName: "li",
          lastName: "jiaxi",
        },
      });
    </script>Mustache语法

一、Vue的基本指令

1、v-x 的基本使用

<!-- 
      v-once 表示元素和组件不会随数据的改变而进行改变(在浏览器状态修改)
      v-html 会将后面的String按照html的形式进行解析
      v-text 与Mustache比较相似 v-text=={{}}
      v-pre 用于显示最原始的Mustache的语法不会对Mustache进行解析
     -->
    <script src="../js/vue.js"></script>
    <div id="app">
      <span>{{message}}</span><br />
      <span v-once>{{message}}</span><br />
      <span v-html="url"></span><br />
      <span v-text="message"></span><br />
      <span v-pre>{{message}}</span>
      <span v-cloak>{{message}}</span>
      <!-- 当还没有解析完成的时候暂时先将v-cloak修饰的隐藏(css设置) 当js解析按成只有就会把c-cloak删除就会将其删除 -->
    </div>
    <script>
      setInterval(function () {
        const app = new Vue({
          el: "#app",
          data: {
            message: "你好1",
            url: '<a href="http://www.baidu.com">百度一下</a>', //加入这个是从服务器获取的地址
          },
        });
      }, 1000);
    </script>

2、v-bind的基本使用

<!-- 
      v-bind 动态的绑定属性(很多)  比如a的href属性  img的src属性  能够实现动态的绑定属性
     -->
    <!-- 错误的做法: 这里不可以使用mustache语法-->
    <!--<img src="{{imgURL}}" alt="">-->
    <!-- 正确的做法: 使用v-bind指令 -->
  <div id='app'>
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="hrefBD">百度一下</a>

    <!-- 或者使用语法糖 -->
    <img :src="imgURL" alt="">
    <a :href="hrefBD">百度一下</a>
  </div>
  
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3909956543,1922662226&fm=26&gp=0.jpg',
      hrefBD: 'http://www.baidu.com'
    }
  })
</script>

2.1 绑定class

<span class="title" v-bind:class="{active: isActive, line: isLine}"
        >{{message}}</span
      >
      <br />
      <span class="title" v-bind:class="getClass()">{{message}}</span><br />
      <button @click="btnClick()">按钮</button>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
          isActive: true,
          isLine: true,
        },
        methods: {
          btnClick() {
            this.isActive = !this.isActive;
          },
          getClass() {
            return { active: this.isActive, line: this.isLine };
          },
        },
      });
    </script>绑定对象

<script src="../js/vue.js"></script>
    <div id="app">
      <!-- 加''是字符串 不加是数据属性 -->
      <span :class="[text01,text02]">{{message}}</span>
      <span :class="getClass()">{{message}}</span>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          text01: "01",
          text02: "02",
        },
        methods: {
          getClass() {
            return [this.text01, this.text02];
          },
        },
      });
    </script>绑定数组

2.2绑定style

绑定数组与对象

<script src="../js/vue.js"></script>
    <div id="app">
      <span :style="{color: balance,fontSize:fontSize+'px'}">{{message}}</span>
      <span :style="getStyle()">{{message}}</span>
      <span :style="[baseStyle]">{{message}}</span>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          balance: "red",
          fontSize: 30,
          // fontSize: "30px",
          baseStyle: { backgroundColor: "red" },
        },
        methods: {
          getStyle: function () {
            return { color: this.balance, fontSize: this.fontSize + "px" };
          },
        },
      });
    </script>

3、属性计算

使用computed进行计算而不是使用methods方法进行计算 因为computed里面含有缓存

<script src="../js/vue.js"></script>
    <div id="app">
      <span>{{message}}</span><br />
      <span>{{firstName}}</span><br />
      <span>{{fileName}}</span>
      <span>{{sumPrice}}</span>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          firstName: "li",
          lastName: "jiaxi",
          books: [
            { id: 1, name: "Linux", price: 50 },
            { id: 2, name: "Linux", price: 50 },
            { id: 3, name: "Linux", price: 50 },
          ],
        },
        //用来计算属性的
        computed: {
          fileName() {
            return this.firstName + "->" + this.lastName;
          },
          sumPrice() {
            let resulrt = 0;
            let result1 = 0;
            for (let i = 0; i < this.books.length; i++) {
              resulrt += this.books[i].price;
            }
            for (let a of this.books) {
              result1 += a.price;
            }
            return result1;
          },
        },
      });
    </script>

4、ES6语法

4.1、let/var/const

ES6之前没有实现快级作用域(例如: if/for)但是在ES6之后实现了快级作用域(if/for)

<!-- 
      变量作用域不同
      let遵守快级作用域 但是var不存在(不安全) 
      在ES5之前的var是没有快级作用域的(if/for)
      在ES6中的let是有快级作用域的(比如if/for)
      const 当修饰的标识符不会再次被赋值的时候,就可以使用const来保证数据的安全性
      建议在开发的时候优先使用const只有需要改变某一个标识符的时候才能够使用let
     -->
    <script>
      {
        let name = "123";
        console.log(name);
        //在一个快内,出了这个快就不会被识别

        const a = "30";
        console.log(a);
        // a = "40"; 不可以进行复制
        document.write(a);
      }

      console.log(name); //没有内容
    </script>

4.2属性与方法的增强写法

<script>
      //  ES6之前
      // let a = "123";
      // let age = "why";
      // let obj1 = {
      //   a: a,
      //   age: age,
      // };
      // //ES6之后  属性简写
      // let obj = {
      //   a,
      //   age,
      // };
      // console.log(obj1);
      // console.log(obj);

      //ES6之前  在对象里面定义函数
      let obj = {
        text: function () {
          console.log("这个是text的text函数");
        },
      };
      //ES6之后
      let obj1 = {
        text01() {
          console.log("这个是text01的函数");
        },
      };
      obj.text();
      obj1.text01();
    </script>

5、事件监听

5.1、v-on的使用

1、v-on的基本使用,了解v-on的语法糖

<script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          count: 0,
        },
        methods: {
          increment() {
            this.count++;
          },
          del() {
            this.count--;
          },
        },
      });
    </script>

2、掌握v-on的参数传递问题

<script src="../js/vue.js"></script>
    <div id="app">
      <span>{{message}}</span>
      <span>{{count}}</span>
      <button @click="btnClick()">按钮0</button>
      <button @click="btnClick">按钮1</button>
      <button @click="btn2Click(123)">按钮2</button>
      <!-- 在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 这个时候,
        Vue会默认将浏览器生产的event事件对象作为参数传入到方法 可是如何添加了小括号
      那么就会显示undefind-->
      <button @click="btn3Click">按钮3</button>
      <!-- 方法定义的时候需要event对象又需要掺入其他的参数 -->
      <button @click="btn4Click(123,$event)">按钮4</button>
      <button>按钮5</button>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          count: 0,
        },
        methods: {
          increment() {
            this.count++;
          },
          delcrement() {
            this.count--;
          },
          btnClick() {
            console.log("这个是没有参数函数,可以将()省略");
          },
          btn2Click(num) {
            console.log("这个是需要传递参数的方法" + num);
          },
          btn3Click(num) {
            console.log(num);
          },
          btn4Click(num, event) {
            console.log(num, event);
          },
        },
      });
    </script>

3 v-on的修饰符

<div id="app" @click="divClick">
      <span>{{message}}</span>
      <!-- <button @click="btnClick">按钮</button> -->
      <!-- 使用了stop修饰符防止了冒泡操作 -->
      <button @click.stop="btnClick">按钮</button>
      <!-- prevent组织默认时间 -->
      <form action="ljx">
        <input type="submit" value="提交" />
        <!-- 使用 prevent取消了submit默认的提交方式-->
        <input type="submit" value="提交" @click.prevent.stop="go" />
      </form>
      <!-- 监听键盘某一个键的点击 只要点击键盘就会触发-->
      <input type="text" @keyup="keyup" placeholder="请输入" />
      <!-- 只监听回车 -->
      <input type="text" @keyup.enter="keyup" placeholder="请输入" />
      <!-- once只进行一次回调 -->
      <button @click.stop.once="btn2Click">点击</button>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
        },
        methods: {
          btnClick() {
            console.log("这个是按钮的");
          },
          divClick() {
            console.log("这个是容器的");
          },
          go() {
            console.log("取消默认提交到ljx的链接");
          },
          keyup() {
            console.log("KeyUp");
          },
          btn2Click() {
            console.log("这个只能实现一次回调");
          },
        },
      });
    </script>

6、条件判断

6.1 v-if/v-else/v-else-if

<script src="../js/vue.js"></script>
    <div id="app">
      <span>{{message}}</span>
      <h2 v-if="isShow">
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
      </h2>
      <h2 v-else>当isShow显示的是false的时候这个标签进行显示</h2>
      <div>
        <span v-if="score>=90">A</span>
        <span v-else-if="score>=80">B</span>
        <span v-else-if="score>=70">C</span>
        <span v-else>D</span>
        <!-- 也可以直接通过设置参数进行 -->
        <span>{{ScoreAll}}</span>
      </div>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          isShow: false,
          score: 80,
        },
        computed: {
          ScoreAll() {
            let message = "";
            if (this.score > 90) {
              message = "A";
            } else {
              message = "B";
            }
            return message;
          },
        },
      });
    </script>

5.2 切换小案例

主要要设置input里面的key来防止进入虚拟Dom

<div v-if="isShow">
        <!-- 如果是用户名登录显示 -->
        <label for="username">用户名</label>
        <!-- label的for应该指向对应元素的id属性 -->
        <input
          type="text"
          name="username"
          id="username"
          placeholder="请输入您的姓名"
          key="aa"
        />
      </div>
      <div v-else>
        <!-- 如果是邮箱登录显示 -->
        <label for="email">邮箱</label>
        <input
          type="text"
          name="email"
          id="email"
          placeholder="请输入您的邮箱"
          key="bb"
        />
        <!-- 主要为了防止在切换的时候在input里面的内容没有进行修改所以要在input里面设置key
          来防止这个属性进行到虚拟的dom里面而导致没有进行修改 -->
      </div>
      <button @click="changeShow">切换登录</button>
      <!-- 或者 -->
      <button @click="isShow=!isShow">切换登录</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "李加喜",
          isShow: true,
        },
        methods: {
          changeShow() {
            this.isShow = !this.isShow;
          },
        },
      });
    </script>

5.3 v-show与v-if

<script src="../js/vue.js"></script>
    <div id="app">
      <!--v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中-->
      <h2 v-if="isShow" id="aaa">{{message}}</h2>

      <!--v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none-->
      <h2 v-show="isShow" id="bbb">{{message}}</h2>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
          isShow: true,
        },
      });
    </script>

当在进行显示与切换之间很频繁的还厚要使用v-show,但是如果只是一次切换的话使用v-if比较好

5.4 v-for遍历数组与对象

<div id="app">
      <span>{{message}}</span>
      <ul>
        <!-- 输出的结果是 李加喜 18 要将key与要显示的内容进行绑定这样在虚拟Dom里面就能够实现一一对应-->
        <li v-for="(item, index) in info" :key="index">{{item}}</li>
        <!-- 结果 name->李加喜  age->18-->
        <li v-for="(value, key) in info">{{key}}->{{value}}</li>
        <!-- name--0--李加喜 age--1--18 -->
        <li v-for="(value, key,index) in info">
          {{key}}--{{index}}--{{value}}
        </li>
      </ul>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          info: {
            name: "李加喜",
            age: 18,
          },
        },
      });
    </script>

5.5 v-for里面那些方法能够实现响应式

<script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          letters: ["A", "C", "B", "D"],
        },
        methods: {
          btnClick() {
            //在后面添加数据
            // this.letters.push("E", "EE", "EEE");
            //在后面删除数据
            // this.letters.pop();
            // //在前面删除数据
            //this.letters.shift();
            // //在前面添加元素
            // this.letters.unshift('F','FF')
            //在第下标为2的位置 不删除元素添加数据
            //this.letters.splice(2, 0, "F");
            // 5.splice作用: 删除元素/插入元素/替换元素
            // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
            // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
            // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
            //this.letters.splice(2, 0, "F");
            //sort排序
            //this.letters.sort();
            //reverse()翻转
            //this.letters.reverse();

            //可以直接通过索引值修改数组中的元素
            // this.letters[0] = "L";
            // this.letters.splice(0, 1, "bb");
            Vue.set(this.letters, 0, "ll");
          },
        },
      });
      function sum(...num) {
        console.log(num);
      }
      sum(1, 2, 3);
    </script>

7、书城案例

main.js注意要添加到body外面在里面无法识别

const app = new Vue({
  el: "#app",
  data: {
    books: [{
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      },
    ]
  },
  methods: {
    increment(index) {
      this.books[index].count++;
    },
    decrement(index) {
      this.books[index].count--;
    },
    remove(index) {
      this.books.splice(index, 1)
    }
  },
  computed: {
    totalPrice() {
      let totalPrice = 0;
      // for (let i = 0; i < this.books.length; i++) {
      //   totalPrice += this.books[i].price * this.books[i].count
      // }
      for (let i in this.books) {
        totalPrice += this.books[i].price * this.books[i].count
      }
      return totalPrice;
    }
  },
  //会将前面要过滤的数据作为其参数
  filters: {
    showPrice(price) {
      return '￥' + price.toFixed(2)
    }
  }
})

书城.html

<script src="../js/vue.js"></script>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(book, index) in books">
            <td>{{book.id}}</td>
            <td>{{book.name}}</td>
            <td>{{book.date}}</td>
            <td>{{book.price | showPrice}}</td>
            <td>
              <button @click="decrement(index)" :disabled="book.count<=1">
                -</button
                 <!--当小于1的时候禁用--> 
              >{{book.count}}
              <button @click="increment(index)">+</button>
            </td>
            <td><button @click="remove(index)">移除</button></td>
          </tr>
        </tbody>
      </table>
      <h2>总价格: {{totalPrice | showPrice}}</h2>
    </div>
  </body>
  <script src="../js/main.js"></script>

7.1 js高阶语法补充

<!-- filter/map/reduce 
      filter函数有一个要求:必须返回一个boolean值
      true:当返回true的时候,函数的内部会自动将这次回调的n加入到新的数组里面
      false: 当返回false的时候就会自动的过滤掉这个n 
    -->
    <script>
      const nums = [10, 20, 30, 50, 100, 110, 120];
      // filter函数的使用
      let newNum = nums.filter(function (n) {
        return n < 100;
      });
      //map函数的使用
      let newNum2 = newNum.map(function (n) {
        return n * 2;
      });
      console.log(newNum);
      console.log(newNum2);
      // reduce函数是用来做累?运算的 具体情况自己设计运算
      let newNum3 = newNum2.reduce(function (preValue, n) {
        return preValue + n;
      }, 0);
      console.log(newNum3);
    </script>

8、v-model

8.1 基本使用

<script src="../js/vue.js"></script>
    <div id="app"><input type="text" v-model="message" />{{message}}</div>
    <script>
      // 当我们在输入框输入内容时
      //因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
      //当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
      //所以，通过v-model实现了双向的绑定
      const app = new Vue({
        el: "#app",
        data: {
          message: "李加喜",
        },
      });
    </script>

8.2 结合radio checkbox select使用

radio的使用

<div id="app">
      <label for="male">
        <input type="radio" id="male" value="男" v-model="sex" />男
      </label>
      <label for="female">
        <input type="radio" id="female" value="女" v-model="sex" />女
      </label>
      <h2>您选择的性别是: {{sex}}</h2>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          sex: "男",
        },
      });
    </script>

checkbox的使用

<span>{{message}}</span>
      <!--1.checkbox单选框-->
      <!--<label for="agree">-->
      <!--<input type="checkbox" id="agree" v-model="isAgree">同意协议-->
      <!--</label>-->
      <!--<h2>您选择的是: {{isAgree}}</h2>-->
      <!--<button :disabled="!isAgree">下一步</button>-->
      <!--disabled为false的时候才会被禁用-->
      <!--2.checkbox多选框-->
      <input type="checkbox" value="篮球" v-model="hobbies" />篮球
      <input type="checkbox" value="足球" v-model="hobbies" />足球
      <input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
      <input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
      <h2>您的爱好是: {{hobbies}}</h2>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
          isAgree: false, // 单选框
          hobbies: [], // 多选框,
          originHobbies: [
            "篮球",
            "足球",
            "乒乓球",
            "羽毛球",
            "台球",
            "高尔夫球",
          ],
        },
      });
    </script>

select的使用

<div id="app">
      <select name="abc" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="123">香蕉</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
      </select>
      <h2>您选择的水果是: {{fruit}}</h2>
    
      <!--2.选择多个-->
      <select name="abc" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
      </select>
      <h2>您选择的水果是: {{fruits}}</h2>
    </div>
    </div>
    <!--1.选择一个-->
  <script>
    const app = new Vue({
      el: '#app',
      data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })
</script>

修饰符的使用

 <!--1.修饰符: lazy  只有当输入框里面点击了回车或者失去了焦点的时候就会才会进行加载-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>


  <!--2.修饰符: number  设置输入的类型只会是数字类型-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修饰符: trim   自动取消两百年的空白-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: ''
    }
  })
  var age = 0
  age = '1111'
  age = '222'
</script>