vue2.0学习(一)-内部指令
GitHub源码 https://github.com/sunnyguyan/VueDemo
1.v-if v-else v-show
v-if:是vue的一个内部指令,指令用在我们的html中
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称
<div v-if='isLogin'>你好,guyan</div>
完整的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if&v-else&v-show</title>
<script type="text/javascript" src="../assert/js/vue.js"></script>
</head>
<body>
<h1>v-if</h1>
<hr>
<div id="app">
<div v-if="isLogin">你好，Yan!</div>
<div v-else>请登录后操作</div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</script>
</body>
</html>
这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：Yan，如果为false时，就显示请登录后操作
v-show
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来
<div v-show="isLogin">你好，Yan</div>
v-if和v-show的区别
- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。
2. v-for指令：解决模板循环问题
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
一 基本用法
模板用法
<li v-for="item in items">
{{item}}
</li>
js写法
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，你需要那个html标签循环，v-for就写在那个上边。
二 排序
我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。
computed:{
sortItems:function(){
return this.items.sort();
}
}
我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。
如果一切顺利的话，你已经看到了结果，但是这个小程序还是有个小Bug的，现在我把数组修改成这样。
items:[20,23,18,65,32,19,5,56,41]
我们把其中的54修改成了5，我们再看一下结果，发现排序结果并不是我们想要的。
function sortNumber(a,b){
return a-b
}
用法
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
三 对象循环输出
我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。
我们先定义个数组，数组里边是对象数据
students:[
{name:'king',age:11},
{name:'robot',age:33},
{name:'panda',age:65},
{name:'guyan',age:25}
]
在模板中输出
<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
加入索引序号:
<ul>
<li v-for="(student,index) in students">
{{index}}：{{student.name}} - {{student.age}}
</li>
</ul>
排序，我们先加一个原生的对象形式的数组排序方法：
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
有了数组的排序方法，在computed中进行调用排序
sortStudent:function(){
return sortByKey(this.students,'age');
}
3. v-text&v-html
我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码：
<span>{{ message }}</span>=<span v-text="message"></span><br/>
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
<span v-html="msgHtml"></span>
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。
需要注意的是:在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
完整代码: ```v-text & v-html 案例
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
msgHtml:'<h2>hello Vue!</h2>'
}
})
</script>
4.v-on:绑定事件监听器
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
一、使用绑定事件监听器，编写一个加分减分的程序。
效果如图
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-on事件监听器</title>
</head>
<body>
<h1>v-on 事件监听器</h1>
<hr>
<div id="app">
本场比赛得分： {{count}}<br/>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">减分</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
}
}
})
</script>
</body>
</html>
我们的v-on 还有一种简单的写法，就是用@代替。
<button @click="jianfen">减分</button>
我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。
绑定事件写法:
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
js代码
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
5.v-model指令
v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
一、我们来看一个最简单的双向数据绑定代码：
html文件:
<div id="app">
<p>原始文本信息：{{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message"></p>
</div>
js代码
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
二、修饰符
- .lazy:取代input监听change事件
- .number:输入字符串转为数字
- .trim:输入去掉首尾空格
三、文本区域加入数据绑定
<textarea cols="30" rows="10" v-model="message"></textarea>
四、多线按钮绑定一个值
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>
五、多选绑定一个数组
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="isPang" value="ispang" v-model="web_names">
<label for="isTrue">ispang</label>
<input type="checkbox" id="ispan" value="ispan" v-model="web_names">
<label for="isTrue">ispan</label>
<input type="checkbox" id="panpan" value="panpan" v-model="web_names">
<label for="isTrue">panpan</label>
</p>
6.v-bind指令
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式:
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明
- 直接绑定class样式
<div :class="className">1、绑定classA</div>
- 绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定class中的判断</div>
- 绑定class中的数组
<div :class="[classA,classB]">3、绑定class中的数组</div>
- 绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
- 绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
- 用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
7.其他内部指令(v-pre & v-cloak & v-once)
v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
这时并不会输出我们的message值，而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>