Vue基础

安装vue

npm install vue

命令行工具(CLI)

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

使用

引入vue.js

一、声明和渲染

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

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

这里的数据和DOM已经被绑定在一起，所有的元素都是响应式的。打开浏览器的控制台，并修改app.message。你将看到上例相应地更新.

二、指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性,它们会在渲染的 DOM 上应用特殊的响应式行为

1.条件与循环

v-if

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

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

这里面将seen:true改为seen:false可以让现在你看到我了消失。

v-for

v-for 指令可以绑定数组的数据来渲染一个项目列表：

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

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

2、绑定事件监听

v-on

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

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

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

3、表单输入绑定

v-model

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

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

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

4、元素显示于隐藏

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

计算属性

在Vue实例中添加computed:{}
下面是一个简单计算属性例子-购物车:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="vue.js"></script>
        <div id="app">
            杯子:<input type="number" v-model="priceA" />
            数量:<input type="number" v-model="numberA" />
            小计:{{sumA}}
            <br />
            鞋子:<input type="number" v-model="priceB" />
            数量:<input type="number" v-model="numberB"/>
            小计:{{sumB}}
            <br />
            总价:{{Sum}}
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    priceA: 150,
                    numberA:3,
                    priceB: 1,
                    numberB: 1
                },
//                存放所有的计算属性，就是一个方法，不过使用的时候和属性一样
                computed: {
                    sumA() {
                        return this.priceA * this.numberA;
                    },
                    sumB() {
                        return this.priceB * this.numberB;
                    },
                    Sum() {
                        return this.sumA + this.sumB;
                    }
                },
                methods: {
                    
                }
            })
        </script>
    </body>
</html>

键值修饰符

<input @keyup.13="submit" value="回车提交" />
<input @keyup.enter="submit" value="回车提交" />
<input @keydown.tab.prevent="submit"  value="tab"/>
<input @keyup.delete="submit"  value="delte或退格"/>
<input@keyup.esc="submit" value="esc" />
<input@keyup.space="submit" value="space" />
<input@keyup.up="submit" value="up" />
<input@keyup.down="submit" value="down" />
<input@keyup.left="submit" value="left" />
<input@keyup.right="submit" value="right" />
<input@keydown.f1.prevent="submit" value="f1" />
<input@keyup.alt.67="submit" value="alt+c" />
<input@keyup.ctrl.67="submit" value="ctrl+c" />
<input@keyup.ctrl.86="submit" value="ctrl+v" />
<input@keydown.shift.67="submit" value="shift+c" />

在Vue实例中添加methods:{},用于写submit()事件。

自定义指令

聚焦input元素
当页面加载时，元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，你访问后还没点击任何内容，input 就获得了焦点。现在让我们完善这个指令：

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

也可以注册局部指令，组件中接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性：

<input v-focus>

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] Vue基础