Vue初学实例

介绍

      Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用，其核心只关注视图层，易于上手，方便与第三方库或现有项目整合。使得我们用起来更加高效、灵活。

一个简单的实例

       用一个简洁的模板语法来声明式的将数据渲染进DOM的系统，在Vue中，数据和DOM将会建立关联所有的东西都是响应式的。我们可以在控制台对其进行更改，可以看到相应的变化。

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


//js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello this is my blog!'
  }
})

 

指令（directive）

         指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性，预期值是单个JavaScript表达式（v-for除外）。它们会在渲染的 DOM 上应用特殊的响应式行为。

  Vue中常用的指令简介：v-bind/v-if /v-else/v-for/v-on/v-model/v-show   /v-once /v-html 

1. v-bind ：响应式的更新HTML属性，可简写做（’：‘）

2. v-if  ： 条件渲染指令，根据其后表达式的boolean值进行判断是否渲染该元素   

3. v-else  ：跟在v-if/v-show指令之后，当v-if/v-show指令表达式为true时，else元素不显示；反之，else元素显示在页面上。

4. v-for  ：类似JS的遍历，用在数组中

5. v-on  ：事件监听器，调用在Vue实例中定义的方法，参数是监听的事件名

6. v-model  ：实现表单输入和应用状态之间的双向绑定

//html
<div id="vue-todolist" class="todolistDiv"> 
    <span>todolist</span>
    <inputclass="ipt"type="text"v-model="inputValue"
     v-on:keyup.enter="send" />
    <button v-on:click="send" class="btn">add</button>
    <ul>
        <li v-for="item in items">
            <div class="liDiv">
                <input type="checkbox" v-model="item.completed">
                <label>{{item.text}}</label>
                <button v-on:click="removeTodo(item)" class="btn">X</button>
            </div>
    </ul>
</div>

7. v-show  :根据条件展示元素的选项，与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none";（但不支持<template>包和v-else）

8. v-once   :一次性的插值，数据改变时，插值处的内容不会更新

<span v-once>文本内容将保持不变：{{message}}</span>

9. v-html  :输出HTML代码

<p>using mustaches:{{rawHtml}}</p>
<p>using drective:<span v-html="rawHtml"></span></p>

总结

       本文是结合自身在学习Vue的过程总做出的总结，因为初次接触，对问题的叙述并不是很明了，故此仅是简单的给出了Vue的使用实例以及其中一些较为常用的指令，对指令也只是做了简单的使用功能阐述，若想深掘其中之意，还请参见Vue.js官网。

参考

    1.  Vue.js官网：https://cn.vuejs.org/v2/guide/

     2. Vue.js常用指令汇总（v-if、v-for等）  林小羽

      

转载于:https://my.oschina.net/u/3717557/blog/1616383