VUE2.X 开发 处理用户输入

Vue.js教程 04/04 阅读 13 views次 人气 0
摘要:

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。


代码案例:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta charset="utf-8">
    <title>VUE2.X学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
    <script>
var app5 = new Vue({
  el: '#app-5',
  data: {
     message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
       this.message = this.message.split('').reverse().join('')
    }
  }
})
    </script>
</body>
</html>

Vue 应用交互,可以用v-on指令添加一个事件监听器。


代码案例:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta charset="utf-8">
    <title>VUE2.X学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
    <script>
var app6 = new Vue({
el: '#app-6',
  data: {
   message: 'Hello Vue!'
  }
})
    </script>
</body>
</html>

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

评论

表情

分享到: