【复习】VueJS之内部指令
Vuejs
源码：https://github.com/zhuangZhou/vuejs
下载Vue.js
live-server使用
live-server是一个简单的服务器，具有热更新
使用npm进行全局安装
npm install -g live-server
在项目目录中启动
liver-server
内部指令
v-if & v-else & v-show
1、v-if
v-if 用来判断是否在加载HTML的DOM，比如模拟用户登录
<div v-if="isLogin">你好，XXX</div>
<div v-else>请登录</div>
在Vue里的data定义isLogin的值，当为true时，显示“你好，XXX”，当为false时，显示“请登录”。
2、v-show
v-show是通过调整css的display属性的属性值，来显示和隐藏节点，其实在HTML渲染时，已经加载了DOM；
<div v-show="isLogin">哈哈哈</div>
当isLogin为true时，显示“哈哈哈”，当为false时，隐藏。
3、两者的区别
v-if：判断是否加载，可以减轻服务器压力，当需要时在加载
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-for
1、 v-for
v-for是用来循环data中的数组，来解析重复模板；
2、 基本用法
模板：
<ul>
<li v-for="(item,index) in list">
{{index}} - {{item}}
</li>
</ul>
js:
var vm = new Vue({
...
data(){
return{
list: [20, 23, 18, 65, 32, 19, 5, 56, 41]
}
}
});
模板中的使用形式是v-for="(item,index) in list" ，其中list是源数据数组，即js中data的list数组，item是数组元素迭代的别名（可以随便起），index是数组元素的索引，可以省略写成v-for="item in list";
3、排序
使用排序，我们需要使用computed属性，在computed里面，重新声明一个sortList对象，为什么要重新声明，是为了不污染源数据。
var vm = new Vue({
...
computed:{
sortList(){
var list = [];
for(var i =0;i<this.list.length;i++){
list.push(this.list[i]);
}
return list.sort(sortNumber);
}
}
})
function sortNumber(a,b){
return a-b;
}
4、对象循环输出
在实际项目中，我们使用的最多的就是对象的循环输出，那如何输出呢？
首先，在js中定义一个对象数组：
var vm = new Vue({
...
data(){
return{
person:[
{
name: 'xhz',
age: 22
},
{
name: 'qws',
age: 34
},
{
name: 'asd',
age: 12
},
{
name: 'xdc',
age: 23
}
]
}
}
})
然后，在模板中输出
<ul>
<li v-for="(p,index) in person">
{{index+1}} - {{p.name}} - {{p.age}}
</li>
</ul>
对象的排序函数：
function sortByKey(arr,key){
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x<y)?-1:((x>y)?1:0));
})
}
v-text & v-html
前面我们使用插值表达式（即{{XXX}}）在HTML中输出data，当网速比较慢或者加载javascript出错时，会出现一个很大的弊端，即暴露我们的{{XXX}}；因此，Vue给我们提供v-text指令来解决这一问题：
<div v-text="text"></div>
当数据里需要解析HTML标签的时候，v-text是无法输出的，因此，Vue还给我们提供了一个指令：v-html
<div v-html="html"></div>
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
v-on
v-on是用来绑定监听事件的，可以监听DOM触发的一些javascript代码；
<button v-on:click="add">add</button>
<button @click="add">add</button>
上面的两行代码是一个意思，@click是v-on:click的简写；
当然，除了绑定click事件，其他的事件也可以绑定，比如change事件，focu事件，键盘事件，下面来说说键盘事件：
<input type="text" @key.enter="onKey">
代码的意思是，当按下"enter"键时，触发onkey事件；也可以使用键值：
<input type="text" @key.13="onKey">
v-model
v-model绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
1、双向数据绑定
模板：
<div id="app">
<p>原始文本信息:{{inputValue}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="inputValue"></p>
</div>
js:
var vm = new Vue({
...
data(){
return{
inputValue:'Hello World!'
}
}
})
2、 修饰符
-
lazy：取代 imput 监听 change 事件。
-
number：输入字符串转为数字。
-
trim：输入去掉首尾空格。
<p>v-model.lazy:<input type="text" v-model.lazy="inputValue"></p> <p>v-model.number:<input type="text" v-model.number="inputValue"></p> <p>v-model.trim:<input type="text" v-model.trim="inputValue"></p>
3、文本区域加入数据绑定
<textarea rows="10" cols="30" v-model="inputValue"></textarea>
4、多选按钮绑定一个值
<input type="checkbox" id="checkTrue" v-model="isFlag"><label for="checkTrue">{{isFlag}}</label>
5、多选绑定一个数组
<p>
<input type="checkbox" name="zz" id="zz" value="zz" v-model="names">
<label for="zz">zz</label>
<input type="checkbox" name="yym" id="yym" value="yym" v-model="names">
<label for="yym">yym</label>
<input type="checkbox" name="zxr" id="zxr" value="zxr" v-model="names">
<label for="zxr">zxr</label>
</p>
6、单选按钮绑定数据
<p>
<input type="radio" name="1" id="man" value="男" v-model="sex">
<label for="man">男</label>
<input type="radio" name="0" id="woman" value="女" v-model="sex">
<label for="woman">女</label>
</p>
v-bind
v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。
模板：
<h3>绑定图片地址</h3>
<p><img v-bind:src="imgSrc" alt=""></p>
<p><img :src="imgSrc" alt=""></p>
上面两行代码是一个意思，v-bind:src是完整语法，:src是简写；
js:
var vm = new Vue({
...
data(){
return{
imgSrc:"https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
}
}
});
当然，除了绑定图片地址，还可以绑定<a></a>标签的href属性：
<a :href="url"></a>
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
<p><span :class="className">1、绑定class</span></p>
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<p>
<span :class="{classA:isOK}">2、绑定class判断</span>
<input type="checkbox" id="isOK" v-model="isOK">
<label for="isOK">isOK:{{isOK}}</label>
</p>
3、绑定class中的数组
<p><span :class="[classA,classB]">3、绑定class数组</span></p>
4、绑定class中使用三元表达式判断
<p><span :class="isOK?classA:classB">4、绑定class三元运算符</span></p>
5、绑定style
<p><span :style="{color:red,fontSize:font}">1、绑定style</span></p>
6、用对象绑定style样式
<p><span :style="styleObj">2、对象绑定style</span></p>
var vm = new Vue({
el: '#app',
data() {
return {
imgSrc: "https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
url: 'http://www.baidu.com',
className:'classA',
classA:'classA',
classB:'classB',
isOK:false,
red:'green',
font:'26px',
styleObj:{
color:'red',
fontSize:'30px'
}
}
}
})
v-pre & v-cloak & v-once
1、v-pre
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{msg}}</div>
这时并不会输出我们的message值，而是直接在网页中显示{{message}}
2、v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
3、v-once
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<div>
<input type="text" v-model="msg">
<p v-once>{{msg}}</p>
<p>{{msg}}</p>
</div>
