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>

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">

<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">

<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>

<div v-show="false">展示</div>
<div v-show="true">隐藏</div>
</div>

<div id="app5">

<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>  查询</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对象中声明.

总结

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

Vue.js 入门教程相关推荐

Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
【转】Vue.js入门教程（一）从静态页面到前后端分离开发
第一章:基础知识我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
js读取http chunk流_极简 Node.js入门教程双工流
点击上方蓝字关注我们小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读双工流就是同时实现了 Readab ...
Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...

Vue.js 入门教程