Vue基础笔记

最新推荐文章于 2024-06-01 15:46:07 发布

杜杜杜俊杰

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量180

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39590098/article/details/104025295

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

组件基础

组件只能由单个根元素组成，即所有元素都要包在一个根元素内

‘<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>’

而下面这样写会报错！
‘  <h3>{{ title }}</h3>
   <div v-html="content"></div>’

基本示例

// HTML
<div id="components-demo">
  <button-counter></button-counter>
</div>

//JS
// 定义一个名为 button-counter 的新组件
//该形式是组件全局注册，Vue实例在组件注册后创建的都可以使用到该组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">
  					You clicked me {{ count }} times.
  			</button>'
})
new Vue({
 	el: '#components-demo' 
 })

组件的复用

//HTML
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
每个组件都是一个新实例，都可以单独维护各自的返回的对象，即互不干扰

组件与Vue实例区别

区别一：组件没有 el 属性，别的都有
区别二：组件的 data 需要写成函数的形式

计算属性

用途：对于复杂逻辑，应该使用计算属性！
使用形式：在computed：{ }中加入处理逻辑的方法

计算属性(computed带有缓存) 与方法(methods) 的对比

首先将同一函数定义成方法或者计算属性效果都是一样的！
区别：
- 计算属性(写在computed:{}中)是基于它们的响应式依赖进行缓存的。（即对vue实例中的属性存在依赖，当依赖的属性改变时，计算属性才会重新求值）
- 而方法(写在methods：{}中)只要访问就会执行一次，性能消耗较大。

侦听器(watch : {})

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

el(属性)：挂载点

el是用来设置Vue实例挂载（管理）的元素
Vue会管理el选项命中的元素及内部的后代元素
可以使用其他的选择器，但是建议使用ID选择器（一般来说ID唯一）
可以使用其他的双标签，不能使用在html和body标签上

示例：el : “.app” （. + class类名）
或 el : “#app” （# + ID名）
或 el : “div” (标签名)

v-on指令

v-on指令的作用是：为元素绑定事件(即方法)
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

示例：v-on:dblclick/click=“方法名”
或 @:dblclick/click="方法名"

v-on指令补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
@keyup.enter可以限制触发的按键为回车
- 除.enter之外，还有@keyup.space（按空格键触发）
- @keyup.键值 (按对应的键触发) 如：@keyup.13
事件修饰符除了keyup，还有多种
- @input
  - 适用于实时查询，每输入一个字符都会触发该事件。
- @keyup.enter
  - 该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用，而 @keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。
- @blur（失去焦点）
  - 要满足输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。
- @change
  - 该事件和enter事件相似，在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。

<div id="app">
        <input type="button" value="点击" v-on:click="doIt('双击',666)">
        <!-- 监听键盘回车时触发事件 -->>
        <input type="text" @keyup.enter="doSomething">
    </div>

    <script>
        var vm = new Vue({
            el : "#app",
            methods : {
                doIt : function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                },
                doSomething : function(){
                    alert("文本框按下回车，才会出现弹框！");
                }
            }
        });
    </script>

v-show指令

v-show指令的作用是：根据真假(true/false)切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

v-if指令

v-show指令的作用是：根据真假(true/false)切换元素的显示状态
本质是通过操纵dom元素（删除/添加）来切换显示状态
表达式的值为true：元素存在于dom树中；值为false：从dom树中移除 【与v-show的区别】
频繁的切换使用：v-show ；反之使用v-if，因为前者的切换消耗小

v-for指令

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in 数组名
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-bind指令 (注意与v-model区别)

v-bind指令的作用是：为元素绑定属性/文本/表达式/html
完整写法是：v-bind：属性名
简写的话可以直接省略v-bind，只保留：属性名
需要动态的增删class建议使用对象的方式

作用领域：

绑定文本

<p v-bind="message"></p>
<p>{{message}}</p>

绑定属性

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

绑定表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

绑定html

//必须是三个{}
<div>{{{ raw_html }}}</div>

示例如下：

    <div id="app">
        <img v-bind:src="imgSrc" alt="一张图片"  v-bind:title="imgTitle"
             v-bind:class="{active:isActive}" @click="toggleActive">
    </div>

    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                imgTitle : "樱木花道",
                isActive : false,
                imgSrc : "../images/p1.jpg"
            },
            methods : {
                toggleActive : function(){
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
    
    <style>
        .active{
            border: 5px solid red;
        }
    </style>

v-model指令（仅用于表单中，如input）

v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
在文本区域插值 ({{text}}) 并不会生效，应用 v-model 来代替。
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据 ←- - -对应- - -→ 表单元素的值（即获取和设置表单元素的值是：双向数据绑定的；无论修改哪一边，两边都会同步更新！）

v-text指令

v-text指令的作用是：设置标签的内容(textContent)
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部支持写表达式

v-html指令

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

示例如下：

    <div id="app">
        <p v-html="content">会被替换</p>
        <p v-text="content">会被替换</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                content: "<a href='http://www.baidu.com'>链接：v-html会解析标签，而v-text只会显示文本内容</a>",
            }
        });
    </script>

在这里插入图片描述

axios + vue

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源

部分内容参考：https://blog.csdn.net/zuoyiran520081/article/details/86611608
部分内容参考：https://segmentfault.com/a/1190000014813168

杜杜杜俊杰

关注

0
点赞
踩
0

收藏

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

el(属性)：挂载点el是用来设置Vue实例挂载（管理）的元素Vue会管理el选项命中的元素及内部的后代元素可以使用其他的选择器，但是建议使用ID选择器（一般来说ID唯一）可以使用其他的双标签，不能使用在html和body标签上示例：el : “.app” （. + class类名）或 el : “#app” （# + ID名）或 el : “div” (...
复制链接

扫一扫