初学vue——part7

Rebbac — Mon, 11 May 2020 19:55:16 +0800

组件基础基础组件示例 // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '' }) 组件可以进行任意次数的复用一个

初学vue——part6

Rebbac — Mon, 20 Apr 2020 17:29:19 +0800

表单输入绑定指令v-model：你可以用 v-model 指令在表单、

及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 在内部为不同的输入元素使用不同的属...
</article>
<article>
<h1>初学VUE——part5</h1>
<p>Rebbac — Mon, 13 Apr 2020 18:01:08 +0800</p>
事件处理
事件监听指令：v-on
v-on要接收一个需要调用的方法名称。
例子：
<div id="example-2">
  
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
 ...
</article>
<article>
<h1>初学vue——part4</h1>
<p>Rebbac — Mon, 06 Apr 2020 17:38:38 +0800</p>
条件渲染

指令
作用

v-if
用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染

v-else
可以使用 v-else 指令来表示 v-if 的“else 块”

v-else-if
充当 v-if 的“else-if 块”，可以连续使用

用key管理可复用元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这...
</article>
<article>
<h1>初学Vue——part3</h1>
<p>Rebbac — Mon, 30 Mar 2020 17:15:28 +0800</p>
计算属性和侦听器
计算属性
内置缓存，即计算所依赖的值未发生改变则不会重新计算
而使用method方法没有computed计算属性高效，因为计算属性有缓存
基础例子：
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    rever...
</article>
<article>
<h1>初学Vue——part 2</h1>
<p>Rebbac — Mon, 23 Mar 2020 21:16:10 +0800</p>
实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会
生命周期图示

生命周期钩子在不同的阶段被使调用，如beforeCreate、created、beforeMount、mounted、befo...
</article>
<article>
<h1>初学Vue——part 1</h1>
<p>Rebbac — Mon, 16 Mar 2020 17:33:18 +0800</p>
Vue采用的开发模式
MVVM模式：面向数据编程  方便操作数据，简化了dom的操作，会减少代码量。

与MVP模式比较：MVP常用于JQuery，面向dom进行开发

Vue中的常见指令

指令
含义

v-bind
绑定

v-if
用于判断

v-for
绑定数组渲染列表

v-on
事件监听

v-model
表单输入与应用状态的双向绑定

指令简写
1.v-on可用...
</article>
</main></body></html>

Rebbac的博客

初学vue——part7

初学vue——part6