Vue3.x第一讲

---

前言

Vue3.x的基础讲解

---

一、Vue3.X环境搭建

1.脚手架的安装

npm install -global @vue/cli

2.创建项目

vue create my-project-name

3.运行效果图

cd my-project-name
npm run serve

4.目录结构介绍

二、Vue3.x数据绑定

1. Vue3.x绑定数据

业务逻辑：

export default {
  name: 'App',
  data(){
    return {
      msg:"Hello World",
      userInfo:{
        userName:"Simple",
        age:18
      }
    }
  }
}

template模板：

<p>msg的值：{{msg}}</p>
<p>绑定对象：{{userInfo.userName}}</p>

2. Vue3.x v-html绑定html

业务逻辑：

export default {
  name: 'App',
  data(){
    return {
      h2: "<h2>html数据绑定</h2>"
    }
  }
}

template模板：

<span v-html="h2"></span>

3. Vue3.x v-bind绑定属性

3.1 绑定属性

业务逻辑：

export default {
  name: 'App',
  data(){
    return {
      logoSrc: ""
    }
  },
  methods:{
    getImg:function (){
      return this.logoSrc=require("./assets/logo.png");
    }
  }
}

template模板：

<button @click="getImg">点击</button>
<img alt="Vue logo" :src="logoSrc">

3.2 绑定参数

业务逻辑：

export default {
  name: 'App',
  data(){
    return {
      attributeName:"src",
      attributeLogoSrc:""
    }
  },
  methods:{
    getAttributeImage:function (){
      return this.attributeLogoSrc=require("./assets/logo.png");
    }
  }
}

template模板：

<button @click="getAttributeImage">点击</button>
<img alt="Vue logo" :[attributeName]="attributeLogoSrc">

4.循环数据的绑定

4.1数组

业务逻辑:

export default {
  name: 'App',
  data() {
    return {
      list: new Array(),
      showlist: ''
    }
  },
  methods: {
    getList1Show: function () {
      this.showlist = 'list1';
      return this.list = ["例1", "例2", "例3"];
    },
    getList2Show: function () {
      this.showlist = 'list2';
      return this.list = [
        {
          "title": "title1"
        },
        {
          "title": "title2"
        },
        {
          "title": "title3"
        }];
    },
    getList3Show: function () {
      this.showlist = 'list3';
      return this.list = [
        {
          "cate": "发现1",
          list: [
            {
              "Fruit": "苹果"
            },
            {
              "Fruit": "香蕉"
            },
            {
              "Fruit": "草莓"
            }
          ]
        },
        {
          "cate": "发现2",
          list: [
            {
              "Fruit": "苹果"
            },
            {
              "Fruit": "香蕉"
            },
            {
              "Fruit": "草莓"
            }
          ]
        },
        {
          "cate": "发现3",
          list: [
            {
              "Fruit": "苹果"
            },
            {
              "Fruit": "香蕉"
            },
            {
              "Fruit": "草莓"
            }
          ]
        }
      ];
    }
  }
}

template模板:

  <button @click="getList1Show">list1</button>
  <button @click="getList2Show">list2</button>
  <button @click="getList3Show">list3</button>
  <div v-for="(item,index) in list" :key="index">
    <div v-if="showlist=='list1'">
      <div>{{ item }}</div>
    </div>
    <div v-else-if="showlist=='list2'">
      <div>{{ item.title }}</div>
    </div>
    <div v-else>
      <div>{{ item.cate }}</div>
      <div>
        <div v-for="(newsItem,index) in item.list" :key="index">
          <div>{{ newsItem.Fruit }}</div>
        </div>
      </div>
    </div>
  </div>

4.2对象

业务逻辑:

export default {
  name: 'App',
  data() {
    return {
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-03-22'
      }
    }
  }
}

template模板：

  <ul>
    <li v-for="(value,name,index) in myObject" :key="index">
      {{ name }}: {{ value }}--{{ index }}
    </li>
  </ul>

5.双向绑定

5.1 input的双向绑定

业务逻辑:

export default {
  name: 'App',
  data() {
    return {
      peopleInfo:{
        "username":""
      }
    }
  }
}

template模板:

<input v-model="peopleInfo.username">
{{peopleInfo.username}}

5.2 checkbox的双向绑定

业务逻辑

export default {
  name: 'App',
  data() {
    return {
      peopleInfo: {
        hobby: [{
          title: "吃饭",
          checked: false,
        },
          {
            title: "睡觉",
            checked: false,
          },
          {
            title: "敲代码",
            checked: false,
          },
        ],
      },
      checkArray:new Array()
    }
  },
  methods:{
    clickCheck:function (index,x,value){
      if(!x[index].checked){
        this.checkArray.push(value);
      }else{
        alert(value)
        this.checkArray=this.checkArray.filter(c=>c!=value);
      }
      console.log(...this.checkArray)
    }
  }
}

template模板:

  <span v-for="(item, index) in peopleInfo.hobby" :key="index">
     <input type="checkbox" :id="'check' + index" v-model="item.checked"/>
     <label :for="'check' + index"> {{ item.title }}</label>
  </span>

5.3 radio的双向绑定

业务逻辑:

export default {
  name: 'App',
  data() {
    return {
      peopleInfo: {
        "sex":""
      }
    }
  }
}

template模板:

  <input type="radio" value="1" id="sex1" v-model="peopleInfo.sex"/>
  <label for="sex1">男</label>
  <input type="radio" value="2" id="sex2" v-model="peopleInfo.sex"/>
  <label for="sex2">女</label>
  &nbsp;&nbsp;
  {{peopleInfo.sex}}

5.4 select的双向绑定

业务逻辑:

export default {
  name: 'App',
  data() {
    return {
      peopleInfo:{
        "city":"深圳",
        "cityList":["北京", "上海", "深圳"]
      }
    }
  },
  methods:{
    selectCity:function (value){
      alert(value)
    }
  }
}

template模板:

  <span v-for="(item, index) in peopleInfo.hobby" :key="index">
     <input type="checkbox" :id="'check' + index" v-model="item.checked" @click="clickCheck(index,peopleInfo.hobby,item.title)"/>
     <label :for="'check' + index"> {{ item.title }}</label>
  </span>

5.5 textarea的双向绑定

业务逻辑:

export default {
  name: 'App',
  data() {
    return {
      peopleInfo: {
        "mark":""
      }
    }
  }
}

template模板:

  <textarea name="mark" id="mark" cols="30" rows="4" v-model="peopleInfo.mark"></textarea>
  {{peopleInfo.mark}}

三、计算属性和watch侦听

1.计算属性

业务逻辑:

export default {
  data() {
    return {
      list:['apple','banana','orange','pear'],
      keyword:"",
      message:""
    };
  },
  computed: {
    searchList() {
      var tempArr = new Array();
      this.list.forEach((value) => {
        if (value.indexOf(this.keyword) != -1 && this.keyword != "") {
          tempArr.push(value)
        }
      })
      return tempArr;
    },
    reversedMessage(){
      return this.message.split('').reverse().join('')
    }
  }
}

template模板:

  <input type="text" v-model="keyword" placeholder="请输入关键词"/>
  <ul>
    <li v-for="(item,index) in searchList" :key="index">{{item}}</li>
  </ul>
  <input type="text" v-model="message" placeholder="请输入反转词"/>
  {{reversedMessage}}

2.watch侦听

业务逻辑:

export default {
  data() {
    return {
      firstName:"",
      lastName:""
    };
  },
  watch:{
    firstName:function (val){
      alert(val);
    },
    lastName:function (val) {
      alert(val)
    }
  }
}

template模板:

  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">