• 2.学习Vue入门知识点

    文章目录

    一、项目结构

    1. 结构总览

    • 使用vue-cli创建的项目，主要需要注意学习的是框标注部分
      入门知识1

    2. App.vue

    • 说明
      这个是根组件，具有一般组件的基本结构，同时在编译结束的时候会把根组件渲染到#app，这里的#app其实是指的index.html里面的#app。
      入门知识2.png

    • 编译过程
      app.vue->main.js->index.html
      编译app.vue->编译完进行代码替换->替换index.html里面的#app

    3. main.js

    • main.js作为项目入口，引入vue模块、APP组件，创建Vue对象，并将APP组件传入，把APP组件编译好以后渲染到#app中
      入门知识3.png

    二、vue中的几个重要的生命周期钩子

    • created
      用来在一个实例被创建之后执行代码
    • ounted
      实例被挂载后调用，但是不保证所有的子组件也都会挂载完成
    • destroyed
      实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
    • 更多
      https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子

    三、vue中几个重要的选项

    1.data

    入门知识4.png

    • 这里可以放一些绑定在对应vue文件上的变量，这些变量可以直接用在template标签里
    • data传入的必须是一个函数(返回一个对象)，每个实例可以维护自己独立的对象拷贝

    2.computed

    • 说明
      • 计算属性是 基于它们的响应式依赖 进行缓存的
      • 只在相关响应式依赖发生改变时它们才会重新求值
    • 代码示例
      • 例如，因为Date.now()不是响应式依赖，所以now不会重新求值，而是一直为缓存的值。
            computed: {
        now: function () {
            return Date.now()
        }
    }

        • 1
        • 2
        • 3
        • 4
        • 5
      • 如果不希望因为缓存产生一些不更新的问题，每次都要对某一属性进行重新求值，可以在data返回的对象中定义属性，然后用方法去每次计算求值，然后更新属性。

    3.watch

    • 说明

      • Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动。
        当有一些数据需要随着其它数据变动而变动时，很容易滥用 watch。然而，通常更好的做法是 使用计算属性而不是命令式的 watch 回调 。
      • 也可以用vm.$watch( expOrFn, callback, [options] )方法对某个值或对象进行监控，这个方法的返回值是unwatch()方法[取消监听]

    • 参数

      • 属性deep
        当watch的数据是对象时，由于对象地址是不变的，所以仅仅改变对象的某些属性是检测不出来的，使用deep:true属性可以检测出属性的变化，当然这种开销也会比较大。
      • 属性immediate
        在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，执行回调函数。

    • 代码示例
      入门知识5.png

          watch:{
        syncmsg:{//监听syncmsg，设置了immediate属性
            handler(newval,oldval){
                console.log("newval",newval)
                console.log("oldval",oldval)
            },
            deep:true,
            immediate:true
        }
    },

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

      入门知识5-1

    • 效果
      依次点击更新父组件、修改子组件内容按钮(这里知识点见6(6).sync和emit)
      入门知识6

    4.methods

    • 一般函数的定义都写在这个模块内

    5.prop

    • 可以通过该选项设置传值接口，在使用组件时对prop中设置的属性使用v-bind进行数据的绑定传值

    四、Vue的一些指令

    1.v-bind

    • 说明
      缩写‘:’，可以用来动态绑定组件的attribute，绑定的值可以是对象或数组，也可以用于传递prop，传递的prop必须是在子组件内部props中声明的。
    • 用法
      • (1)传递prop
        • 代码
              <template>
        <div class="demo-bind-box">
          {{bindmsg}}
        div>
    template>

    <script>
    export default {
        props:['bindmsg'],
        data(){
            return{
                //bindmsg:'hello'
            }
        }
    }
    script>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
              <bindBox :bindmsg="mybindmsg">bindBox>

          • 1
          入门知识7-0
        • 效果
          入门知识7
      • (2)绑定attribute

        • 在上面的基础上对style属性进行绑定，绑定了文字的颜色和大小

              <bindBox :bindmsg="mybindmsg" :style="'color:red;font-size:36px;'">bindBox>

          • 1

          入门知识8

        • 也可以绑定的值是一个对象(蓝色是绑定的值是对象的效果)

              <bindBox :bindmsg="mybindmsg" :style="{color:'blue','font-size':'36px'}">bindBox>

          • 1

          入门知识9

      • (3)v-bind修饰符.prop

        • (3.1)v-bind 默认绑定到 DOM 节点的 attribute 上，使用 .prop 修饰符后，会绑定到 property，这里要明确HTML attribute和DOM property的区别：

          • attribute 是 dom 元素在文档中作为 html 标签拥有的属性；
          • property 是 dom 元素在 js 中作为对象拥有的属性。

        • (3.2)直接把div标签当作对象，用“.”输出即是property属性，“.”是不能输出自定义绑定的属性的。

              <bindBox id="mybindbox" :bindmsg="mybindmsg" :bindprop.prop="mybindmsg" :bindattr="mybindmsg" :style="'color:red;font-size:36px;'">bindBox>

          • 1

        • (3.3)使用.prop修饰符绑定属性property-bindprop
          入门知识10

        • (3.4)直接使用v-bind是将属性绑定到attribute-bindattr

              let box=document.getElementById('mybindbox').attributes
    console.log("box:",box)

          • 1
          • 2

          入门知识11

        • 注
          如果要输出两个绑定的属性，前者(绑定到attribute)需要调用 getAttribute(“bindmsg”) 方法，后者(绑定到 property)可以 直接使用".bindprop" 获取

    2.v-model

    • 文档
      https://cn.vuejs.org/v2/guide/forms.html#在组件上使用-v-model

    • 说明
      你可以用 v-model 指令在表单 、