vue基础指令

 

什么是Vue.js？

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

导包

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

导包后，就可以通过用 Vue 函数创建一个新的 Vue 实例，

<div id="app">
    <p>{{msg}}</p>
</div>

<script>
    var vm = new Vue({
        el : '#app',
        data : {
            msg :'123'
        }
    })
</script>    

修改 app.msg 的值，html中的值将同步更新。

这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

但只有当实例被创建时 data 中存在的属性才是响应式的，在添加属性时，不会触发任何视图的更新。

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

我们的学习目的肯定不止于创建简单的 Vue 实例；而是用它去实现更加多变的功能需求；那我们需要进一步去学习 Vue-router 和 Vuex 以及 Vue-cli；

---

vue指令

每种指令的具体详解如下：

v-if 

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

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

当 v-if = true ，消息可显示。

继续在控制台输入 app3.seen = false，则会发现之前显示的消息消失了。

可以使用 v-else 指令来表示 v-if 的“else 块”：

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

---

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: '整个牛项目' }
    ]
  }
})

学习 JavaScript

学习 Vue

整个牛项目

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

用 v-for 指令遍历数组

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

• Parent-0-Foo
• Parent-1-Bar

用 v-for 来遍历对象

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10

在2.2.0+中，在组件中使用v-for时，key是必须的（保证数据的唯一性）

注意：

1、v-for循环的时候，key属性只能使用 number 或者 string

2、key在使用时，必须使用 v-bind 绑定的形式，指定 key 的值

---

属性绑定 v-bind（：）

v-bind

语法为： v-bind:title="message"

该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

我们还可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: { activeClass: 'active', errorClass: 'text-danger' }

渲染为：

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

---

处理用户输入 ：

v-on（@）事件监听

<div id="app">
  <!-- `reverseMessage` 是在下面定义的方法名 -->
  <button v-on:click="reverseMessage">reverseMessage</button>
</div>

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

注：

split() 方法用于把一个字符串分割成字符串数组。

String.split(" ") 执行的操作与Array.join(" ") 执行的操作是相反的。

reverse( )方法使字符翻转。

v-on的事件修饰符：

• .stop
• .prevent
• .capture
• .self：事件不是从内部元素触发的
• .once：点击事件将只会触发一次
• .passive：滚动事件的默认行为 (即滚动行为) 将会立即触发
• .exact ：允许你控制由精确的系统修饰符组合触发的事件。

---

v-model  双向绑定

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

v-model一般用于表单元素。

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

 在使用时要注意以下几点：

1、v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。因此需要通过 JavaScript 在组件的 data 选项中声明初始值。

　　v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

2、在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

自动将用户的输入值转为数值类型

<input v-model.number="age" type="number">

.trim

过滤首尾空白符

<input v-model.trim="msg">