Vue基础记录

最新推荐文章于 2024-07-22 15:13:59 发布

qq_42830557

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量57

点赞数

分类专栏：前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_42830557/article/details/111224472

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue 数据驱动，MVVM框架
浏览器可以安装Vue Devtools
CDN 内容分发网络
v-if 与v-show区别
使用v-show，dom结构存在，只是style属性设置了display；
使用v-if，dom结构不存在
this：当前对象的引用。
Vue new 的实例方法中不能在箭头函数中使用this，会指向windows。所以一般都会写成function(){}格式
vue实例中computed对象里是需要做计算的属性，但是对象名不能和data中的名字重复；computed计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算
watch：一个对象，键是需要观察的表达式，值是对应的回调函数
computed / watch区别：watch擅长处理的场景是，一个数据影响多个数据；computed擅长的是，一个数据受多个数据影响
计算属性缓存 vs 方法

<p>Reversed message: "{{ reversedMessage() }}"</p>

<script>
	// 在组件中,使用方法
	methods: {
	  reversedMessage: function () {
	    return this.message.split('').reverse().join('')
	  }
	},
	// 使用计算属性
	computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。但是reversedMessage方法每次更新都会加载

Vue组件的讲解网址：https://segmentfault.com/a/1190000010527064
阻止事件冒泡：

方法一
<button @click.stop="search">XX</button>
方法二
<button @click="search($event)">XX</button>
<script>
let vm = new Vue({
	el:'#app',
	data:{},
	methods:{
		search(e){
			// 使用stopPropagation
			e.stopPropagation();
		}
	}
})
</script>

插槽：slot

<body>
<div id="components-demo">
    <h1>test</h1>
    <weic>
        <template v-slot:header>
            <h1>weic1 ---- Here header</h1>
        </template>
    </weic>

    <weic>
        <template v-slot:header>
            <h1>weic2 ---- Here header</h1>
        </template>
        <template v-slot:main>
            <h1>weic2 ---- Here main</h1>
        </template>
    </weic>
</div>
<script>
	let vm = new Vue({
     el:'#components-demo',
       data:{
           count1:1
       },
       // 自定义组件
       components:{
           weic:{
               // data: function () {
               //     return {
               //         count: 0
               //     }
               // },
               template:
                   `
                   <div class="container">
                       <header>
                           <slot name="header"></slot>
                       </header>
                       <main>
                           <slot name="main"></slot>
                       </main>
                   </div>
                   `
           }
       }
   });
</script>

</body>

可以使用<template></template>包裹所有标签，无实际意义
子组件向父组件传值：

子组件：
<button @click="$emit('close')">按钮</button>
父组件：
<div @close="XXX"></div>

自定义指令，官网示例：https://cn.vuejs.org/v2/guide/custom-directive.html

<body>
    <div id="app">
        <!--刷新页面自动获取焦点-->
        <input v-focus>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            directives: {
                focus: {
                    // 当被绑定的元素插入到 DOM 中时……
                    inserted: function (el) {
                        console.log(el);
                        // 聚焦元素
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>

qq_42830557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础记录

Vue 数据驱动，MVVM框架浏览器可以安装Vue DevtoolsCDN 内容分发网络v-if 与v-show区别使用v-show，dom结构存在，只是style属性设置了display；使用v-if，dom结构不存在this：当前对象的引用。Vue new 的实例方法中不能在箭头函数中使用this，会指向windows。所以一般都会写成function(){}格式vue实例中computed对象里是要计算的一些方法，但是方法名不能和data中的名字重复；comp..
复制链接

扫一扫