Vue.js 入门教程

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

    
        
        
        
    
    
        

          

{{ message }}

        

    

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

1. 学习 JavaScript
2. 学习 Vue
3. 整个牛项目

在控制台里，输入 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 

你好,{{message}}

• {{s}}

{{i}}

{{u.name}}

{{u.age}}

aaa
aaa

显示

隐藏

条件语句

隐藏

展示

隐藏

---

足球
         篮球
         乒乓球
{{cktest}}

---

        男
        女
        {{gender}}

    

        户口所在地:
  
     请选择
             {{home.text}}  
      
    户别:
      
     请选择
            {{hegoto.name}}  
      
    人员类型:
     
         请选择 
        {{genres.graduates}}  
     
    人员职务:
     
    请选择 
     {{position.work}}  
   
  查询

 
   
   

 

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之旅，接着我们了解了几个比较常用的指令，最后根据这些知识我们构建了一个简单的示例。