vue基础

1.样式绑定

1.绑定class样式

利用v-band绑定vue data中的数据，通过事件的切换发生变化。
== :class"mood" ==

<div id="app">
        <!-- 绑定class样式，动态变化 -->
      <div class="basic" :class="mood" @click="changMood">{
   {
   name}}</div>

      <!--  -->
    </div>

js

 <script>
      const vm = new Vue({
   
        el: "#app",
        data: {
   
          name: "code袁",
          mood: "normal",
        },
        methods: {
   
          changMood() {
   
            this.mood = "happy";
          },
        },
      });
    </script>

2.绑定style样式

利用v-band绑定vue data中的数据，
:style="styleobjc’

<!-- style内敛样式 -->
      <div class="basic" :style="styleObjc">{
   {
   name}}</div>

  data: {
   
          styleObjc: {
   
            fontSize: "40px",
          },
        },

2.列表渲染

1.列表过滤

array.filter(function(currentValue,index,arr), thisValue)

返回值：
返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

列表过滤是通过对数组persons使用filter函数进行关键字过滤，返回包含name的数组值
data数据

data: {
   
          persons: [
            {
    name: "张三", age: "15" },
            {
    name: "李四", age: "25" },
            {
    name: "王五", age: "35" },
          ],
          keyWord: "",
          fillperson: [],
        },

1.1 watch监听

 watch: {
   
          keyWord: {
   
            immediate: true,
            handler(val) {
   
              // 数据过滤
              this.fillperson = this.persons.filter((res) => {
   
                return res.name.indexOf(val) !== -1;
                console.log(val);
              });
            },
          },
        },

1.2 computed

 computed: {
   
          fillperson() {
   
            return this.persons.filter((res) => {
   
              return res.name.indexOf(this.keyWord) !== -1;
            });
          },
        },

2.列表排序

2.1 sort（）函数

var arr = [-2, -1, 0, 2, 1];
      arr.sort((a, b) => {
   
        // 降序a-b
        return a - b;
      });

结果为 -2，-1,0，1,2

var arr = [-2, -1, 0, 2, 1];
      arr.sort((a, b) => {
   
        // 升序b-a
        return b-a;
      });

2.2 列表排序

   new Vue({
   
        el: "#app",
        data: {
   
          persons: [
            {
    name: "张三", age: "45" },
            {
    name: "李四", age: "25" },
            {
    name: "王五", age: "35" },
          ],
          keyWord: "",
          typesort: 1,
        },
        // 计算属性
        computed: {
   
          fillperson() {
   
            const arr = this.persons.filter((res) => {
   
              return res.name.indexOf(this.keyWord) !== -1;
            });
            if (this.typesort) {
   
              arr.sort((p1, p2) => {
   
                return this.typesort === 1 ? p2.age - p1.age : p1.age - p2.age;
              });
            }
            return arr;
            console.log(arr);
          },
        },
      });

 

  
 

结果

3.自定义指令

自定义指令v-big

<span v-big="n"></span>

定义指令的实现
1.简化写法只实现bind和update

 directives: {
   
          big(element, binding) {
   
            element.innerText = binding.value * 10;
            console.log(element, binding);
          },
        },

2.全面

 fbind: {
   
            // 指令与元素成功绑定时
            bind(element, binding) {
   
              element.value = binding.value;
            },
            // 指令所在元素插入页面是
            inserted(element, binding) {
   
              element.focus();
            },
            // 指令所在模板重新解析时
            update(element, binding) {
   
              element.value = binding.value;
            },
          },

element 是实际的元素，banding是绑定的对象
指令与元素绑定时会被调用，指令所在的模块被重新解析是会调用。
注意：在自定义函数的this是window

4.vue生命周期

转载：https://blog.csdn.net/qq_48164590/article/details/128881365