Vue.js 教程

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

MVVM模式

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

第一个实例:

尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue

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

或者：

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

声明式渲染:

Vue 2.0 Hello World

 
<!DOCTYPE html> 
    
<html> 
    
    <head> 
    
        <meta charset="utf-8"> 
    
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 
    
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 
    
    </head> 
    
    <body> 
    
        <div id="app"> 
    
          <p>{{ message }}</p> 
    
        </div> 
    
    <script> 
    
        new Vue({ 
    
          el: '#app', 
    
          data: { 
    
            message: 'Hello Vue.js!' 
    
          } 
    
        }) 
    
</script> 
    
</body> 
    
</html>

Hello Vue.js!

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

除了文本插值，我们还可以像这样来绑定元素特性：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

鼠标悬停几秒钟查看此处动态绑定的提示信息！

这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

条件：v-if

控制切换一个元素是否显示也相当简单：

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

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

现在你看到我了

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

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

循环：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-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('')
    }
  }
})

Hello Vue.js!

逆转消息

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

v-modle指令：

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!'
  }
})

Hello Vue!

测试案例:Vue 2.0

       <!DOCTYPE html> 
      
<html> 
      
       <head> 
      
       <meta charset="UTF-8"> 
      
       <title>Insert title here</title> 
      
       <script type="text/javascript" src="vue.2.3.0.js"></script> 
      
       </head> 
      
       <body> 
      
       <div id="app"> 
      
       <!-- 展示数据的语法:{{}} --> 
      
       你好,{{message}} 
      
       </div> 
      
       <div id="app2"> 
      
       <img :src="src1"> 
      
       <!-- 通过v-for遍历数据集合 --> 
      
       <ul> 
      
       <li v-for="s in arrays">{{s}}</li> 
      
       </ul> 
      
       <table> 
      
       <!-- 遍历对象数据 --> 
      
       <tr  v-for="(u,i) in users"> 
      
       <!-- 展示下标 --> 
      
       <td>{{i}}</td> 
      
       <!-- 通过属性名获取属性值 --> 
      
       <td>{{u.name}}</td> 
      
       <td>{{u.age}}</td> 
      
       </tr> 
      
       </table> 
      
       </div> 
      
       <div id = "app3"> 
      
       <!-- 点击按钮对应的函数在Vue对象中methods中声明,直接使用属性名称即可 --> 
      
       <button @click="cc()" >aaa</button> 
      
       <button @dblclick="dd()" >aaa</button> 
      
       </div> 
      
       <div id = "app4"> 
      
       <div v-if="true">显示</div> 
      
       <div v-if="false">隐藏</div> 
      
       <div v-if="1==1">条件语句</div> 
      
       <div v-else="1">隐藏</div> 
      
       <!-- v-show属性值为false就是将属性值修改为style="display: none; --> 
      
       <div v-show="false">展示</div> 
      
       <div v-show="true">隐藏</div> 
      
       </div> 
      
       <!-- 复选框 --> 
      
       <div id="app5"> 
      
       <!-- v-model的属性值在data中定义,在全局可获取input框中的数据 --> 
      
       <input type="text" v-model="ss"/> 
      
       <hr/> 
      
        <input type="checkbox" value="足球" v-model="cktest">足球 
      
                <input type="checkbox" value="篮球" v-model="cktest">篮球 
      
                <input type="checkbox" value="乒乓球" v-model="cktest">乒乓球 
      
       {{cktest}} 
      
        <hr> 
      
               <input type="radio" value="男" v-model="gender">男 
      
               <input type="radio" value="女" v-model="gender">女 
      
               {{gender}} 
      
       </div> 
      
       <script> 
      
        let app=new Vue({ 
      
       el:"#app", 
      
       data:{ 
      
       message:'世界', 
      
       } 
      
        }) 
      
        let app2 =new Vue({ 
      
        el:'#app2', 
      
        data:{ 
      
        src1:'1.png', 
      
        arrays:[1,2,3,41,1], 
      
        users:[ 
      
               {name:"张三",age:18}, 
      
               {name:"李四",age:18}, 
      
               {name:"王五",age:18} 
      
              ] 
      
        } 
      
        }) 
      
        var app3 = new Vue({ 
      
        el:'#app3', 
      
        methods:{ 
      
       cc:function(){ 
      
       alert('cc'); 
      
       }, 
      
       dd:function(){ 
      
       alert('dd'); 
      
       } 
      
        } 
      
        }) 
      
       let app4 = new Vue({ 
      
       el:'#app4', 
      
       }) 
      
       let app5 = new Vue({ 
      
       el:"#app5", 
      
       data:{ 
      
       ss:'', 
      
       //给多选框进行默认赋值时,必须为一个数组,否则数据会出错 
      
       cktest:[], 
      
       gender:"男",//默认值 
      
       } 
      
       }) 
      
       </script> 
      
       </body> 
      
</html> 
     
       <!--下拉框--> 
     
    <div id="rrapp"> 
        <label for="creator">户口所在地:</label>
 <select v-model="selecteda" class="form-control">  
     <option value="">请选择</option>
            <option v-for="home in homes" :value="home.value">{{home.text}}</option>  
    </select>  
    <label for="creator">户别:</label>
    <select v-model="selectedb" class="form-control">  
     <option value="">请选择</option>
           <option v-for="hegoto in hegotos" :value="hegoto.duty">{{hegoto.name}}</option>  
    </select>  
    <label for="creator">人员类型:</label>
    <select v-model="selectedc"  class="form-control"> 
        <option value="">请选择</option> 
        <option v-for="genres in genress" :value="genres.types">{{genres.graduates}}</option>  
    </select> 
    <label for="creator">人员职务:</label>
    <select v-model="selectedd"  class="form-control"> 
    <option value="">请选择</option> 
     <option v-for="position in positions" :value="position.labor">{{position.work}}</option>  
    </select>
<button style="margin-top: 2px;margin-left:15px" type="button" class="btn btn-primary abbBtn btn-sm" @click="queryByName" ><i class="fa fa-search"></i>&nbsp;&nbsp;查询</button>
 </div>
 </form> 
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div> 
</div><!--展示在下拉框中的属性值-->
var vm = new Vue({
 el:'#rrapp',
 data:{
 baseRoleSysList:{},
 selected1:'-1',
 exapOrgs:{},
 homes:[{text:'北京',value:1},{text:'非北京',value:2}],
 hegotos:[{name:'城镇户口',duty:1},
 {name:'农业户口',duty:2},
 {name:'非农业家庭户口',duty:3},
 {name:'城镇家庭户口',duty:4},
 {name:'居民户口',duty:5},
 {name:'家庭户口',duty:6},
 {name:'居民家庭户口',duty:7},
 {name:'农业家庭户口',duty:8},
 {name:'集体户口',duty:9}],
 genress:[{graduates:'应届生',types:1},{graduates:'非应届生',types:2}],
 positions:[{work:'员工',labor:1},{work:'经理',labor:2}],
 selected:'',
 selecteda:'',
 selectedb:'',
 selectedc:'',
 selectedd:'',
 },
 methods: {
 queryByName: function (event) {
 reloadGrid();
 },
 }
});
methods在按钮上绑定函数reloadGrid(),对应的函数如下:vm.selecteda:vm是个Vue对象,去对象中的属性值,直接属性,在对象中去属性直接this即可,selecteda绑定在下拉框v-modle属性上面(双向绑定),使用时一定要在Vue对象中声明.
function reloadGrid(){
 //获取下拉框中的value数据
 var householdArea= vm.selecteda;
 var householdType= vm.selectedb;
 var personType= vm.selectedc;
 var postType= vm.selectedd;
 $("#jqGrid").jqGrid('setGridParam', {
 page:1,
 postData : {
 'householdArea':householdArea,
 'householdType':householdType,
 'personType':personType,
 'postType':postType,
 }
 }).trigger("reloadGrid");
}

总结

本文简单介绍了Vue.js的MVVM模型和它的双向绑定机制，然后以一个Hello World示例开始了我们的Vue.js之旅，接着我们了解了几个比较常用的指令，最后根据这些知识我们构建了一个简单的示例。

Vue.js 入门教程