Vue快速入门（一）

作者: 阿九是只大胖喵 | 来源:发表于2017-12-18 15:47 被阅读0次

HTML学习之Vue.js
Vue基础知识总结
vue入门教程
Vue快速入门（一）
TS 入门和Vue实践
Vue快速入门(一)《快乐Vue》
Vue 快速入门
Vue快速入门
vue快速入门
快速入门Vue

引入Vue
cdn方式
<script src="https://unpkg.com/vue"></script>

本地文件加载方式
<script src="./vue.js"></script>

实例化Vue对象
在script标签中或者引入JavaScript文件实例化Vue对象。

<body>
  <!-- root是根容器 -->
  <div id="root">
    <h1>{{ name }}</h1>
  </div>
</body>

// 实例化Vue对象
new Vue({
  el: '#root',
  data: {
    name: 'vue instance'
  }
})

/**
 * el: element 需要将试图挂载的元素，一定是HTML中的根容器元素
 * data: 用于当前数据的存储，以键值对的形式存储，在HTML中可以直接使用 {{ key }}的方式获取值
 * 
 */

Vue方法
Vue实例中使用methods定义方法，可以在{{ }}中直接使用方法，且可以像正常函数那样传递参数。

在Vue的方法中，使用Vue实例中的data数据，可以以this.xxx的形式获取。

<body>
  <!-- root是根容器 -->
  <div id="root">
    <h1>{{ greet(new Date()) }}</h1>
    <p>Name: {{ name }}</p>
    <p>Job: {{ job }}</p>
  </div>
</body>

new Vue({
  el: '#root',
  data: {
    name: 'vue instance',
    job: 'web development'
  },
  methods: {
    greet(time) {
      return `Hello Vue ${time} ${this.name}`
    }
  }
})

属性绑定
如何给元素绑定值？
在Vue实例的data中新增一个数据：website: 'http://www.baidu.com'。
在HTML中：<a href={{website}}>baidu</a>，这样是无法将数据绑定到属性上的。所以要使用Vue的v-bind指令。

    <!-- v-bind -->
    <a v-bind:href="website">baidu</a>
    <!-- v-bind简写方式 -->
    <a :href="website">baidu</a>
    <input type="text" :value="name">

事件：点击、双击、鼠标

  <!-- root是根容器 -->
  <div id="root">
    <h1>Events</h1>

    <!-- v-on:的形式绑定事件 -->
    <button v-on:click="add(1)">涨一岁</button>
    <!-- @xxx v-on:的简写形式 -->
    <button @click="subtract(1)">减一岁</button>
    <button v-on:dblclick="add(10)">加十岁</button>
    <button @dblclick="subtract(10)">减十岁</button>
    <p>My age is {{ age }}</p>

    <div id="canvas" v-on:mousemove="updateXY($event)"></div>
    {{ x }} - {{ y }}
  </div>

// 实例化Vue对象
new Vue({
  el: '#root',
  data: {
    age: 25,
    x: 0,
    y: 0
  },
  methods: {
    add(increment) {
      this.age = this.age + increment
    },
    subtract(decrement) {
      this.age = this.age - decrement
    },
    updateXY(e) {
      this.x = e.offsetX
      this.y = e.offsetY
    }
  }
})

事件修饰符

    <!-- once 只执行一次 -->
    <button v-on:click.once="add(1)">涨一岁</button>
    <!-- prevent: 阻止默认事件 -->
    <button @click.prevent="subtract(1)">减一岁</button>
    <!-- stop: 阻止冒泡 -->
    <button v-on:dblclick.stop="add(10)">加十岁</button>
    <!-- self: 只在该元素本身上才能触发 -->
    <button @dblclick.self="subtract(10)">减十岁</button>
    <p>My age is {{ age }}</p>

键盘事件及其修饰符

<body>
  <!-- root是根容器 -->
  <div id="root">
    <h1>键盘 Events</h1>
    <label for="">姓名: </label>
    <input type="text" v-on:keyup="logName($event)">
    <label for="">年龄: </label>
    <!-- enter修饰符，当按回车时才触发 -->
    <input type="text" v-on:keyup.enter="logAge($event)">
  </div>
</body>

// 实例化Vue对象
new Vue({
  el: '#root',
  data: {
    
  },
  methods: {
    logName(event) {
      console.log(event.target.value)
    },
    logAge(event) {
      console.log(event.target.value)
    }
  }
})

github源码地址