</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
[v-cloak]{
display: none;
}
.style1{
color:red;
}
.style2{
background-color:blue;
}
.style3{
font-style:italic;
}
.style4{
font-size:30px;
}
.hFontColor{
color: brown
}
.hAlign{
text-align: center
}
td{
text-align: center
}
</style>
</head>
<body>
<!-- 在外层标签div引入id属性值,将来vue.js会总通过该id,找到需要操作的元素 -->
<!--
在vuejs中，为了为页面中的元素渲染值（为前端标签对中的内容赋值）
可以使用3种形式：
插值表达式{{str}}
v-text
v-html
-->
<div id="app">
<!-- 在前端页面元素的部分，其中的内容我们暂时以插值表达式的形式来呈现 -->
<!-- 在两对P标签中分别引入了插值表达式,相当于将P标签中的内容写活了,内容以变量的形式存在 -->
<!-- 插值表达式如果网络比较慢的情况下页面会先是{{}},可以通过v-cloak去除这种闪烁问题
} -->
<!-- 方法一:插值表达式 :
1.可以和页面原有内容进行拼接
2.赋予纯内容,html不会自动转换而直接显示-->
<p v-cloak>====={{str1}}=====</p>
<p v-cloak>{{str2}}</p>
<!-- 方法二:v-text :
1.不能拼接,会先将内容清空再进行赋值
2.赋予纯内容,html不会自动转换而直接显示-->
<p v-text="str3">=====</p>
<!-- 方法三:v-html :
1.不能拼接,会先将内容清空再进行赋值
2.赋予内容外会自动转换html内容-->
<p v-html="str4">=====</p>
<!-- 以下input标签对value属性中的值，使用vm对象，由vm对象将data中的信息动态的赋予到该value属性值当中 -->
<!-- 必须使用指令属性v-bind来完成,我们需要将v-bind:加在我们需要绑定的属性的前面,而且可以直接进行拼接固定内容 -->
<!-- 可以直接省略用:代码v-bind:因为绑定操作复用率非常高-->
<input type="text" :value="str5+'111'">
<p :title="str5">content......</p>
<input type="button" value="submit" :title="str5+'Hello World'+str5"/>
<!-- js中冒泡机制:在出发了内层元素的同时,也会随之继续触发外层元素(外层元素包裹了内层元素),在做点击的过程中,点击了内层元素,也可以认为是同时点击了外层元素.所以两个事件都会触发,实际开发中不需要这种冒泡的机制,所以要阻止这种效果的出现 -->
<!-- v-on:click="fun1"的形式来绑定事件,相当于原生js中的onclick -->
<input type="text" :value="str6">
<input type="button" value="原生onclick" onclick="funOriginal1()">
<input type="button" value="v-on:click" v-on:click="fun1">
<input type="button" value="简化@" @click="fun1">
<!-- 使用@click.stop来对事件的冒泡机制进行阻止 -->
<div style="width:100px;height:100px;background-color:red" @click="funOut">
<div style="width:50px;height:50px;background-color:blue" @click.stop="funInner">
</div>
</div>
<!-- 所谓默认的行为指的是超链接中的 href 属性链接
在实际项目开发中，不仅仅只是按钮需要我们绑定事件来控制行为，超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。所以在 a 标签中的 href链接往往要被我们以特殊的方式处理掉。-->
<a href="https://www.baidu.com" @click="fun1">原始href</a>
<a href="https://www.baidu.com" @click.prevent="fun1">prevent后href</a>
<!-- 使用@click.capture点击内层,会先触发外层事件再触发内层事件,加了capture的会被先触发 -->
<div style="width:100px;height:100px;background-color:red" @click.capture="funOut">
<div style="width:50px;height:50px;background-color:blue" @click="funInner">
</div>
</div>
<!-- 使用@click.self点击按钮,只会触发按钮和外层事件,内层的self阻止了自己冒泡,不会触发内层事件 -->
<div style="width:100px;height:100px;background-color:red" @click="funOut">
<div style="width:50px;height:50px;background-color:blue" @click.self="funInner">
<input type="button" @click="funInput" value="点击">
</div>
</div>
<!-- 点击1会先触发fun1再触发href;
点击2只触发fun1不触发href,第二次没触发@click只触发href只跳过一次 -->
<a href="http://www.baidu.com" @click="fun1">点击1</a>
<a href="http://www.baidu.com" @click.prevent.once="fun1">点击2prevent.once</a>
<!-- v-model:数据双向绑定,只能运用在表单元素中 form表单中
form
<input>系列 type:text,hidden,checkbox,radio.... <select>
<textarea>
...
-->
<div>
<h3>{{str7}}</h3>
<input type="text" v-model:value="str7"/>
</div>
<!-- 使用v-model实现简单计算器 -->
<div>
<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>
<!-- 样式:使用vuejs控制样式,会使样式变化的操作更加的灵活 -->
<!-- class样式:
案例 1：传递一个 class 样式的数组，通过 v-bind 做样式的绑定该形式与之前的形式没有太大的区别
:class="[样式 1,样式 2]"
案例 2：通过三目（元）运算符操作以上
boolean?true 执行 :false 执行
案例 3：使用对象（json） 来表达以上三目（元）运算符的操作
{样式:flag}
案例 4：以对象引用样式
:class={}
案例 5：通过以直接模型 M 的形式做样式渲
注意：这样使用必须直接将具体的 boolean 值结果（true/false）赋值，不能以 this.模型的形式来做引用
-->
<div>
<span class="style1 style2 style3 style4">Hello Style</span>正常class
</div>
<div>
<span :class="['style1','style2','style3','style4']">Hello Style</span>class数组
</div>
<div>
<span :class="['style1','style2','style3',flag?'style4':'']">Hello Style</span>class三元
</div>
<div>
<span :class="['style1','style2','style3',{'style4':flag}]">Hello Style</span>class json
</div>
<div>
<span :class="{style1:true,style2:true,style3:flag,style4:false}">Hello Style</span>class 对象
</div>
<div>
<span :class="myStyle">Hello Style</span>class myStyle
</div>
<!-- style 样式补充:在实际项目开发中，对于 style 样式的使用，没有 class 使用的广泛，通常 style 属性仅仅只是对个别指定元素的样式进行的进一步补充使用。 -->
<!-- 案例 1：引用样式对象:style="引用样式对象"
注意：在写 color 这样的样式属性的时候，由于仅仅只是一个单词，所以不需要加引号，开发中的大多数的样式都是包含横杠（-）的，
例如：font-style，background-color 等等，在使用这样带有-的演示属性的时候，必须套用在引号中。
'font-style'
'background-color'
color-->
<div>
<span :style="myStyle1">Hello Style</span>
</div>
<!-- 案例 2：引用样式对象数组 -->
<!-- :style="[样式对象引用 1,样式对象引用 2] -->
<div>
<!-- 引用data中的数据不需要'' -->
<span :style="[myStyle1,myStyle2]">Hello Style</span>
</div>
<!-- 将数组展示出来 -->
<!-- 方法一:直接使用插值表达式 -->
<p>{{cityList[0]}}</p>
<p>{{cityList[1]}}</p>
<p>{{cityList[2]}}</p>
<p>{{cityList[3]}}</p>
<p>{{cityList[4]}}</p>
<!-- v-for
案例 1：遍历字符串数组
案例 2：遍历对象数组
案例 3：遍历对象的属性和属性值
案例 4：遍历整型数 -->
<!-- 对于 key 属性的应用，值得注意的是：
注意 1：key 属性值必须是一个数值或者字符串，对象不能当做属性值。否则系统会提出警告，将来不能有效的应用。
注意 2：key 属性的应用，必须要搭配绑定 v-bind 指令，在使用的时候必须是以该形式":key"来使用，否则系统不会生效。
注意 3：对 key 属性所赋的值，必须是记录的唯一标识，我们通常使用的是记录的 id -->
<p v-for="(city,i) in cityList" :key="city.id">
<!-- 在以上需求的基础上 遍历出所有的元素以及对应的下标 -->
{{i}}------{{city}}
</p>
<p v-for="(city,i) in cityObjList" :key="city.id">
<!-- 对象以 .属性名 的形式来取得属性值 -->
{{i}}------{{city.id}}------{{city.name}}------{{city}}
</p>
<p v-for="(value,key,i) in city1">
<!--遍历对象的属性和属性值：必须以取出键值对的形式来遍历
(value值(属性值),key键(属性名)) in 对象
(value值(属性值),key键(属性名),i下标) in 对象-->
{{i}}-------------{{key}}------------{{value}}
</p>
<!--以 元素 in 整型数值 -->
<p v-for="count in 10">
{{count}}
</p>
<!-- v-if 和 v-show:
true:效果是一模一样
false:v-if 中的元素是本身就没有的;v-show 中的元素是存在的,只是
通过 false 属性值,系统为该元素新增了 display:none,表示不展现该
元素-->
<!-- v-if:boolean true/flase:当值为true：则展现标签对中的信息;当值为false：则不展现标签对中的信息-->
<p v-if="true">显示该文本值1</p>
<p v-if="flag">显示该文本值flag</p>
<!-- v-show -->
<p v-show="true">显示该文本值1</p>
<p v-show="flag">显示该文本值flag</p>
<!--
模拟表结构：
student
id：编号
name：姓名
gender：性别
age：年龄
-->
<h3 :class="hstyle">学生信息管理系统</h3>
<hr width="100%">
<br/>
<!-- 搭建添加操作相关信息 -->
编号：<input type="text" v-model="id"/> <!-- A0001 -->
姓名：<input type="text" v-model="name"/>
性别：<input type="text" v-model="gender"/>
年龄：<input type="text" v-model="age"/>
<input type="button" value="保存学员" @click="save"/>
<input type="text" v-model="sname" @keyup="search"/>
<br/>
<br/>
<table border="1" width="100%" align="center" cellpadding="6px" cellspacing="0px">
<tr>
<td>序号</td><!-- 1,2,3,4,5.... -->
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td><!-- 为删除超链接提供入口 -->
</tr>
<tr v-for="(stu,i) in sList" >
<td>{{i+1}}</td>
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td>{{stu.gender}}</td>
<td>{{stu.age}}</td>
<td><a href="javascript:void(0)" @click="del(stu.id)">删除</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
// 当vue.js狂框架导入进来以后,在浏览器缓存中,就已经存在了一个vue架构的构造函数
// new出来的vm对象,就是页面中对于模型和视图(数据和页面元素)的整体调度着
var vm=new Vue({
//el元素表现的是要指定为那个标签进行相应的vue.js的操作,id以#形式引入,class以.形式引入
el:"#app",
//data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
//data属性中，存放的是el中要使用到的数据
//这里的data就是MVVM中M，专门用来表现数据的组件
data:{
"str0" : "<font color='red'>000</font>",
"str1" : "<font color='red'>111</font>",
"str2" : "<font color='red'>222</font>",
"str3" : "<font color='red'>333</font>",
"str4" : "<font color='red'>444</font>",
"str5" : "555",
"str6" : "666",
"str7" : "777",
"str8" : "888",
"str9" : "999",
num1 : 0,
num2 : 0,
csign : "+",
result : 0,
flag:false,
//myStyle={style1:flag,style2:flag,style3:flag,style4:flag},//不能直接引用g'flag,要是显性的true和false值
myStyle:{style1:true,style2:true,style3:true,style4:false},
myStyle1 : {color:'red','font-size':'30px'},
myStyle2 : {'font-style':'italic','background-color':'aqua'},
cityList : ["北京","上海","广州","深圳","沈阳"],
cityObjList : [
{id:"A0001",name:"北京"},
{id:"A0002",name:"上海"},
{id:"A0003",name:"广州"},
{id:"A0004",name:"深圳"},
{id:"A0005",name:"沈阳"},
],
city1 : {id:"A0001",name:"北京"},
sList : [
{id:"A0001",name:"zs",gender:"男",age:"23"},
{id:"A0002",name:"ls",gender:"男",age:"24"},
{id:"A0003",name:"ww",gender:"男",age:"25"}
],
hstyle:{hFontColor:true,hAlign:true},
id : "",
name : "",
gender : "",
age : "",
sname:"",
},
//methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
methods:{
fun1(){
alert("abc");
},
funOut(){
alert("触发外层div");
},
funInner(){
alert("触发内层div");
},
funInput(){
alert("触发了内部按钮");
},
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);
}
},
save(){
/*
通过在页面中对文本框进行信息的完善（对视图V进行数据的填充）
根据使用对于视图中值的绑定方式是v-model的方式，会实现双向数据绑定
通过对视图的数据的填充，同时也是对模型中数据的填充
在我们触发的save方法当中，取得模型中的值，就相当于是取得了在页面文本框填充的数据
将这些数据收集起来，形成一个对象，将该对象添加到我们的sList对象数据中就可以了
*/
var s={id:this.is,name:this.name,gender:this.gender,age:this.age};
this.sList.push(s);
},
del(id){
//id:需要删除记录的id，根据id来进行删除
/*
遍历sList中所有的对象
从每一个对象中取得id信息，将每一个id与参数id进行比较
如果id值相等，证明我们找到了需要删除的记录
将该记录从sList中移除掉
*/
// alert(id);
for(var i=0;i<this.sList.length;i++){
if(this.sList[i].id==id){
this.sList.splice(i,1);
}
}
},
search(){
var orignal=this.sList;
this.sList = [];
for(var i=0;i<orignal.length;i++){
if(orignal[i].name.indexOf(this.sname)>=0){
this.sList.push(orignal[i]);
}
}
}
}
})
function funOriginal1(){
alert("abcOriginal");
}
</script>
</body>
</html>
