Vue 基础

最新推荐文章于 2024-07-09 15:23:35 发布

stanwuc

最新推荐文章于 2024-07-09 15:23:35 发布

阅读量218

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/stanwuc/article/details/95179630

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一、概述

1、什么是 vue

Vue是一套构建用户界面的渐进式框架
Vue是一个构建 数据驱动的 web 界面 的库，其目标是通过简单的 API 实现 响应的数据绑定 和 组合的视图组件
Vue只聚焦于视图层，更像是一个 视图模版引擎，但是也能作为一个框架使用，提供了完备的支持

2、vue 的特点

声明式渲染：直接告诉框架你需要什么，具体怎么渲染由框架的底层来实现，而命令式的话就是需要一步一步指导如何实现；
渐进式：简单理解就是比较自由，代码的侵入性比较小；
响应式：数据发生变化，视图自动更新；
可复用的组件系统：方便构建完整的大型应用；

3、hello-vue

<body>
<p id="p1">{{message}}</p>

<script src="vue.js"></script>
<script>
    var v1 = new Vue({
        el:"#p1",
        data:{
            message:"hello_vue!!"
        },
        created:function () {
            console.log("new vue created");
        }
    })
</script>

vue官方教程链接

二、Vue实例

1、创建一个 vue 实例

创建一个 vue 实例：var vm = new Vue({.....})
vue组件的本质是一个 vue的实例，一个 todo 应用的组件树可以是这样的：

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

2、数据与方法

vue 实例 data 对象的属性改变会触发视图的更新；
响应式只对创建实例时候加入的 data 属性有效，对后面添加的属性是无效的；
对于后面可能用到属性但又不确定初始值的，最好创建实例的时候加入到data属性，赋值为空即可；
Object.freeze()会阻止修改现有的属性，也意味着响应系统无法再追踪变化；

var obj = {
  foo: 'bar'
}
Object.freeze(obj)
new Vue({
  el: '#app',
  data: obj
})

vue 内置的实例属性和方法用 $ 符号标记；

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

3、生命周期钩子

每个 Vue 实例在被创建时都要经过设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等一系列的初始化过程；
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，简单来说这个钩子就是在vue实例的生命周期到某一阶段的时候会触发一个函数；
常见的钩子有：created、mounted、updated、destroyed，具体的示例如下：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

4、生命周期图示

参考：生命周期测试

在这里插入图片描述

三、模版语法

1、插值

插入文本：使用 v-once 指令后只能执行一次性插值，后面这个值就不会变化了

<span>Message: {{ msg }}</span>
<span v-once>这个将不会改变: {{ msg }}</span>

插入html：直接使用双重的花括号会把 html 直接当普通文本解析，要用 v-html 才能正确识别

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

插入属性：实现了一个动态的特性，将特性的值和data属性进行了绑定

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

使用简单 js 表达式
- 简单的意思就是最好只用来作计算，使用三元操作之类
- 同时只能是一个表达式
- 还有就是表达式中不要访问自定义全局变量

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

2、指令

指令简介

指令 (Directives) 是带有 v- 前缀的特殊属性
指令特性的值预期是单个 JS 表达式 (v-for 是例外情况)
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

指令参数

v-bind：href 这个冒号后面的href 就是指令参数，用于指定指令的作用对象
v-bind：[attrName] 可以实现动态参数，这个参数的表达式不建议写的太复杂，复杂的话直接用计算属性更好，中括号里的字符串表达式最好都小写

指令修饰符：

其作用就是指定以某种特殊的方式进行绑定，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

指令缩写：

v-bind缩写就是只留一个冒号即可，v-on使用@符号代替

<a :href="url">...</a>
<a @click="doSomething">...</a>

四、计算属性与侦听器

1、计算属性`computed`

什么时候用计算属性：模板内的表达式是用于简单运算的，对于任何复杂逻辑，应当使用计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<javascript>
	var vm = new Vue({
	  el: '#example',
	  data: {
	    message: 'Hello'
	  },
	  computed: {
	    // 计算属性的 getter
	    reversedMessage: function () {
	      // `this` 指向 vm 实例
	      return this.message.split('').reverse().join('')
	    }
	  }
	})
</javascript>

计算属性和方法methods：二者的区别在于计算属性是有缓存的，源数据没有发生改变的情况下不会再次进行计算，直接使用缓存，但是 method 每次使用都会调用方法逻辑，methods使用的时候一定要加（）进行调用

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

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
computed: {
  now: function () {
    return Date.now()
  }
}

计算属性和侦听属性watch：某些情况侦听属性会比计算属性有更加繁杂的代码和逻辑

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算属性的 setter：计算属性默认只有 getter ，需要时也可以提供一个 setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

2、侦听器`watch`

侦听器 watch 选项提供了一个更通用的方法，来响应数据的变化
当需要在数据变化时执行异步或开销较大的操作时，使用 watch 比较好，示例代码

五、class 和 style 绑定

1、绑定 class

说明：二者的本质都是用 v-bind 绑定属性，不过鉴于特殊性，进行了增强，表达式结果的类型除了字符串之外，还可以是对象或数组
对象语法：和原有的 class 可以共存；绑定的数据对象不一定非要写在模板里，可以在 data 里定义或者用计算属性返回一个数据对象

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

data: {
  isActive: true,
  hasError: false
}

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

数组语法：数组语法支持三元表达式，支持对象语法嵌套

<div v-bind:class="[activeClass, errorClass]"></div>
----------------------------------------------------
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

用在组件上：模版中的 class 和元素中的 class 不会相互覆盖

<my-component class="baz boo"></my-component>
<my-component v-bind:class="{ active: isActive }"></my-component>
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

2、绑定 style

对象语法：基本来说和 class 是差不多的用法

data: {
  activeColor: 'red',
  fontSize: 30
}
------------
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
------------------------------
<div v-bind:style="styleObject"></div>

数组语法：其中的 baseStyles 等是一个样式的对象
<div v-bind:style="[baseStyles, overridingStyles]"></div>
自动添加前缀：当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀
多重值：从 2.3.0 版本起可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex
html <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

六、条件渲染

1、v-if

指令表达式返回值为 truthy 时，该元素会进行渲染，否则不会渲染；
v-if 可以和 v-else-if v-else 合用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

在元素上使用 v-if 条件渲染分组，这里的template 事件上是作为一个容器来使用

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

用 key 管理可复用的元素

什么时候会有元素的复用：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，如下的实例中 label 和 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>

怎么避免 Vue 对元素的复用：只需给不想复用的元素添加一个具有唯一值的 key 属性即可，这里的label没有添加 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>

2、v-show

v-show 的本质就是修改元素的 display 属性来决定这个元素是否显示；

v-show 和 v-if 比较

v-if 是真正的条件渲染，不满足条件的话是不会渲染元素的；
v-if具有惰性，初始条件为假的话就不会渲染条件块，知道第一次为真的时候才会渲染；
v-show 不管初始条件是什么都会进行渲染；v-show 不支持 template；
最后的总结：切换多的话用 v-show，切换不频繁的话用 v-if 可以减少初始渲染；

3、v-if 和 v-for 一同使用

不推荐二者同时使用，但一定要用的话需要注意 v-for 的优先级是高于 v-if 的（用在同一个元素上的时候）；
有条件地跳过循环的执行，那么可以将 v-if 置于外层元素或 <template>上；

七、列表渲染

1、用 v-for迭代数组

在 v-for 块中，我们拥有对父作用域属性的完全访问权限
v-for 还支持一个可选的第二个参数为当前项的索引

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

2、用 v-for迭代对象（属性）

这里可以有三个参数，分别是：索引、属性名、属性值；在遍历对象时，是按 Object.keys() 的结果遍历；

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

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

3、v-for 元素复用

和 v-if 类似，用 v-for 来更新已渲染过的列表时也会存在就地复用的情况；
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出；说白了最好不要让他复用，可能出现问题；
阻止默认复用的方法和 v-if 一样还是设置一个唯一的key值，这个key最好就是数值或者字符串，不要其他花样

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

4、数组更新检测

v-for迭代数组生成列表，数组发生变化的时候，vue会自动更新列表的状态
变异方法（会改变原来的数组）：pop、push、shift、unshift、splice（删除）、sort、reverse；
非变异方法：filter(), concat() 和 slice()截取不会改变原始数组，总是返回一个新数组；
当使用非变异方法时，可以用新数组替换旧数组，这样的替换是非常高效的，不会影响性能；

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

注意事项

以下的两种操作 vue 是无法检测数组的变动的

vm.items[indexOfItem] = newValue; 
vm.items.length = newLength;

怎么让vue 能够检查到数组的这两种变动呢？第一种给指定索引项设置值可以采取如下方法

Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
// 数组 splice 方法第一个参数是开始索引，第二个参数是删除个数，后面的参数都是在删除位置添加的元素
vm.items.splice(indexOfItem, 1, newValue)
// 数组的长度可以 splice 方法
vm.items.splice(newLength)

5、对象更改检测

局限性：对于已经创建的实例，Vue 不能动态添加根级别的响应式属性

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

添加单个响应式属性：

Vue.set(vm.obj, 'age', 27);
vm.$set(vm.obj, 'age', 27);

添加多个响应式属性：将后面两个对象的属性值复制到第一个空对象返回

vm.obj = Object.assign({}, vm.obj, {
  age: 27,
  favoriteColor: 'Vue Green'
})

6、数组显示过滤排序结果

想要显示一个数组的过滤或排序副本，而不改变原始数据，可以创建返回过滤或排序数组的计算属性

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下 (在嵌套 v-for 循环中) ，可以使用一个 method 方法来实现同样的功能
这里的numbers的传递是这样的：data 中的 numbers 传递到 v-for 中的 numbers，最后到函数的参数中

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

7、v-for 其他使用细节

一段取值范围的 v-for

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

v-for 作用于 template 元素：template 这里就是作为一个容器来用的

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

8、一个组件的 v-for

组件可以像普通元素一样使用 v-for，为了保证高版本的兼容性，使用时最好带上 key 属性，保证不会出现元素复用的情况；
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域，为了把迭代数据传递到组件里，我们要用到props
这里的 title属性从数组的元素中到组件的属性中（pros），最后再到组件中引用这个属性的地方，有点类似函数传参

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

八、事件处理

1、事件监听

没有参数的时候指令表达式可以没有括号；
指令表达式调用方法可以传递一个 $event 对象来访问原生的事件对象；

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

2、事件修饰符

事件修饰符的作用就是处理默认行为、事件冒泡等细节，让方法里只有纯粹的数据逻辑，而不用在意这些细节；
常见的修饰符：stop、prevent、capture、self、once、passive

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 添加事件监听器时使用事件捕获模式，capture是设置在父元素的 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数，不是由冒泡或捕获触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发而不会等待 `onScroll` 完成--> 
<div v-on:scroll.passive="onScroll">...</div>

<!-- 使用修饰符时，顺序很重要，相应的代码会以同样的顺序产生 --> 
<div v-on:click.prevent.self> <!--会阻止所有的点击，-->
<div v-on:click.self.prevent> <!--只会阻止对元素自身的点击-->

不要把 .passive 和 .prevent 一起使用，二者是矛盾的，passive有不阻止默认行为的意思

3、按键修饰符

监听键盘事件时需要进行按键检测，不推荐用 keyCode 来确定按键，最好的方法是使用按键别名（按键修饰符）
常用的按键修饰符：.enter .tab .delete .esc .space .up .down .left .right（当然按键码目前还是支持的）

<!-- 按Enter时调用 vm.submit() -->
<input v-on:keyup.enter="submit">
<!-- keyCode 13也是回车键-->
<input v-on:keyup.13="submit">

ctrl、alt、shift、meta（win）这几个按键修饰符通常用来实现组合快捷键

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

exact修饰符可以精确控制按键组合触发的事件，减少误操作的可能

<!-- 即使有其他按键被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符：left、right、middle
vue 支持自定义按键的别名：Vue.config.keyCodes.f1 = 112

九、表单输入绑定（v-model）

1、v-model 的基本介绍

v-model 指令在表单元素上创建双向数据绑定，根据控件类型自动选取正确的方法来更新元素；
初始渲染的时候，v-model 会忽略所有表单元素的 value、checked、selected 初始值，使用vue实例中的数据替代；
后面表单元素的状态发生变化的时候，v-model 会以元素的 value 等值来更新实例的相关属性；

2、表单元素详解

文本（text）和多行文本（textarea）

text 和 textarea 元素将 v-model 表达式和 value 属性绑定，使用 input 事件来触发数据更新
textarea 使用文本插值无效，只能使用 v-model

<h2>单行和多行文本</h2>
<div id="text1">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <textarea v-model="message1" placeholder="add multiple lines"></textarea><br>
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message1 }}</p>
</div>

复选框（checkbox）

单复选框绑定到布尔值，多复选框绑定到数组

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
----------------
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
----------
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

单选按钮（radio）

指令表达式还是和 value 绑定了

选择框（select）

多选还是绑定到一个数组，为提高IOS的兼容性可以增加一个禁用的空值选项

<h2>select选择框</h2>
<div id="example-5">
    <h6>单选</h6>
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span><br>
    <h6>多选</h6>
    <select v-model="selecteds" multiple>
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected many: {{ selecteds }}</span>
</div>

3、`v-model`的三个修饰符

lazy（数据自动更新的触发事件由input变成了change）
number（将输入值转换为数值类型，无法转换的返回原始类型）
trim（自动过滤用户输入首尾的空白）

十、组件基础(自定义元素&属性&事件)

1、组件示例

组件的本质是可复用的 Vue 实例，且带有一个名字；
在 new Vue 创建的 Vue 根实例中，可以把这个组件作为自定义元素来使用；

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

// 定义一个名为 button-counter 的新组件
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' })

2、组件复用 & 组织

复用

定义的组件可以无数次的复用，每用一次都会有一个新的实例被创建
data里直接提供一个对象，这个对象会被所有的组件实例共享
一个组件的 data 选项必须是一个函数，每个实例可以维护一份被返回对象的独立的拷贝，说白了函数返回的话就能互不影响

data: {
  count: 0
}

data: function () {
  return {
    count: 0
  }
}

组织&注册

一个页面用 vue 来构建的话可以分割成很多的组件，这些组件通过相应的层次构成组件树；
组件的注册分为全局注册和局部注册，vue.component 的方法是全局注册的方法；
局部注册的方法如下，有时候使用局部注册能够提高效率和性能

<h2>局部注册测试</h2>
<div id="jubu">
    <jubu-com></jubu-com>
</div>

var jubucom = {
        data:function () {
            return{
                num:0
            }
        },
        template:`
            <button @click="change">我被点击了 {{num}} 次</button>
        `,
        methods:{
            change:function () {
                this.num += 1;
            }
        }
    };

    var jubu = new Vue({
       el:"#jubu",
       components:{
           'jubu-com':jubucom
       }
    });

3、通过 props 向子组件传递数据

这种向子组件传递数据的方法类似于方法传参；
还可以通过使用 v-bind 来动态绑定prop；

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

关于 $emit和props

emit 是用来触发父组件的自定义事件的，是子组件向父组件发送消息进行通讯
props 是组件一个接受外部参数的入口，以方便外部的参数能够组件的内部使用

4、单个根元素

每个组件必须只有一个根元素，通常的做法就是使用一个容器（div）将所有的元素包裹起来；
props里的属性不宜定义得过多，会造成代码的可读性变差，通常使用一个对象将这些属性包装起来使用；

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

js 中多行字符串的实现方法：直接使用+号拼接；使用续行符 \；使用反引号（`）

5、监听子组件事件

基础使用：父组件定义一个自定义事件，子组件通过 $emit 方法触发父组件的自定义事件

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

组件使用 v-model：v-model的基本原理就是将 vue示例的属性和input value属性绑定，通过input（change）事件来触发数据更新

<custom-input v-model="searchText"></custom-input>

Vue.component('custom-input', {
      props: ['value'],
      template:
  '<input\
    v-bind:value="value"\
    v-on:input="$emit(\'input\', $event.target.value)">'
  });
  new Vue({el:'#input2',
      data:{
          searchText:''
      },
      methods:{
          input:function (val) {
              this.searchText = val;
          }
      }
  });

6、插槽分发内容 & 动态组件

slot 分发内容

slot 给 alert-box 组件内的文本预留了插入的空间

<div id="slot2">
    <alert-box>
        Something bad happened.
    </alert-box>
</div>

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

动态组件：

有的时候，在不同组件之间进行动态切换是非常有用的，比如利用多标签来切换页面
可以通过 Vue 的元素加一个特殊的 is 特性来实现动态组件

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

Vue.component('tab-home', {
template: '<div>Home component</div>'
});
Vue.component('tab-posts', {
    template: '<div>Posts component</div>'
});
Vue.component('tab-archive', {
    template: '<div>Archive component</div>'
});

new Vue({
    el: '#dynamic-component-demo',
    data: {
        currentTab: 'Home',
        tabs: ['Home', 'Posts', 'Archive']
    },
    computed: {
        currentTabComponent: function () {
            return 'tab-' + this.currentTab.toLowerCase()
        }
    }
});

7、解析 DOM 模板时的注意事项

<ul>、<ol>、<table> 、<select>等元素对于哪些元素可以出现在其内部是有严格限制的
实例中上面的会渲染出错，下面的利用 is 才是正解

<table>
  <blog-post-row></blog-post-row>
</table>

<table>
  <tr is="blog-post-row"></tr>
</table>

stanwuc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue 基础

一、概述

1、什么是 vue

2、vue 的特点

3、hello-vue

二、Vue实例

1、创建一个 vue 实例

2、数据与方法

3、生命周期钩子

4、生命周期图示

三、模版语法

1、插值

2、指令

指令简介

指令参数

指令修饰符：

指令缩写：

四、计算属性与侦听器

1、计算属性computed

2、侦听器watch

五、class 和 style 绑定

1、绑定 class

2、绑定 style

六、条件渲染

1、v-if

用 key 管理可复用的元素

2、v-show

v-show 和 v-if 比较

3、v-if 和 v-for 一同使用

七、列表渲染

1、用 v-for迭代数组

2、用 v-for迭代对象（属性）

3、v-for 元素复用

4、数组更新检测

注意事项

5、对象更改检测

6、数组显示过滤排序结果

7、v-for 其他使用细节

8、一个组件的 v-for

八、事件处理

1、事件监听

2、事件修饰符

3、按键修饰符

九、表单输入绑定（v-model）

1、v-model 的基本介绍

2、表单元素详解

文本（text）和多行文本（textarea）

复选框（checkbox）

单选按钮（radio）

选择框（select）

3、v-model的三个修饰符

十、组件基础(自定义元素&属性&事件)

1、组件示例

2、组件复用 & 组织

复用

组织&注册

3、通过 props 向子组件传递数据

4、单个根元素

5、监听子组件事件

6、插槽分发内容 & 动态组件

slot 分发内容

动态组件：

7、解析 DOM 模板时的注意事项

1、计算属性`computed`

2、侦听器`watch`

3、`v-model`的三个修饰符