vue2.x("^2.6.10")体验总结

最新推荐文章于 2025-05-04 14:45:23 发布

SarinaDu

最新推荐文章于 2025-05-04 14:45:23 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue2.x

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/103408159

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文对比了Vue2.x与React在组件化、数据绑定、事件处理等方面的异同，介绍了Vue的数据管理、组件命名、模板语法等核心概念，并通过实例展示了事件绑定、属性绑定、条件渲染、插槽等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

日常积累,欢迎指正

vue2.x总结

在开始学习 vue 的使用之前已经可以熟练使用 React 开发了所以总结的以下注意点在一定程度上是相较于 React 组件来说的

源码地址

以下注意点已经相应的测试代码均可以通过运行 vue-base-demo 自行测试体验

注意点

vue 的数据(state) 需要放在 data 方法的返回对象中
vue 的组件名称由 name 指定
vue 中数据与模板的绑定使用 {{}}
vue 中原始 HTML 代码片段的插入要使用 v-html 指令

<template>
<div class = 'com-container'>
    com
    {{msg1}}
    {{msg2}}
    <div v-html="htmlString"></div>
</div>
</template>
<script>
export default {
    name:'com',
    data(){
        return {
            msg1:'msg1',
            msg2:'msg2',
            htmlString: '<span style = "color:red">Hello World!</span>',
        }
    }
}
</script>
<style>
.com-container{
    font-size:16px;
}
</style>

vue 的方法需要放在 methods 对象中
vue 的事件绑定需要借助 v-on 指令，可以简写为 @ 详细参考
vue 中要在某方法中获取当前 DOM 需要借助 $events
vue 中阻止事件冒泡、组件默认事件的实现也是由修饰符实现参考

<template>
<div class = 'com-container'>
     <button v-on:click = "f1">点击触发 f1 函数</button>
     <button @click = "f2('我是 函数 f2')">点击触发 f2 函数</button>

      <!-- 与 $events 对应的参数获取到的就是当前 DOM -->
     <button @click = "f3($events)">点击触发 f3 函数</button>
     <button @click = "f4('我是函数 f4',$events)">点击触发 f4 函数</button>

     <a @click.prevent = 'f1'>这是一个 a 标签</a>
</div>
</template>
<script>
export default {
    name:'com',
    methods:{
        f1:function(){
            console.log('f1')
        },
        f2:function(param){
            console.log(param)
        },
        f3:function(dom){
            console.log(dom)
        },
        f4:function(param,dom){
            console.log(param,dom)
        }
    },
    data(){
        return {}
    }
}
</script>

<style>
.com-container{
    font-size:16px;
}
</style>

组件要用到的子组件导入后需要在 components 中挂载后才能使用
父组件向子组件传参使用 props ,props 可以是数组也可以是对象，数组类型使用简单但对象写法能添加更多约束
子组件向父组件传参需要借助自定义事件 $emit(‘functionName’,f-param1,f-param2,…)
vue 中属性绑定要使用 v-bind 指令,简写为 :

父组件 parent

<template>
<div class = 'com-container'>
    <a1 @sendInfo = "fun1" :age = "num"/>

    <!-- 在设置动态 class 是写法和效果均类似于 React 的 [classnames 库](https://github.com/JedWatson/classnames) -->
    <div :class ="[a1,a2]">
      测试 1
    </div>
    <div :class ="{'test-1':a3}">
      v测试 2
    </div>
    
    <div :class="obj">
      测试 3
    </div>
</div>
</template>
<script>
import a1 from 'a1.vue'
export default {
    name:'parent',
    components:{
        a1,
    },
    methods:{
        fun1:function(param){
            this.num++
            console.log(param)
        }
    },
    data(){
        return {
            num:0,
            a1:"test1",
            a2:"test2",
            a3:false,
            obj:{
                "test-1":true
            },
        }
    }
}
</script>

<style>
.com-container{
    font-size:16px;
}
</style>

子组件 child

<template>
<div class = 'com-container'>
    a1 - {{msg}}

    <button v-on:click="$emit('sendInfo','我是子组件的数据')">发送固定数据到父组件</button>
    <button v-on:click="$emit('sendInfo',{{msg}})">发送 state 数据到父组件</button>
</div>
</template>
<script>
import a1 from 'a1.vue'
export default {
    name:'a1',
    props:['age'],
    methods:{

    },
    data(){
        return {
            msg:'我是 a1信息!'
        }
    }
}
</script>

<style>
.com-container{
    font-size:16px;
}
</style>

vue 中的 slot 功能上相当于 React 的高阶组件

slot 的使用

<template>
    <div class="com" id="">
        <slot name = "header"></slot>
        com 组件
        <slot name = "footer"></slot>
    </div>
</template>
<script>
export default {
   props:['age'],
   data() {
      return {
          name:'com'
      }
   },
}
</script>

具有 slot 的组件的使用

<template>
  <div id="app">
    <com>
      <header slot ="header">头部</header>
      <footer slot ="footer">尾部</footer>
    </com>
  </div>
</template>

<script>
import com from './components/com'
export default {
  name: 'app',
  components: {
    com,
  },
}
</script>

使用多个 slot 后可以给 slot 添加 name 属性,使用时对应有一个 name 属性与之对应如果只有一个 slot 的话可以将 name 属性忽略

vue 中的条件渲染指令示例

<template>
  <div class="hello">
    <p v-if ="seen">现在你看到我了</p>
    <p v-else>失败了</p>
    <ul>
      <!-- <li v-for="item in list" :key="item">
        {{item}}
      </li> -->
      <li v-for="(item,index) in list" :key="item">
        item = {{item}},
        index = {{index}}
      </li>

      <ul>
        <template v-for="(item) in list">
          hello <li :key="item">{{item}}</li>
        </template>
      </ul>
    </ul>

  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      seen: true,
      list:['a','b','c','d']
    };
  }
};
</script>