Vue-基础入门(上)--Part.2(1-4)

2-1 Vue 中应用和组件的概念

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

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

对于这个 vm，我们可以有以下的操作

页面就会展示 see u

2-2 理解 Vue 中的生命周期函数

**生命周期函数：**在某一时刻会自动执行的函数

beforeCreate：在实例生成之前会自动执行的函数

created：在实例生成之后会自动执行的函数

beforeMount：在组件内容被渲染到页面之前会自动执行的函数

mounted：在组件内容被渲染到页面之后自动执行的函数

beforeUpdate：当数据发生变化时会自动执行的函数

updated：当数据发生变化，页面重新渲染后，会自动执行的函数

beforeUnmount：当 Vue 应用失效时，自动执行的函数

unmounted：当 Vue 应用失效时，且 dom 完全销毁之后，自动执行的函数

2-3 常用模板语法讲解

1. v-html

   <script>
     const app = Vue.createApp({
       data () {
         return {
            message: '<strong>hello Y</strong>'
         }
       },
       template: `
         <div v-html="message">
         </div>
       `
     })
     app.mount('#root');
   </script>
   

2. v-bind可以简写成:

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

3. v-once

   <script>
     const app = Vue.createApp({
       data () {
         return {
            message: 'hello Y'
         }
       },
       template: `
         <div v-once>
           {{message}}
         </div>
       `
     })
     const vm = app.mount('#root');
   </script>
   

   v-once：页面只渲染一次，当 message 发生变化 div里的内容不发生改变

4. v-if

   <script>
     const app = Vue.createApp({
       data () {
         return {
            message: 'hello Y',
            show: false
         }
       },
       template: `
         <div v-if="show">
           {{message}}
         </div>
       `
     })
     const vm = app.mount('#root');
   </script>
   

5. 事件绑定 v-on

   <script>
     const app = Vue.createApp({
       data () {
         return {
            message: 'hello Y',
            show: false,
            event: 'click'
         }
       },
       methods: {
         handleClick() {
           alert('hi')
         }
       },
       template: `
         <div
           @[event]="handleClick"
         >
           {{message}}
         </div>
       `
     })
     const vm = app.mount('#root');
   </script>
   

   @[event]:"handleClick"这里的[]就是动态绑定一个事件

6. 默认事件 .prevent

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

   阻止默认事件(点击跳转到百度)，阻止后执行自己写的逻辑handleClick

2-4 数据，方法，计算属性和侦听器

先贴一个代码

<script>
  const app = Vue.createApp({
    data () {
      return {
         count: 2,
         price: 10
      }
    },
    methods: {
      
    },
    template: `
      <div>
        {{count * price}}
      </div>
    `
  })
  const vm = app.mount('#root');
</script>

前面说过{{}}是插值表达式，里面可以放js代码^ ^

这样写也可以，但是还有种“优雅的”写法

computed: {
  total(){
    return this.count * this.price
  }
},
template: `
  <div>
    {{total}}
  </div>
`

这里的computed就是计算属性，可以写需要计算的变量

那么又看一下下面的代码

<script>
  const app = Vue.createApp({
    data () {
      return {
         count: 2,
         price: 10
      }
    },
    methods: {
      anotherTotal() {
        return this.count * this.price
      }
    },
    computed: {
      total(){
        return this.count * this.price
      }
    },
    template: `
      <div>
        {{anotherTotal()}}
      </div>
    `
  })
  const vm = app.mount('#root');
</script

我们用methods(方法)，也能像上面一样展示一样的结果，那么写在methods和computed里有什么区别呢？

<script>
  const app = Vue.createApp({
    data () {
      return {
         count: 2,
         price: 10,
         message: 'hi'
      }
    },
    methods: {
      anotherTotal() {
        return Date.now()
      }
    },
    computed: {
      total(){
        return Date.now()
      }
    },
    template: `
      <div>
        {{message}}---{{total}}
      </div>
    `
  })
  const vm = app.mount('#root');
</script>

然后我们在控制台改变 mesaage 的值

我们会发现这个时间戳是没有改变的 >w<

然后我们再看看另一种

{{message}}---{{anotherTotal()}}

改变 message 的值

时间戳改变了！！！

所以得出一个结论：

** computed当计算属性依赖的内容发生变更时，才会重新执行计算**

** methods只要页面重新渲染，就会重新计算**

最后就是侦听器watch

先上代码！！

<script>
  const app = Vue.createApp({
    data () {
      return {
         count: 2,
         price: 10,
         newTotal: 20
      }
    },
    watch: {
      price(current, pre) {
        this.newTotal = current * this.count
      }
    },
    template: `
      <div>
        {{newTotal}}
      </div>
    `
  })
  const vm = app.mount('#root');
</script>

首先要说的是这个price(current, pre)这个就是监听price变量，如果发生变化，那么就执行里面的逻辑，而参数current是price当前的值，pre是price变化前的值

当我们在后台vm.$data.price=30显示的newTotal也就跟着发生改变了^ ^

然后我们发现其实这个在computed里就能直接实现的(上面有直接展示total就行了)，在watch里写不够简洁~

最后总结一下：

• computed和methods都能实现的一个功能，建议使用computed，因为有缓存
• computed和watch都能实现的功能，建议使用computed，因为更加简洁