Vue2简单入门

• Vue2简单入门
• Vue.js再入门
• Vue.js使用vue-router构建单页应用
• Vue.js状态管理工具Vuex快速上手

Vue.js 简介

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。

所以如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

Vue数据驱动的概念模型

概念模型

Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。

当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。

---

Hello World示例

html代码

<!--这是我们的View-->
 <div id="app">
   {{ message }}
 </div>

javascript代码

// 这是我们的Model 
var exampleData = {
  message: 'Hello World!'
} 
// 创建一个的 Vue 实例或 "ViewModel" 并给它赋值给变量vm
// 它连接 View 与 Model 
var vm=new Vue({ 
  el: '#app',
  data: exampleData,
  methods:{
change:function(){
 this.message="Hello Vue.js!"
}
   
  }
})

预览地址

在一个html文件中，我们直接可以通过script标签引入Vue.js，然后就可以在页面里写vue.js代码了。
上面示例中我们通过new Vue({})构建了一个Vue的实例，在示例中，可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。
不同的实例选项拥有不同的功能，常用选项有：
（1）el：表明我们的Vue需要操作哪一个元素下的区域，’#app’表示操作id为app的元素下区域。
（2）data：表示Vue 实例的数据对象，data 的属性能够响应数据的变化。
（3）computed：计算属性，详见官网：计算属性
（4）methods：方法对象，可以通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。
（5）components：组件对象
（6）生命周期钩子方法，如：created（实例已经创建完成之后被调用）、mounted（el
被新创建的 vm.$el
替换，并挂载到实例上去之后调用该钩子）

Vue.js生命周期钩子方法

Vue.js常用指令

在Vue项目的开发中，我们使用的最多的应该就属Vue的指令了。通过Vue提供的以v-开头的常用指令，我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下代码中常用指令的简单介绍：

<div id="app">
  <p v-text="p1"></p>
  <p v-html="p2"></p>
  <p v-if="p3">p3</p>
  <p v-else>p4</p>
  <p v-show="p5">p5</p>
  <p v-for="p in p6"></p>
  <p v-on:click="showP3">showP3</p>
  <p v-bind:title="p7">{{p7}}</p>
  <input v-model="p8" />
  <p v-cloak>{{p9}}</p>
 </div>

（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法

//可以使用插值'{{}}'替代
<p>{{p1}}</p>

（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法
（3）v-if: 用于根据表达式的值的真假条件渲染元素，如果示例代码中P3为false则不会渲染p3标签，语法如下:

v-if="expression"

（4）v-show: 用于根据表达式的值的真假条件�显示隐藏元素，切换元素的 display CSS 属性
（5）v-else:必须紧跟在 v-if或 v-show元素的后面——否则它不能被识别。
（6）v-for: 用于遍历数据渲染元素或模板，如示例代码中P6为[1,2,3]则会渲染3个P标签，内容依次为1，2，3

//可以为数组索引指定别名（或者用于对象的键）：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

（7）v-on: 用于在元素上绑定事件，示例代码中在P标签上绑定了showP3的点击事件

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

（8）v-bind:用于在元素上的绑定属性

<!-- 绑定一个属性 -->
![](imageSrc)

<!-- 缩写 -->
![](imageSrc)

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

（9）v-model:用于在表单控件元素上创建双向数据绑定
示例

（10）其他指令：
v-cloak（这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。）、
v-once（只渲染元素和组件一次）

指令综合示例

---

Vue.js组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

全局组件注册

全局组件可以在任意Vue实例下使用

/** 全局组件注册方式 */

/** js代码 ==========*/
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({
  "template":"<div>This is a component! data:{{data}}</div>"
}))
// 或者
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component',{
  "template":"<div>This is a component! data:{{data}}</div>"
})

// 实例
new Vue({
  el:"#app",
})
new Vue({
  el:"#app2",
})

/** html代码 ==========*/
<div id="app">
  <my-component></my-component>  //输出"<div>This is a component! </div>
</div>

<div id="app2">
  <my-component></my-component>  //输出"<div>This is a component! </div>
</div>

局部组件注册

如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。

/** 局部组件注册方式 */

/** js代码 */
// 注册组件，传入一个扩展过的构造器
var MyComponent=Vue.extend({
  "template":"<div>This is a component! data:{{data}}</div>"
});
// 或者
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
var MyComponent={
  "template":"<div>This is a component! data:{{data}}</div>"
};

// 实例
new Vue({
  el:"#app",
  components:{"my-component":MyComponent  }//MyComponent只能在#app实例下使用，在其他实例或者组件内不会渲染
})

/** html代码 */
<div id="app">
  <my-component></my-component>  //输出"<div>This is a component!</div>
</div>

组件间的数据传递

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。

使用 props 选项接收父组件数据

---

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 [props 选项]声明 “prop”：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

然后向它传入一个普通字符串：

<child message="hello!"></child>
//或者作用v-bind绑定动态props 
<child :message="message"></child>

结果

使用自定义事件修改父组件数据

---

-使用v-on指令绑定自定义事件

每个 Vue 实例都实现了事件接口(Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
下面是一个例子：

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
        counter: 0
    }
  },
  methods: {
      increment: function () {
      this.counter += 1
      this.$emit('increment')  //触发v-on绑定的increment事件
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
  total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
});

示例

非父子组件通信

---

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})

结语

本文简单介绍了Vue.js的MVVM模型和它的双向绑定机制，然后介绍了Vue.js常用的选项及指令的用法，接着了解了在Vue.js里面全局和局部组件的创建方式以及父子组件和非父子组件之间的数据通讯。通过全篇介绍对Vue.js用法有了大概了解。