VUE

插值表达式

{{插值表达式}} 里面可以写任意js表达式

然，插值表达式的内部数据或者方法都应该是vm实例的属性或方法

el的值是选择器.如果选择器匹配多个元素,则只有第一个生效.

    let x = 200000;
    // vm就是一个Vue实例
    let vm = new Vue({
      // 确定视图范围.app内部所有的后代元素都可以绑定数据
      // el的值是选择器.如果选择器匹配多个元素,则只有第一个生效.
      // 不能设置body和html这样的特殊标签作为视图.
      el: '#app',
      // data内的数据都会变成Vue实例的属性.
      data: {
        msg: '幂幂',
        str: '你好吗'
      },
      // vm实例的方法都写在methods中.
      methods: {
        alert() {
          window.alert(10000);
          return 'alert'
        }
      }
    });

v-once

视图只更新一次,后续绑定的数据变化,不会更新当前的视图

<div v-once>{{msg}}</div>
<div>{{msg}}</div>

v-html

可以用于实现插入一个标签. => *它有安全问题*.容易手动xss攻击.=> 必须保证内容是安全的

<div v-html='str'></div>
new Vue({
    el: '#app',
    data: {
    str: '<p>你好</p>'
    }
})

v-bind

v-bind:属性名=>指令=>让标签的属性绑定一个vue数据

v-bind:简写是冒号：

指令的值可以是任意表达式，把表达式的返回值绑定到指定属性上

    <input type="text" v-bind:value='val'>
    <input type="text" :value='val'>
    <input type="text" :value='0 ? 100 : 200'>
    // 此处value的值为val
    <input type="text" :value='"val"'>

v-bind绑定class

绑定class：

指令值绑定数组
1. ```
{{msg}}
{{msg}}
{{msg}}
```
指令值绑定对象，对象里面的true和false表示class里面是否有这个类名
1. ```
{{msg}}
{{msg}}
{{msg}}
```

let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Vue！！！',
        cn: 'box active nav',
        cnList: ['box', 'active', 'nav'],
        obj: {
          'box': true,
          'active': true,
          'nav': false
        }
      }
    })

v-bind绑定style

绑定style属性，还可以写成对象的形式

<div id='app'>
    <div :style='sty'>999999</div>
    <div :style='obj'>999999</div>
    <div :style='{width: "100px", heigth: "100px", backgroundColor: "red"}'>999999</div>
    <div :style='{width: "100px", height: "100px", backgroundColor: color}'>999999</div>
  </div>

  <script src="js/vue.js"></script>
  <script>
    // 绑定style属性,还可以写成对象的形式.

    let vm = new Vue({
      el: '#app',
      data: {
        color: 'red',
        sty:'width: 100px; height: 100px; background-color: red',
        obj: {
          width: '100px',
          height: '200px',
          backgroundColor: 'red',
        }
      }
    })

  </script>

v-on

<button v-on:click='fn'>按钮</button>
<button @click='fn'>按钮</button>
<button @click='show(100, $event)'>按钮</button>
    <div>{{msg}}</div>

v-on:事件名=>指令=>用来给元素添加事件

v-on的简写 => @

v-on事件传参，直接在指令后写函数调用

v-on事件对象

没有参数，直接通过形参获取
有参数，需要手动传入$event

事件句柄内的this默认永远指向当前的vm实例

v-on修饰符

@click.stop 阻止冒泡

@click.prevent 阻止默认事件

@click.prevent.stop 阻止默认事件和冒泡

v-if

v-if 条件渲染显示隐藏指令是布尔值，true是显示，false是隐藏

v-show与v-if功能一致，v-show是通过display样式来控制显示隐藏

v-if 和 v-else-if 和 v-else 指令可以配合使用

       此处显示222
    <h3 v-if='1>2'>111</h3>
    <h3 v-else-if='1<2'>222</h3>
    <h3 v-else>333</h3>

v-for

item为里面数组元素，或者对象属性值

如果是数字，就是循环多少次

如果是字符串，循环字符串内容

<ul>
    <li v-for='item in arr'>{{item}}</li>
</ul>
<ul>
    <li v-for='(item,i) in arr'>{{i}}--{{item}}</li>
    </ul>
<script>
new Vue({
      el: "#app",
      data: {
        arr: [111, 222, 333, 444],
        list: [
          {
            title: '美国疫情第三波爆发',
            date: '2021-08-09'
          },{
            title: '美国疫情第四波爆发',
            date: '2021-08-10'
          },{
            title: '美国疫情第五波爆发',
            date: '2021-08-11'
          }
        ]
      }
    });
</script>

嵌套

    <ul v-for='val in list'>
      <li v-for='item in val'>{{item}}</li>
    </ul>

操作数组

直接修改数组元素，如果这个元素是基本类型，则视图不会改变
直接修改引用类型，可以驱动视图更新
直接修改引用类型为一个新的对象，视图不会改变
直接修改length也不会变

最好使用可以修改自身的数组方法

push pop shift unshift splice sort reverse

可以驱动视图更新

v-model

v-model 只用在表单元素上用于实现双向绑定

<div id='app'>
    ！input的value改变的时候div里msg也改变！
    ！div里msg改变的时候input的value也改变！
  <input type="text" v-model='msg'>
  <div>{{msg}}</div>
</div>

v-model修饰符

v-model.lazy 取代input 监听change 事件

v-model.number 输入字符串转为有效的数字

v-model.trim 输入首尾空格过滤

复选框

绑定数组

需要绑定数组，绑定数组后，复选框√的，则它的value会自动放入绑定的数组
绑定数组后，如果不打√的，则它的value会自动从数组内删除

  <div id='app'>
    <h3>选择你喜欢的水果</h3>
    <hr>
    <input type="checkbox" value='苹果' v-model='favo'>苹果
    <input type="checkbox" value='香蕉' v-model='favo'>香蕉
    <input type="checkbox" value='雪梨' v-model='favo'>雪梨
    <hr>
    你喜欢的水果:{{favo.join()}}
  </div>

<script>
    new Vue({
      el: '#app',
      data: {
        favo: ['香蕉', '雪梨']
      }
    })
</script>

如果复选框绑定的是布尔值，则复选框打钩，这个布尔值会自动变为true，否贼布尔值会变为false

单选框

多个单选框绑定同一个数据，则这个单选框就只有一个时可以打钩的（类似于name作用）

打钩的选项，它的value会变成当前绑定数据的值

 <div id='app'>
    <h3>选择你的性别</h3>
    <hr>
    <input type="radio" value='男' v-model='sex'>男
    <input type="radio" value='女' v-model='sex'>女
    <hr>
    你的性别是:{{sex}}
  </div>
  <script src="js/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        sex: '女'
      }
    })
  </script>

下拉框

v-model写在select标签上

选中的option内容会自动变成绑定的数据值

  <div id='app'>
    请选择你的出生年份:
    <select v-model='year'>
      <option>1997</option>
      <option>1998</option>
      <option>1999</option>
      <option>2000</option>
    </select>
    <div>你的出生年份是:{{year}}</div>
    <textarea v-model='msg' cols="30" rows="10"></textarea>
    <div>{{msg}}</div>
  </div>
  <script src="js/vue.js"></script>
  <script>
    // v-model应该用在select标签上
    // 选中的option的内容会自动变成绑定的数据值
    new Vue({
      el: '#app',
      data: {
        year: '1999',
        msg: 111
      }
    })

  </script>

高亮

这里每次点击都会for循环走一遍所有li

  <div id='app'>
    <ul>
      <li
        :style='{backgroundColor: index==i ? "red" : ""}'
        v-for='(item,i) in arr'
        @click='toRed(i)'
      >{{item}}</li>
    </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>

    new Vue({
      el: '#app',
      data: {
        arr: [111, 222, 333, 444, 555],
        // 点击的li的下标.
        index: null
      },
      methods: {
        toRed(i) {
          // 记录被点击的li的下标.
          this.index = i;
        }
      }
    })

  </script>

created

用于data数据进行初始化

程序运行，created会默认触发一次

生命周期钩子函数

data: {
    msg1: 0,
        msg2: 0,
            num: 0
},
    created() {
        this.msg1 = Math.random();
        this.msg2 = Math.random();
        this.num = this.msg1 + this.msg2
    },
        methods: {
            fn() {
                this.msg1 = Math.random();
                this.msg2 = Math.random();
            }

梦境中的星光

Vue-1

VUE

插值表达式

v-once

v-html

v-bind

v-bind绑定class

{{msg}}

{{msg}}

{{msg}}

{{msg}}

{{msg}}

{{msg}}

v-bind绑定style

v-on

v-if

v-for

操作数组

v-model

复选框

单选框

下拉框

高亮

created