Vue.js学习使用心得（一）
一、初步了解
Vue.js是一套构建用户界面的渐进式框架，它只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，相当于JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
- 定义View
- 定义Model
- 创建一个Vue实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
例1：
<div id="vue_det">
<h1>姓名 : {{name}}</h1>
<h1>爱好 : {{hobby}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
name: "糖果波",
hobby: "吃喝玩乐",
alexa: "10000"
},
methods: {
details: function() {
return this.name+ "喜欢"+this.hobby;
}
}
})
vm.alexa= "1234"
document.write(vm.alexa)
</script>
获得以下结果：
例2:
<div id="app">
{{5+5}}<br> //结果10
{{ ok ? 'YES' : 'NO' }}<br> //结果YES
{{ message.split('').reverse().join('') }} //结果BOONUR
</div> <script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB'
}
})
</script>
二、data值改变
Vue实例的data属性指向exampleData，它是一个引用类型，改变了exampleData对象的属性，同时也会影响Vue实例的data属性。
当下面实例中变量data 进行改变时，定义实例中的data也会改变；当实例中的data改变时，变量data也会随之改变。
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "教程", url: "www.baidu.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
// 它们引用相同的对象！
document.write(vm.site === data.site) // true
document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "aa"
document.write(data.site + "<br>") // Runoob // ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
得到如下结果：
三、指令
（1）v-bind
v-bind主要是綁定html标签中的一个或多个属性，例如 href，class，name，可以在其名称后面带一个参数，中间放一个冒号隔开。例：
<a v-bind:href="url">小飞飞的博客</a> //注意这里面的url不能直接写网址！，只能写变量传参数才可以
//错误示范：v-bind:href="http://blog.csdn.net/qq_37983691" <script>
new Vue({
data:{
url:"http://blog.csdn.net/qq_37983691"
}
})
<script>
对于绑定class只能用如下绑定方式：
第一个参数class的名称，第二个是一个boolean值，就是true，false, 如果是true的话这个绑定的class才生效啊！
v-bind:class=”{className:boolean}”
//错误的绑定方式：v-bind:class=”sb”，v-bind:class=”{bigSb}”
以下例子是class绑定及监听事件改变属性。
<style>
.aa {
background: #444;
color: #eee;
}
</style> <body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app">
<label for="r1">修改颜色</label>
<input type="checkbox" v-model="class1" id="r1">
<button v-on:click="changeColor">点击</button>
<br>
<br>
<div v-bind:class="{'aa': class1}">
v-bind:class 指令
</div>
</div> <script>
new Vue({
el: '#app',
data: {
class1: false
},
methods: {
changeColor: function () {
if (this.class1 == true) {
this.class1 = false
} else {
this.class1 = true
}
}
}
});
</script>
</body>
得到如下结果:
另一种class绑定方法：
<div v-bind:class="classObject"></div>
<script>
new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': false
}
}
});
</script>
绑定多个class:
<div v-bind:class="[activeClass, errorClass]"></div>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
}
});
</script>
绑定id:
<div id="app">
<div v-bind:id="'list-' + id">List</div> //id为"list-1"
</div> <script>
new Vue({
el: '#app',
data: {
id : 1
}
})
</script>
绑定style:
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</div> <script>
new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>
<div id="app">
<div v-bind:style="styleObject"></div>
</div> <script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
</script>
（2）v-model
v-model用于表单数据的双向绑定，v-model只能用在：<input> <select> <textarea> <components> <checkbox> <radio>等表单数据中；
在下面实例中，如果<p>中文本进行变化，<input>中的文本也会随之变化；反之亦然。
以下是单选框和复选框双向绑定的应用：
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label> <p>多个复选框：</p>
<input type="checkbox" id="tang" value="糖" v-model="checkedNames">
<label for="tang">糖</label>
<input type="checkbox" id="guo" value="果" v-model="checkedNames">
<label for="guo">果</label>
<input type="checkbox" id="bo" value="波" v-model="checkedNames">
<label for="bo">波</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div> <script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
得到如下结果：
以下是input框与文本框双向绑定的应用：
<div id="app">
<h1>input 元素：</h1>
<p>{{ message }}</p>
<input type="text" v-model="message"/> <h1>textarea 元素：</h1>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……" style="width:300px;"></textarea>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '糖果波',
message2: 'Vue.js教程\r\nhttps://vuejs.bootcss.com/support-vuejs/'
}
})
</script>
得到如下结果：
（3）v-html
v-html用来输出 html 代码。
<div id="app">
<div v-html="message"></div>
</div> <script>
new Vue({
el: '#app',
data: {
message: '<h1>糖果波</h1>'
}
})
</script>
（4）条件判断指令v-if、v-else、v-else-if、v-show
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
①v-if
v-if根据条件的true或false来判断元素是否插入
<div id="app">
<p v-if="seen">未插入的存在</p>
<template v-if="ok">
<h1>糖果波</h1>
<h2>润润家的糖果波</h2>
</template>
</div> <script>
new Vue({
el: '#app',
data: {
seen: false,
ok: true
}
})
</script>
②v-else
下面的例子给一个随机数，判断是否大于0.5，大于输出Yes，否则输出No。
<div id="app">
<div v-if="Math.random() > 0.5">Yes</div>
<div v-else>No</div>
</div> <script>
new Vue({
el: '#app'
})
</script>
③v-else-if
v-else-if 在 2.1.0 新增，用作 v-if 的 else-if 块。可以链式的多次使用：
<div id="app">
<div v-if="name === '糖'">
糖
</div>
<div v-else-if="name === '果'">
果
</div>
<div v-else-if="name === '波'">
波
</div>
<div v-else>
润润家的糖果波
</div>
</div> <script>
new Vue({
el: '#app',
data: {
name: '波'
}
})
</script>
④v-show
v-show根据条件的true或false来判断元素是否可见
<div id="app">
<p v-if="seen">看不见的存在</p>
<template v-if="ok">
<h1>糖果波</h1>
<h2>润润家的糖果波</h2>
</template>
</div> <script>
new Vue({
el: '#app',
data: {
seen: false,
ok: true
}
})
</script>
注意：
1、v-show 不支持 <template> 元素，也不支持 v-else。
2、v-if用来判断元素是否插入DOM中；v-show已经在DOM中，只是用来判断元素是否可见，相当于CSS中的display属性。
3、不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
（5）v-for 循环
v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div> <script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '张三' },
{ name: '李四' },
{ name: '王五' }
]
}
})
</script>
模板中使用：
<div id="app">
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
<li>--------------</li>
</template>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '张三' },
{ name: '李四' },
{ name: '王五' }
]
}
})
</script>
可以使用多个key 或 index作为参数：
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
object: {
name: '糖果波',
sex: '女',
job: 'GIS软件工程师'
}
}
})
</script>
通过V-for建立表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 建立表格</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> //在线调用菜鸟教程的Vue.js
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
})
</script>
</body>
</html>
整数的循环：
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div> <script>
new Vue({
el: '#app'
})
</script>
（6）v-on 事件监听
v-on 指令可以进行事件监听
下面的例子用来监听click事件次数并增加属性值：
<div id="app">
<button v-on:click="counter += 1">点击按钮</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div> <script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
其中methods中写用来接收事件处理方法，可以写入js语句：
<div id="app">
<button v-on:click="say('糖果波')">Say Name</button>
<button v-on:click="say('你好')">Say hi</button>
</div> <script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
其他事件修饰符：
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
其他按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit"> <!-- 常用键盘按键别名 -->
<input v-on:keyup.enter="submit"> <!-- 键盘enter键 -->
<input v-on:keyup.tab="submit">
<input v-on:keyup.delete ="submit"> <!-- 键盘delete键和退格键 -->
<input v-on:keyup.esc="submit">
<input v-on:keyup.space="submit">
<input v-on:keyup.up="submit">
<input v-on:keyup.down="submit">
<input v-on:keyup.left="submit">
<input v-on:keyup.right="submit">
<input v-on:keyup.ctrl="submit">
<input v-on:keyup.alt="submit">
<input v-on:keyup.shift="submit">
<input v-on:keyup.meta="submit">
四、缩写
只有v-bind和v-on有缩写
<!-- v-bind -->
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a> <!-- v-on -->
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
Vue.js学习使用心得（一）的更多相关文章
- Vue.js学习使用心得（四）——组件
一.组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界 ...
- Vue.js学习使用心得（三）
一.计算属性 计算属性关键词: computed <body> <div id="app"> <p>原始字符串: {{ message }}&l ...
- Vue.js学习使用心得（二）——自定义指令
自定义指令 除了核心功能默认内置的指令,Vue 也允许注册自定义指令. 自定义指令可以定义全局指令,也可以定义局部指令. 使用 directives 选项来自定义指令. 定义全局指令: <div ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
随机推荐
- vuex的学习例子
最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问 ...
- Notation, First Definitions 转 http://brnt.eu/phd/node9.html
LaTeX command Equivalent to Output style Remarks \textnormal{...} {\normalfont...} document font fam ...
- mac+php+nginx+laravel配置启动
首先保证mac安装php,nginx,composer 根据laravel中文文档进行安装 http://laravelacademy.org/post/6665.html 直接指向 composer ...
- Win10系列：VC++绘制几何图形1
本小节主要介绍如何使用Direct2D来绘制几何图形,其中会使用到FillGeometry函数和FillEllipse函数,FillGeometry函数用于填充几何图形的内部区域,而FillEllip ...
- day34 线程池 协程
今日内容: 1. 线程的其他方法 2.线程队列(重点) 3.线程池(重点) 4.协程 1.线程的其他方法 语法: Threading.current_thread() # 当前正在运行的线程对象的一个 ...
- CMOS集成门电路
CMOS集成门电路:mos管构成的集成门电路 CMOS:互补对称金属氧化物半导体器件 CMOS反相器电路是由N沟道MOSFET和P沟道MOSFET互补而成:特点静态功耗近视为0,电源电压可在很宽的范围 ...
- TTL反相器的外部特性
TTL反相器的外部特性 电压传输特性 输入端噪声容限特性 静态输入特性: 静态输出特性: 动态特性: 传输延迟时间:是由晶体管的延迟时间,电阻以及寄生电容元素引起的.包括俩部分:输入由低电平跳为高电平 ...
- 枚举类返回Map键值对，绑定到下拉框
有时候,页面的下拉框要显示键值对,但是不想从数据库取,此时我们可以写一个枚举类, Java后台代码 1.枚举类 import java.util.HashMap; import java.util.M ...
- 使用Jenkins自动编译 .net 项目
使用Jenkins自动编译我的.net 项目 1.Jenkins是什么? Jenkins是一个可扩展的持续集成的引擎,主要用于持续自动的构建.测试软件项目 监控一些定时执行的任务. 2.安装配 ...
- php安装及配置笔记
windows下启动php-cgi方式为:php-cgi.exe -b 127.0.0.1:9000 -c php.ini(也可以是绝对路径). 安装XDebug支持,最基本的配置参数为: [xdeb ...