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

不准吃饭
206 阅读2分钟

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，我们可以有以下的操作

image-20211104092251677.png

页面就会展示 see u

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

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

QQ图片20211104164141.png 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>

image-20211104155654450.png

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

image-20211104155806395.png

image-20211104155755692.png

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

然后我们再看看另一种

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

image-20211104155934202.png

改变 message 的值

image-20211104160022525.png

image-20211104160029253.png

时间戳改变了！！！

所以得出一个结论：

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，因为更加简洁
avatar
文章
阅读
粉丝