【复习】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，比如模拟用户登录
在Vue里的data定义isLogin的值，当为true时，显示“你好，XXX”，当为false时，显示“请登录”。
2、v-show
v-show是通过调整css的display属性的属性值，来显示和隐藏节点，其实在HTML渲染时，已经加载了DOM；
当isLogin为true时，显示“哈哈哈”，当为false时，隐藏。
3、两者的区别
v-if：判断是否加载，可以减轻服务器压力，当需要时在加载
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
v-for
1、 v-for
v-for是用来循环data中的数组，来解析重复模板；
2、 基本用法
模板：
{{index}} - {{item}}
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
}
]
}
}
})
然后，在模板中输出
{{index+1}} - {{p.name}} - {{p.age}}
对象的排序函数：
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指令来解决这一问题：
当数据里需要解析HTML标签的时候，v-text是无法输出的，因此，Vue还给我们提供了一个指令：v-html
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
v-on
v-on是用来绑定监听事件的，可以监听DOM触发的一些javascript代码；
<button @click="add">add
上面的两行代码是一个意思，@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、双向数据绑定
模板：
原始文本信息:{{inputValue}}
文本框
v-model:
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、文本区域加入数据绑定
4、多选按钮绑定一个值
5、多选绑定一个数组
6、单选按钮绑定数据
v-bind
v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。
模板：
绑定图片地址
上面两行代码是一个意思，v-bind:src是完整语法，:src是简写；
js:
var vm = new Vue({
...
data(){
return{
imgSrc:"https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
}
}
});
当然，除了绑定图片地址，还可以绑定<a></a>标签的href属性：
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
1、绑定class
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
2、绑定class判断
3、绑定class中的数组
3、绑定class数组
4、绑定class中使用三元表达式判断
4、绑定class三元运算符
5、绑定style
1、绑定style
6、用对象绑定style样式
2、对象绑定style
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值了。
这时并不会输出我们的message值，而是直接在网页中显示{{message}}
2、v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
[v-cloak] {
display: none;
}
{{ message }}
3、v-once
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
{{msg}}
{{msg}}
浙公网安备 33010602011771号