Nelson_hehe
Nelson_hehe

2.学习Vue入门知识点

文章目录

  • 一、项目结构
    • 1. 结构总览
    • 2. App.vue
    • 3. main.js
  • 二、vue中的几个重要的生命周期钩子
  • 三、vue中几个重要的选项
    • 1.data
    • 2.computed
    • 3.watch
    • 4.methods
    • 5.prop
  • 四、Vue的一些指令
    • 1.v-bind
    • 2.v-model
    • 3.v-show
    • 4.v-if
    • 5.v-for
    • 6.sync和emit

一、项目结构

1. 结构总览

  • 使用vue-cli创建的项目，主要需要注意学习的是框标注部分
    2.学习Vue入门知识点_第1张图片

2. App.vue

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

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

3. main.js

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

二、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()
        }
    }
    • 如果不希望因为缓存产生一些不更新的问题，每次都要对某一属性进行重新求值，可以在data返回的对象中定义属性，然后用方法去每次计算求值，然后更新属性。

3.watch

  • 说明

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

  • 参数

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

  • 代码示例
    2.学习Vue入门知识点_第4张图片

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

    入门知识5-1

  • 效果
    依次点击更新父组件、修改子组件内容按钮(这里知识点见6(6).sync和emit)
    2.学习Vue入门知识点_第5张图片

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>

            <bindBox :bindmsg="mybindmsg">bindBox>
        2.学习Vue入门知识点_第6张图片
      • 效果
        入门知识7
    • (2)绑定attribute

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

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

        入门知识8

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

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

        2.学习Vue入门知识点_第7张图片

    • (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>

      • (3.3)使用.prop修饰符绑定属性property-bindprop
        2.学习Vue入门知识点_第8张图片

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

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

        2.学习Vue入门知识点_第9张图片

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

2.v-model

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

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