Vue.js 教程

Angular

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

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


Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue