Vue.js 踩坑

最新推荐文章于 2023-09-22 10:38:31 发布

yhy_

最新推荐文章于 2023-09-22 10:38:31 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/weixin_36222137/article/details/76578206

版权

//创建全局组件
Vue.component("my-header",{
    template:"<p>这是{{word}}head组件</p>",
    /无效data
     data:{
        word:"你好"
     }
});

new Vue({
    el:"#app",
    // template:"<p>hello{{word}} world</p>",
    // template:"hello{{word}} world",
    //有效data
    data:{
        word:"你好"
    },
    //局部组件
    components:{
          "my-name":{
              template:"<p>{{aa}}<my-child></my-child></p>",
              //无效data
              data：{
              aa:"1234"
              }
              //局部组件
              components:{
                  "my-child":{
                      template:"<p>这是{{bbb}}chid组件</p>",
                      /无效data
                       data：{
                      bbb:"321"
              }
                  }
              }
          }
    }
});

注意：1.局部组件和全局组件的data 里的数据放到{{}}没有效果。（要使用return的形式）
2.template替换的是整个标签，不是里面的内容。
3.全局组件和第一次创建的局部组件放到根节点才有效果，其他的嵌套第二次或第二次以上要这样放：

template:"<my-child></my-child>"

4.组件挂载的前提是必须要有根。

要确保在初始化根实例之前注册了组件

1.属性
{{}} 不能在 HTML 属性中使用，应使用 v-bind 指令。

<div v-bind:id="xxxxx"></div>

2. v-model
用在表单里的

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
1.多选和单选，获取的是value值 data 里面多选初始化是[] 单选是“ ”。下拉选择是option里面的值。

3.props
因为每个待办项渲染同样的文本，这看起来并不炫酷，我们应该能将数据从父作用域传到子组件
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供待办项对象
      待办项对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})

4.v-html
双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令

6.指令
指令（Directives）是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

7.修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

//submit 事件类型，  prevent事件修饰符  onSubmint：事件发生时调用的方法
<form v-on:submit.prevent="onSubmit"></form>

8.过滤器

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数总接受表达式的值 (之前的操作链的结果) 作为第一个参数。在这个例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

9.生命周期的钩子的里的this指向的是Vue实例

10.Class 与 Style 绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

对象

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

渲染为:

<div class="static active"></div>

或者直接绑定一个对象，渲染结果和上面一样

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

或者绑定一个计算属性

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

数组

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染结果：

<div class="active text-danger"></div>

总结：对象是是判断控制类名是否成立，数组是创建类名

11.复用元素

//使用了相同的模块，input输入的类容会保存下来
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

//如果不想复用就添加key，没添加的元素还是会被复用，只针对输入的
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

12.v-show
v-show 是简单地切换元素的 CSS 属性 display 。
v-show 不支持语法，也不支持 v-else。

13.v-for

在 v-for 块中，我们拥有对父作用域属性的完全访问权限

数组：

`<ul id="example-2">
  <li v-for="(item, index) in items">

  </li>
</ul>`

对象：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

组件：

Vue.component('todo-item', {
  template: '\
    <li>\
     {{aaa.text}}
    </li>\
  ',
  //第一步
  props: ['aaa']
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    item: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})

//当在组件中使用 v-for 时，key 现在是必须的。因为如果没有key 会**就地复用**

<my-component
  v-for="(item, index) in items"
  //第二步
  v-bind:aaa="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

创建的模块必须通过props来传数据进去

数组更新：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

不能更新：

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength

14.v-on

1.可以传JavaScript代码、

<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

2.可以传方法的名字

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

15.事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

16.键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112