Vue2（概述，常用指令及模板语法）

概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div class="app">
   {{ message }}
</div>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'hello world'
    }
  }
}
</script>

this.message = '修改的值' //这种方式可以直接修改message值

属性绑定

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

可以简写成

<div id="app-2">
  <span :title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

条件与循环

vue中v-if用法

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      seen:true
    }
  }
}
</script>

vue中v-for用法

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  }
}
</script>

实现事件处理的功能

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

v-on指令可以简化成@

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

双向绑定

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

组件注册

全局组件注册

在man.js中引入

import Vue from 'vue'
//导入 dialogBox 和Test 两个组件
import dialogBox from './components/InfoMessage/index.vue';
import Test from './components/MyTest.vue'
Vue.component('dialogBox', dialogBox)
Vue.component('my-test', Test)

使用全局注册组件

在其他组件中，直接以标签的形式，使用刚才注册的全局组件即可

在helloword.vue

<template>
 <h1>这是App根组件</h1>
 <hr/>
 <dialogBox></dialogBox>

<my-test></my-test>
 </template>

局部注册组件

引入需要注册的组件，通过 components节点，为当前的组件注册私有子组件

<template>
 <h1>这是App根组件</h1>

<my-swiper></my-swiper>

<my-search></my-search>

 </template>

 <script>
 import Search from './components/MySearch.vue'
 export default {
  ...
 components：{
 'my-search': Search,
 },
}
 </script>