第二章 Vue.js 基础语法
第二章 Vue.js 基础语法
2-1 第一个 Vue.js 案例_HelloWorld
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p>{
{str1}}p>
<p>{
{str2}}p>
div>
<script>
//当Vuejs框架包导入进来之后，在浏览器缓存中，就已经存在了一个Vue框架的构造函数
//我们new出来的这个vm对象，就是页面中对于模型和视图（数据和页面元素）的整体调度者
//以下创建出来的vm对象，就是我们MVVM中的VM调度者
var vm = new Vue({
el : "#app", //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
data : {
//data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
//data属性中，存放的是el中要使用到的数据
//这里的data就是MVVM中M，专门用来表现数据的组件
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
script>
body>
html>
.
.
2-2 通过基础案例解析 MVVM
引入vuejs框架 ：
<script src="./lib/vue-2.4.0.js">script>
.
在外层标签div中引入 id属性值 将来vuejs会通过该id，找到需要操作的元素
以下Vue实例vm所控制的这个元素区div，就是我们的V
<div id="app">
<p>{
{str1}}p>
<p>{
{str2}}p>
div>
.
当Vuejs框架包导入进来之后，在浏览器缓存中，就已经存在了一个Vue框架的构造函数
我们new出来的这个vm对象，就是页面中对于模型和视图（数据和页面元素）的整体调度者
以下创建出来的vm对象，就是我们MVVM中的VM调度者
<script>
var vm = new Vue({
el : "#app", //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
data : {
//data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
//data属性中，存放的是el中要使用到的数据
//这里的data就是MVVM中M，专门用来表现数据的组件
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
script>
.
2-3 指令属性的基本使用
2-3-1 加粗样式（1）v-cloak
使用v-cloak 主要为了解决插值表达式的闪烁问题使用插值表达式的问题：
在页面加载的过程中，在页面中的{ {}}插值表达式首先会被页面认可为是html 元素中的实在存在的内容。所以浏览器会首先将{ {}} 展现在页面上，页面加载完毕后，插值表达式{ {}}才会真正的转变为动态赋予的值。这就会造成一种现象，如果将来终端在访问服务器的过程中，网速较慢（网络比较卡），那么我们的{ {}}会首先展现出来，
{ {}}展现出来之后，会一闪而过，最终显示的是最终被赋予的值。这就是前端开发中所谓的，插值表达式的闪烁问题。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
<style>
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="app">
<p v-cloak>{
{str1}}p>
<p v-cloak>{
{str2}}p>
div>
<script>
var vm = new Vue({
el : "#app", //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
data : {
//data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
//data属性中，存放的是el中要使用到的数据
//这里的data就是MVVM中M，专门用来表现数据的组件
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
script>
body>
html>
(2） v-text与v-html
在vuejs中，为了为页面中的元素渲染值（为前端标签对中的内容赋值)可以使用3种形式：
插值表达式{ {str}}
v-text
v-html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p>==============={
{str1}}===============p>
<p v-text="str2">=====================p>
<p v-html="str3">=====================p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
script>
body>
html>
.
（3）插值表达式与v-text/v-html 的区别
1. 对于元素中已经存在的值，只有插值表达式能够将原有的值保留，在原有的已经存在的值的基础上添加动态数据。
2. 使用v-text 和v-html 之所以不能够保留元素标签对中原有的内容， 是因为在使用以上两个指定属性之前，会提前将标签对中的内容先清空掉，在赋予动态的值。如果未来的实际项目开发，需求为在原有的内容的基础上，追加动态的值，我们要选择使用插值表达式。
3. 从另一个方面来看，插值表达式虽然会出现{ {}}页面闪烁的现象（v-text 和 v-html 不会出现页面闪烁的情况），但是对于原有内容的保留，只有插值表达式能够完成，所以插值表达式具有不可替代的优势。
4. 对比v-text 和v-html
v-text:主要是用来赋予纯内容的，如果赋予到元素中的内容本身包含 html，那么 v-text 会将 html 原封不动的展现在页面上，这些内容是得不到浏览器的解析的。
v-html:除了能够为前端元素赋予内容之外，更重要的是，如果内容本身含有html 代码，那么赋值后最终展现出来的结果，html 元素会得到浏览器的解析的。
5. 从以上结果判断，v-html 的功能要更加强大，对于前端页面的展现，不可能让使用该系统的用户看到任何 html 代码，而是应该让用户看到解析后的html 效果。所以在实际项目开发中，使用 v-html 的概率要高于v-text。
另外使用插值表达式的效果，与v-text 是一样的，内容中的html
代码时得不到浏览器的解析的。
.
.
（4）v-bind
v-vind:是Vuejs 中，提供用于绑定属性的指令对于v-bind 在开发中一共有如下几种使用方式
a. 直接使用指令属性v-bind 来为元素中的属性进行绑定操作
b. 使用简化后的方式，将 v-bind 去除，直接使用:来对元素中的额属性进行绑定。
因为在实际项目开发中，对于前端元素的绑定是我们的常规操作， v-bind 的使用复用率非常高，所以每一次都直接写v-bind 会很麻烦， 所以vuejs 为v-bind 指令属性提供了简写的方式，直接使用:即可。
v-bind:title --> :title
注意：这种简写形式仅仅只是针对于我们的 v-bind，以上所讲解的其他的指令是不具备简写形式的。
在实际项目开发中，我们都是使用这种简写的形式。
c. 在使用v-bind 对元素中的属性进行绑定的时候，可以直接在操作值的位置进行内容的拼接。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<input type="text" v-bind:value="str1"/>
<p :title="str2">content...p>
<input type="button" value="submit" :title="str3+'Hello World'"/>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
script>
body>
html>
2-4 使用 v-on 指令触发事件
(1)v-on 的基本使用
v-on:click="fun1"的形式来绑定事件相当于原生js 中的onclick
v:bind–>:
v-on–>@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<input type="text" :value="str1"/>
<input type="button" value="点击1" v-on:click="fun1"/>
<input type="button" value="点击2" onclick="fun12()"/>
<input type="button" value="点击3" @click="fun2"/>
div>
<script>
function fun12(){
alert("abc1");
}
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("abc2");
},
fun2(){
alert("aaaaaa");
}
}
});
script>
body>
html>
.
.
(2)事件修饰符的使用
.
a.stop:使用.stop 来对事件的冒泡机制进行阻止
js 中的事件的冒泡指的是: 在触发了内层元素的同时，也会随之继续触发外层元素（外层元素包裹了内层元素），在做点击的过程中， 点击了内层元素，也可以认为是同时点击了外层元素。所以两个事件都会触发。
在实际项目开发中，几乎没有太多需求会使用到这种事件冒泡的机制，所以我们需要阻止事件的冒泡。阻止事件冒泡之后的效果是， 在我们点击了内层元素之后，内层元素绑定的事件触发，触发完毕后， 由于事件冒泡被阻止，就不会继续触发外层元素的事件了。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<div style="width:200px;height:200px;background-color:red" @click="fun1">
<div style="width:100px;height:100px;background-color:blue" @click.stop="fun2">
div>
div>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
});
script>
body>
html>
.
.
b.prevent: 使用.prevent 来阻止超链接默认的行为
所谓默认的行为指的是超链接中的href 属性链接
在实际项目开发中，不仅仅只是按钮需要我们绑定事件来控制行 为，超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。所以在a 标签中的href 链接往往要被我们以特殊的方式处理掉。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击1a>
<a href="http://www.baidu.com" @click.prevent="fun1">点击2a>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
});
script>
body>
html>
注意： 点击一 ：正常跳转， 点击二：无效
.
.
.
.
c.capture: 使用.capture 实现捕获触发事件的机制
使用的是外层div 套用内存div 的例子（其中内层 div 没有选择阻止冒泡），在此基础之上，点击内层的 div，先触发内层 div 的事件，再触发外层div 的事件。
加入了.capture 修饰符之后，先触发的是外层的 div 事件，后触发的是内层div 事件。被.capture 修改之后，事件优先触发。
.
.
d.once：使用.once 修饰符，只触发一次事件处理函数
.once 需要结合.prevent 来使用
在我们使用事件修饰符的时候，有可能会存在这样的需求，需要同时为@click 事件使用多个修饰符。例如我们现在就需要同时使用.once 和.prevent 修饰符。在使用的时候，通过绑定事件的@click 连续的绑定修饰符就可以了。
语法： @click.prevent.once
测试：通过超链接的触发来观察
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击1a>
<a href="http://www.baidu.com" @click.prevent.once="fun1">点击2a>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
},
fun3(){
alert("点击按钮");
}
}
});
script>
body>
html>
在只使用@click 的时候（没有做任何修饰符的修饰），点击超链接，先触发@click，后触发href 链接。
当为@click 添加上@click.prevent.once 之后，点击超链接。第一次点击：只触发了@click 的事件，href 链接没有触发
第二次点击（已经点击过一次之后再次点击）：没有触发@click，只触发了href。
.
.
2-4 使用 v-model 指令实现双向数据绑定
v-bind
单向数据绑定
我们可以对 v-bind 的绑定数据的形式得出一个结论 : v-bind 只能实现数据的单向绑定，从模型（M）绑定到视图（V），使用 VM 将数据去渲染视图，但是我们无法通过该形式实现数据的双向绑定。
.
双向数据绑定
在实际项目开发中，不仅仅只是将模型准确的渲染到视图中，视图中的数据的变化，更需要模型去进行有效的记录。所以我们需要使用双向数据绑定的机制。
.
(1)v-model 的基本使用
使用v-model 可以对数据进行双向的绑定操作。
值得注意的是，由于记载页面元素值的需求都是发生在表单元素中，所以v-model 只能运用在表单元素中。
form
<input>系列 type:text,hidden,checkbox,radio....
<select>
<textarea>
代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<h3>{
{str1}}h3>
<input type="text" v-model:value="str1"/>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
}
});
script>
body>
html>
初始值：hello world
通过修改文本框内的值，上面的文字内容也会跟着相应发生改变：
.
.
.
（2）使用 v-model 实现简单的计算器功能
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="num1"/>
<select v-model="csign">
<option value="+">+option>
<option value="-">-option>
<option value="*">*option>
<option value="/">/option>
select>
<input type="text" v-model="num2"/>
<input type="button" value="=" @click="count"/>
<input type="text" v-model="result"/>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
num1 : 0,
num2 : 0,
csign : "+",
result : 0
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
count(){
if(this.csign=="+"){
//直接取得的数值暂时是不能够直接计算的，默认的情况会按照字符串拼接的形式来触发+符号
//默认拼接字符串： 1+1=11
//在做数学计算之前，需要将数值格式化，才能够计算，使用parseInt方法做数值格式化的操作
this.result = parseInt(this.num1)+parseInt(this.num2);
}else if(this.csign=="-"){
this.result = parseInt(this.num1)-parseInt(this.num2);
}else if(this.csign=="*"){
this.result = parseInt(this.num1)*parseInt(this.num2);
}else if(this.csign=="/"){
this.result = parseInt(this.num1)/parseInt(this.num2);
}
}
}
});
script>
body>
html>
.
2-4 v-for 指令和 v-if 指令的应用
(1)v-for 指令的基本使用案例
1：遍历字符串数组
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p v-for="(city,i) in cityList">
{
{i}}--------------{
{city}}
p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
cityList : ["北京","上海","广州","深圳","沈阳"]
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
}
});
script>
body>
html>
2：遍历对象数组
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p v-for="(city,i) in cityList" :key="city.id">
{
{i}}------------------{
{city.id}}-----------{
{city.name}}
p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
cityList : [
{
id:"A0001",name:"北京"},
{
id:"A0002",name:"上海"},
{
id:"A0003",name:"广州"},
{
id:"A0004",name:"深圳"},
{
id:"A0005",name:"沈阳"},
]
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
}
});
script>
body>
html>
3：遍历对象的属性和属性值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p v-for="(value,key,i) in city1">
{
{i}}-------------{
{key}}------------{
{value}}
p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
city1 : {
id:"A0001",name:"北京"}
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
}
});
script>
body>
html>
4：遍历整型数字
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p v-for="count in 20">
{
{count}}
p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
}
});
script>
body>
html>
.
.
(2)v-for 指令使用注意事项对于key 属性的使用案例
key 属性的作用：
在实际项目开发中，使用 v-for 仅仅只是将元素遍历出来，并展现在页面中。如果在将来的其他需求中，使用到指定的遍历出来的某个元素，那么视图并没有为我们提供一个有效的辨识指定元素的方式。所以在遍历元素的过程中，需要为每一条遍历出来的元素做一个
有效的标识，这个标识就是该元素在页面中的唯一标识，在将来使用到该元素的时候，页面可以通过该标识认准该元素。在v-for 的使用过程中，添加key 属性及属性值就是做这个标识的最好的手段。
所以我们需要养成一个在遍历元素的过程中，为key 属性赋值的好习惯。
对于key 属性的应用，值得注意的是：
注意 1：key 属性值必须是一个数值或者字符串，对象不能当做属性值。否则系统会提出警告，将来不能有效的应用。
注意 2：key 属性的应用，必须要搭配绑定 v-bind 指令，在使用的时候必须是以该形式":key"来使用，否则系统不会生效。
注意 3：对key 属性所赋的值，必须是记录的唯一标识，我们通常使用的是记录的id。
.
.
.
(3)v-if 指令和v-show 指令的使用和区别案例 1：v-if 的使用
简单的比较v-if 指令和v-show 指令，效果是一模一样的点击浏览器（F12）中的查看器观察显示页面元素信息如果flag 为true，观察到的结果是一致的
如果flag 为false，观察到的结果是不同的
其中v-if 中的元素是本身就没有的，v-show 中的元素是存在的，只是通过false 属性值，系统为该元素新增了display:none，表示不展现该元素
通过观察得到结论：
v-if 为true ;创建条件元素 为false：去除该元素
v-show 为true :展现条件元素 为false：隐藏该元素
在实际项目开发中，一般的需求情况下，我们使用v-if 就可以了。但是如果对于元素的展现与否需要频繁的切换，我们需要使用 v-show 的形式展现或者隐藏元素，因为 v-if 在每次切换为true 的时候都需要重新的创建元素，降低页面展现元素的效率。
.
.
综合应用：
完成一个基本信息系统（学生信息管理系统）的查询列表操作， 可对该列表进行添加操作，可进行删除操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
<style>
.hFontColor{
color: brown
}
.hAlign{
text-align: center
}
td{
text-align: center
}
style>
head>
<body>
<div id="app">
<h3 :class="hstyle">学生信息管理系统h3>
<hr width="100%">
<br/>
编号：<input type="text" v-model="id"/>
姓名：<input type="text" v-model="name"/>
性别：<input type="text" v-model="gender"/>
年龄：<input type="text" v-model="age"/>
<input type="button" value="保存学员" @click="save"/>
<br/>
<br/>
<table border="1" width="100%" align="center" cellpadding="6px" cellspacing="0px">
<tr>
<td>序号td>
<td>编号td>
<td>姓名td>
<td>性别td>
<td>年龄td>
<td>操作td>
tr>
<tr v-for="(s,i) in sList">
<td>{
{i+1}}td>
<td>{
{s.id}}td>
<td>{
{s.name}}td>
<td>{
{s.gender}}td>
<td>{
{s.age}}td>
<td>
<a href="javascript:void(0)" @click="del(s.id)">删除学员a>
td>
tr>
table>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
sList : [
{
id:"A0001",name:"zs",gender:"男",age:"23"},
{
id:"A0002",name:"ls",gender:"男",age:"24"},
{
id:"A0003",name:"ww",gender:"男",age:"25"}
],
id : "",
name : "",
gender : "",
age : "",
hstyle:{
hFontColor:true,hAlign:true}
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
save(){
/*
通过在页面中对文本框进行信息的完善（对视图V进行数据的填充）
根据使用对于视图中值的绑定方式是v-model的方式，会实现双向数据绑定
通过对视图的数据的填充，同时也是对模型中数据的填充
在我们触发的save方法当中，取得模型中的值，就相当于是取得了在页面文本框填充的数据
将这些数据收集起来，形成一个对象，将该对象添加到我们的sList对象数据中就可以了
*/
var s = {
id:this.id,name:this.name,gender:this.gender,age:this.age};
this.sList.push(s);
},
del(id){
//id:需要删除记录的id，根据id来进行删除
/*
遍历sList中所有的对象
从每一个对象中取得id信息，将每一个id与参数id进行比较
如果id值相等，证明我们找到了需要删除的记录
将该记录从sList中移除掉
*/
for(var i=0;i<this.sList.length;i++){
//如果id值相等，证明我们找到了需要删除的记录
if(this.sList[i].id==id){
//将该记录从sList中移除掉
this.sList.splice(i,1);
}
}
}
}
});
script>
body>
html>
添加操作:
删除操作：
