Vue 基础之应用及组件、生命周期函数、模版语法、computed 及 watcher、样式绑定语法、条件渲染、列表循环渲染、事件绑定和表单中双向绑定的指令

一、Vue 的应用及组件、生命周期函数、模版语法、computed 及 watcher、样式绑定语法、条件渲染、列表循环渲染、事件绑定和表单中双向绑定的指令

1. createApp 表示创建一个 Vue 应用，存储到 app 变量中。传入的参数表示，这个应用最外层的组件，应该如何展示。MVVM 设计模式，m -> model 数据，v -> view 视图，vm -> viewModel 视图数据连接层，vm 代表的就是 vue 应用的根组件，如下所示：

const app = Vue.createApp({
  data () {
    return (
      message: 'hello world'
     )
  },
  template: "<div>{{message}}</div"
});
const vm = app.mount('#root');

2. 生命周期函数是在某一时刻会自动执行的函数，如下所示：

• beforeCreate()，在实例生成之前会自动执行的函数
• created()，在实例生成之后会自动执行的函数
• beforeMount()，在模版已经被编程函数之后立即自动执行的函数，在组件内容被渲染到页面之前自动执行的函数
• mounted()，在组件内容被渲染到页面之后自动执行的函数
• beforeUpdate()，当 data 中的数据发生变化时会自动执行的函数
• updated()，当 data 中的数据发生变化，同时页面完成更新后，会自动执行的函数
• beforeUnmount()，当 Vue 应用失效时，自动执行的函数
• unmounted()，当 Vue 应用失效时，且 dom 完全销毁之后，自动执行的函数

3. 模版语法，{{}} 插值表达式、v-on(@)、v-bind(:)、v-html、动态参数、修饰符等等，如下所示：

const app = Vue.createApp({
  data () {
    return (
      message: 'hello world',
      show: false,
      name: 'title',
      event: 'mouseenter'
    )
  },
  methods: {
    handleClick () {
      alert('click')
    }
  },
  template: `
    <form action="https://www.baidu.com" @click.prevent="handleClick>
      <button type="submit>提交</button>
    </form>
  `
})
const vm = app.mount('#root');

4. 在 methods 中，方法里面的 this 都是指向对应 vue 的实例或者是 vue 组件的实例里面。在外层的 this，是指向 window。在 methods 中，只要页面重新渲染，才会重新计算。在 computed 中，当计算属性依赖的内容发生变更时，才会重新执行计算。在 watch 中，侦听器监听属性发生变化后，函数会执行。computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存。computed 和 watcher 都能实现的功能，建议使用 computed，因为更简洁，如下所示：

const app = Vue.createApp({
  data () {
    return (
      message: 'hello world',
      count: 2,
      price: 5,
      newTotal: 10,
    )
  },
  watch: {
    price(current, prev) {
      this.newTotal = current * this.count
    }
  },
  computed: {
    total() {
      return Date.now() + this.count
    }
  },
  methods: {
    formatString(string) {
      return string.toUpperCase();
    },
    getTotal() {
      return Date.now()
    },
  },
  template: `
    <div>{{message}} {{newTotal}}</div>
  `
});
const vm = app.mount('#root');

5. 样式绑定渲染，可以使用 class 的写法，也可以使用 style 的写法，如下所示：

const app = Vue.createApp({
  data () {
    return (
      classString: 'red',
      classObject: { red: false, green: true },
      classArray: ['red', 'green', { brown: false }],
      styleString: 'color: yellow;background: orange',
      styleObject: {
        color: 'orange',
        background: 'yellow'
      }
    )
  },
  template: `
    <div :style="styleObject>
      Hello World
    </div>
  `
});
app.component('demo', {
  template: `
    <div :class="$attrs.class">one</div>
    <div :class="$attrs.class">two</div>
  `
});
const vm = app.mount('#root');

6. 条件渲染，v-if 是控制 DOM 元素是否存在而显示，v-show 是控制 display: none; 是否存在而显示，如下所示：

const app = Vue.createApp({
  data () {
    return {
      show: false,
      conditionOne: false,
      conditionTwo: true
    }
  },
  template: `
    <div v-if="show">Hello World</div>
    <div v-if="conditionOne">if</div>
    <div v-else-if="conditionTwo">else if</div>
    <div v-else>else</div>
    
    <div v-show="show">world</div>
  `
});
const vm = app.mount('#root');

7. 列表循环渲染，使用 v-for，如下所示：

const app = Vue.createApp({
  data () {
    return {
      listArray: ['tom', 'jack', 'student'],
      listObect: {
        firstName: 'tom',
        lastName: 'jack',
        job: 'student'
      }
    }
  },
  methods: {
    handleAddBtnClick () {
      // 1.使用数字的变更函数 push,pop,shift,unshift,splice,sort,reverse
      // this.listArray.push('helo');
      // this.listArray.pop();
      // this.listArray.shift();
      // this.listArray.unshift('hello');
      // this.listArray.reverse();
      
      // 2. 直接替换数组
      // this.listArray = ['zhangsan', 'lisi'];
      // this.listArray = ['zhangsan', 'lisi'].filter(item => item === 'lisi');
      
      // 3. 直接更新数组的内容
      // this.listArray[1] = 'wangwu';
      
      // 直接添加对象的内容，也可以自动的展示出来
      this.listObect.age = 30;
      this.listObect.sex = 'man';
    }
  },
  template: `
    <div>
      <!--<div v-for="(item, index) in listArray" :key="index">-->
      <!--  {{item}} -- {{index}}-->
      <!--</div>-->
      
      <template
        v-for="(value, key, index) in listObect"
        :key="index"
      >
        <div v-if="key !== 'lastName'">
          {{value}} -- {{key}}
        </div>
      </template>
      <div v-for="item in 10">{{item}}</div>
      <button @click="handleAddBtnClick">新增</button>
    </div>
  `
});
const vm = app.mount('#root');

8. 事件绑定，event、$event，事件修饰符：stop,prevent,capture,self,once,passive。按键修饰符：enter,tab,delete,esc,up,down,left,right。鼠标修饰符：left,right,middle。精确修饰符：exact，如下所示：

const app = Vue.createApp({
  methods: {
    handleClick() {
      console.log('click')
    },
  },
  template: `
    <div>
      <div @click.ctrl.exact="handleClick">123</div>
    </div>
  `
});
const vm = app.mount('#root');

9. 表单中的双向绑定，input、textarea、checkbox、radio、select，修饰符 lazy、number、trim，如下所示：

const app = Vue.createApp({
  data() {
    return {
      message: [],
      // message: 'hello',
      options: [{
        text: 'A', value: { value: 'A'},
      }, {
        text: 'B', value: { value: 'B'},
      }, {
        text: 'C', value: { value: 'C'}, 
      }]
    }
  },
  template: `
    <div>
      {{message}}
      <select v-model="message" multiple>
        <option v-for="item in options" :value="item.value">{{item.text}}</option>
      </select>
      <!--<input v-model.trim="message" />-->
    </div>
  `
});
const vm = app.mount('#root');