大家好，又见面了，我是你们的朋友全栈君。
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!
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 已经进行了更新。
控制切换一个元素是否显示也相当简单：
<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 指令可以绑定数组的数据来渲染一个项目列表：
<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
<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> 查询</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之旅，接着我们了解了几个比较常用的指令，最后根据这些知识我们构建了一个简单的示例。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/140724.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
