Vue修炼手册第一章
1. 什么是Vue
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2. Vue快速入门
2.1 Hello Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="hello">
{{message}}
</div>
<script src="./js/vue.js"></script>
<script>
const hello = new Vue({
el:'#hello',
data:{
message:"hello Vue!!!"
},
});
</script>
</body>
</html>
2.2 Vue中的el挂载点
el挂载点的注意事项:
(1)作用范围:该标签内或者子标签内
(2)挂载点的书写格式和原生Js以及JQuery的选择器中格式相同,但是Vue建议使用id选择器。例如:
(3)挂载点可以使用在双标签内,不能使用在单标签、body标签和html标签上,建议挂载到div标签上。
2.3 Vue中的data数据区
此处的data是用来存放数据的,是一个对象,可以存放多种数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div id="hello">
{{message}}
<span>{{message}}</span>
<br>
<span>{{ultraman.name}}======{{ultraman.age}}</span>
<br>
<ul>
<li>凹凸曼:{{list[0].ultraman}}</li>
<li>凹凸曼:{{list[1].ultraman}}</li>
<li>凹凸曼:{{list[2].ultraman}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
const hello = new Vue({
el:'#hello',
data:{
//字符串
message:"hello Vue!!!",
//对象
ultraman:{
name:"盖亚",
age:18
},
//集合
list:[{ultraman:"奥特曼"},{ultraman:"赛文奥特曼"},{ultraman:"杰克奥特曼"}]
},
});
</script>
</body>
</html>
3. Vue的指令
3.1 什么是Vue指令
(1)解释:指令 (Directives) 是带有 v- 前缀的特殊属性
(2)作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
3.2 Vue常用指令
- v-text:v-text主要用来更新textContent,可以等同于JS的text属性。
<span v-text="msg"></span>
等价于
<span>{{msg}}</span>
- v-html:
双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。这个div的内容将会替换成属性值rawHtml,直接作为HTML进行渲染。
<div v-html="hello"></div>
- v-pre:
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
<div id="hello">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>
- v-cloak:
这个指令是用来保持在元素上直到关联实例结束时进行编译。具体表现为:在刷新或载入页面时,会先闪烁显示 {{message}},然后再编译为“hello Vue!!!”。
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
conset app = new Vue({
el:'#app',
data:{
message:'hello Vue!!!'
}
})
</script>
- v-once:
v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。这里即使list中的元素改变,页面也不会重新渲染。
<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
- v-if:
v-if可以实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素,程序员最为熟悉的if判断,如果判断条件为true,则显示。否则,不会渲染这个元素。
<a v-if="(判断条件)">if</a>
- v-else:
v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。
<a v-if="(判断条件)">if</a>
<a v-else>else</a>
- v-else-if:
v-else-if充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句。
<div v-if="type==='艾斯'">
艾斯
</div>
<div v-else-if="type==='泰罗'">
泰罗
</div>
<div v-else-if="type==='雷欧'">
雷欧
</div>
<div v-else>
不是这哥三
</div>
- v-show:
也是用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性。
<h1 v-show="show">hello Vue!!!</h1>
此处,如果show为true则显示“hello Vue!!!”,false则不显示。
注意:
①v-if有更高的切换开销
②v-show有更高的初始渲染开销。
③因此,如果要非常频繁的切换,则使用v-show较好;如果在运行时条件不太可能改变,则v-if较好。
- v-for:
用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式:
//使用in,index是一个可选参数,表示当前项的索引
<div v-for="(item,index) in items"></div>
//使用of
<div v-for="item of items"></div>
注意: 当v-for和v-if同处于一个节点时,v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中。
- v-bind:
v-bind用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 :】
①对象语法:
<div id="app">
<input type="button" value="点我" v-on:click="doIt"/>
<br>
<input type="button" value="点我" v-on:click="toggleActive"/>
<br>
<!--v-bind:绑定标签的属性-->
<img :src="imgUrl" width="200" v-bind:title="message">
<br>
<!--v-bind:绑定标签的两种方式-->
<!--
<img src="./image/2.jpg" v-if="flag" width="200" v-bind:class="isActive?'active':''">
-->
<!--建议大家使用该方式-->
<img src="./image/2.jpg" v-if="flag" width="200" v-bind:class="{active:isActive}">
</div>
<script>
const app=new Vue({
el:"#app",
//数据标志
data:{
message:"你好,奈克赛斯",
flag:false,
isActive:false,
},
//方法的定义
methods:{
//基本数据类型和字符串
doIt(){
this.flag=!this.flag;
},
toggleActive(){
this.isActive=!this.isActive
}
}
}
)
</script>
②数组语法
<div id="app">
<!--数组语法:errorClass在data对应的类一定会添加-->
<!--is-active是对象语法,根据activeClass对应的取值决定是否添加-->
<p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
activeClass: false,
errorClass: 'text-danger'
}
})
</script>
③直接绑定对象
<div id="app">
<!--在vue实例的data中定义了classObject对象,这个对象里面是所有类名及其真值-->
<!--当里面的类的值是true时会被渲染-->
<div :class="classObject">12345</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject:{
'is-active': false,
'text-danger':true
}
}
})
</script>
- v-model:
这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。下面的例子,当我们键盘在input框输入时,因为v-model指令的存在,textarea标签和{{name}}的内容会根据input框中的文字进行动态改变。
<body >
<div id="app">
<button @click="changeName">点击</button>
<!--v-model属于双向绑定,绑定的是表单元素。-->
<input type="text" v-model="name" @keyup.enter="change"/>
<textarea v-model="name"></textarea>
<br>
{{name}}
</div>
</body>
<script>
const app=new Vue({
el:"#app",
//数据标志
data:{
name:"阿古茹"
},
//方法的定义
methods:{
changeName(){
this.name="盖亚"
},
change(){
alert(this.name);
}
}
}
)
</script>
v-model修饰符:
① .lazy:默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步。
<input v-model.lazy="msg">
② .number:自动将用户的输入值转化为数值类型
<input v-model.number="msg">
③ .trim:自动过滤用户输入的首尾空格
<input v-model.trim="msg">
- v-on
v-on主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。
简写为:【 @ 】
举一个计数器的小Demo例子。
<body>
<!-- html结构 -->
<div id="app">
<!-- 计数器功能区域 -->
<div class="input-num">
<button @click="del">
-
</button>
<span v-html="num"></span>
<button @click="add">
+
</button>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="./js/vue.js"></script>
<!-- 编码 -->
</body>
<script>
const app = new Vue({
el:"#app",
data:{
num:0,
max:10,
min:0,
},
methods:{
add(){
if(this.num>=this.max){
alert("到头了");
}
this.num++;
},
del(){
if(this.num<=this.min){
alert("到底了");
}
this.num--;
}
}
})
</script>