2.学习Vue入门知识点

Nelson_hehe

已于 2022-09-14 14:19:33 修改

阅读量560

点赞数 1

分类专栏： # Vue基础文章标签： vue.js 学习 javascript 入门知识点

于 2022-09-14 10:01:49 首次发布

本文链接：https://blog.csdn.net/hehe_soft_engineer/article/details/126846880

版权

Vue基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、项目结构
二、vue中的几个重要的生命周期钩子
三、vue中几个重要的选项
四、Vue的一些指令

一、项目结构

1. 结构总览

使用vue-cli创建的项目，主要需要注意学习的是框标注部分

2. App.vue

说明
这个是根组件，具有一般组件的基本结构，同时在编译结束的时候会把根组件渲染到#app，这里的#app其实是指的index.html里面的#app。
编译过程
app.vue->main.js->index.html
编译app.vue->编译完进行代码替换->替换index.html里面的#app

3. main.js

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

二、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 将立即以表达式的当前值触发回调，执行回调函数。

代码示例
入门知识5.png

    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)

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)绑定attribute
  - 在上面的基础上对style属性进行绑定，绑定了文字的颜色和大小
```
    <bindBox :bindmsg="mybindmsg" :style="'color:red;font-size:36px;'"></bindBox>
```
  - 也可以绑定的值是一个对象(蓝色是绑定的值是对象的效果)
```
    <bindBox :bindmsg="mybindmsg" :style="{color:'blue','font-size':'36px'}"></bindBox>
```
- (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
  - (3.4)直接使用v-bind是将属性绑定到attribute-bindattr
```
    let box=document.getElementById('mybindbox').attributes
    console.log("box:",box)
```
  - 注
    如果要输出两个绑定的属性，前者(绑定到attribute)需要调用 getAttribute(“bindmsg”) 方法，后者(绑定到 property)可以 直接使用".bindprop" 获取

2.v-model

文档
https://cn.vuejs.org/v2/guide/forms.html#在组件上使用-v-model
说明
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

示例

代码

    <input v-model="message" placeholder="edit me">
    <p>输入框内容为: {{ message }}</p>

效果

修饰符
- .lazy(在输入内容修改后才更新值，表现为回车或者焦点不在框内)
- .number(限制输入框内只能输入数字)
- .trim(自动过滤掉输入内容的前后空格)

3.v-show

说明
当v-show="true"中的value为true的时候，才会显示对应元素，当value为false的时候，前端还是会渲染加载出来，只不过不显示，就是简单地CSS切换

示例

代码

    <input v-model="message" placeholder="edit me">
    <p v-show="message=='true'">输入框内容为: {{ message }}</p>

v-show=“false”
v-show=“true”

只有当输入的值为true的时候才会出现文本

4.v-if

说明
当v-show换成v-if后，同样是传入boolean值，区别就是当传入的value为false时，这部分直接注释掉，不会加载到页面中，只有在value为true的时候才会加载到页面。

示例

v-if=“false”
v-show=“true”

搭配使用v-else

代码

    <input v-model="message" placeholder="edit me">
    <p v-if="message=='true'">输入框内容为: {{ message }}</p>
    <p v-else style="color:red">输入框内容为: {{ message }}</p>

效果

5.v-for

说明
在data中定义列表，使用v-for指令进行遍历

示例

定义

    fruits:[{
        name:'apple',
        price:10
    },{
        name:'orange',
        price:11
    },{
        name:'peach',
        price:12
    }]

遍历

    <div v-for="item in fruits">
        <div>{{item.name+":"+item.price}}</div>
    </div>

效果

6.sync和emit

说明
可以用于子组件更新父组件绑定的内容

子组件<bindBox>

子组件定义

    <template>
        <div class="demo-bind-box" :bindattr="mybindattr" >
            {{bindmsg}}
            <br>
            子组件:{{emitmsg}}
            <br>
            <button @click="emitMsg">更新父组件syncmsg内容</button>
            <br>
        </div>
    </template>

子组件对应的js内容

    <script>
        export default {
            props:['emitmsg'],
            data(){
                return{
                    bindmsg:'hello',
                    mybindattr:'attr',
                }
            },
            methods:{
                emitMsg(){
                    this.$emit('update:emitmsg','更新父组件内容')
                }
            }
        }
    </script>

操作

①初始时：外部组件调用<bindBox>，使用 .sync修饰符，向子组件同步数据，初始化emitmsg为syncmsg(‘初始时父组件传递给子组件的内容’)
```
    <bindBox :emitmsg.sync="syncmsg"></bindBox>
    <div>父组件:{{syncmsg}}</div>
    <button @click="changeChildMsg">父组件修改子组件内容</button>
```
- 效果

②子组件更新父组件：点击更新父组件，调用emit方法动态更新emitmsg

   emitMsg(){
        this.$emit('update:emitmsg','更新父组件内容')
    }

效果

③父组件更新子组件：点击修改子组件内容，该按钮直接修改syncmsg，子组件中的emitsmg是同步更新的

    <button @click="changeChildMsg">父组件修改子组件内容</button>

    changeChildMsg(){
            this.syncmsg="父组件又更新了子组件的内容"
    },

效果