Vue的内部指令
在使用Vue组件之前，需要先将Vue包，导入到文件中
< script src=”assets/vue.js”>< /script>
Vue与组件绑定(最基础)
1
2
3
4
5
6
7
8
9
10
11
12
13
| </head><body>
<h1>Hello World</h1>
<hr>
<div id="app">{{message}}</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello world!'
}
})
</script>
|
异常处理
vue : 无法加载文件 C:\Users\1111111\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本
这是你笔记本禁止运行脚本，解决办法
1
2
3
4
5
| 1.管理员身份打开powershell
2.输入set-ExecutionPolicy RemoteSigned
3、选择Y 回车，就好了
|
v-if v-else v-show指令
v-if和v-else的使用
v-if是vue的一个内部指令，指令用在我们的Html中
v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态，在用户登陆后显示用户名称。
关键代码:
1
| <div v-if="isLogin">你好,vue!</div>
|
完整代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="assets/vue.js"></script>
<title>Document</title>
</head>
<body>
<h1>v-if 判断是否加载</h1>
<hr>
<div id="app">
<div>
<div v-if="isLogin">你好:vue</div>
<div v-else>请登录后操作</div>
</div>
<div>
<div v-show="isLogin">你好:Vue</div>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isLogin:true
}
})
</script>
</body>
</html>
|
这里我们在Vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：vue，如果为false时，就显示请登录后操作。
v-show的使用
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
1
2
3
| <div v-show="isLogin">
你好:Vue
</div>
|
v-if和v-show的区别：
- v-if：判断是否加载，可以减轻服务器的压力，在需要时加载
- v-show:调整css display属性，可以使客户端操作更加流畅
V-for指令：解决模板循环问题
模板写法
1
2
3
4
5
6
7
8
| <li v-for="item in items"></li>
<script>
new Vue({
el:'#app',
data:{
items:[4,9,2,8,189,18,35,25,0]
}
});
|
这是一个最基本的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，你需要哪个html标签循环，v-for就写在那个上边。
排序
我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。
用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script>
new Vue({
el:'#app',
data:{
items:[4,9,2,8,189,18,35,25,0]
},
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
});
function sortNumber(a,b){
return a-b
}
</script>
|
对象循环输出与排序
我们上边循环的是数组，那么我们来看一个对象类型的循环是如何输出的。
我们先定义个数组，数组里面是对象数据。
1
2
3
4
5
6
| items: [
{ name: 'zhangsan', age: 32 },
{ name: 'lisi', age: 30 },
{ name: 'wangwu', age: 21 },
{ name: 'maliu', age: 45 }
]
|
在模板中输出
1
2
3
4
5
| <ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>
|
加入索引序号：
1
2
3
4
5
6
7
8
9
| //数组对象方法排序:
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中进行调用排序
1
2
3
| sortStudent:function(){
return sortByKey(this.students,'age');
}
|
注意：vue低版本中 data里面的items和computed里面可以一样，但是高版本，是不允许相同名称。根据自己版本的不同，请修改代码。
v-text和v-html
我们已经会在html中输出data中的值了，我们已经用的是,这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码：
1
| <span>{{ message }}</span>=<span v-text="message"></span><br/>
|
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
1
| <span v-html="msgHtml"></span>
|
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。 完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="assets/vue.js"></script>
<title>V-text和V-html演示实例</title>
</head>
<body>
<hr>
<div id="app">
<p v-text="message">hello</p>
<span v-html="msgHtml">abc</span>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello Vue',
msgHtml:'<h2>welcome to Vue world!</h2>'
}
})
</script>
</body>
</html>
|
v-on：绑定事件监听器
v-on就是监听事件,可以用v-on指令监听DOM事件来触发一些JavaScript代码。
使用绑定事件监听器，编写一个加分减分的程序
程序代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on 事件绑定案例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h2>v-on 事件绑定</h2>
<hr>
<div id="app">
商品数量： <button v-on:click="sub">-</button>
<span v-text="count"></span>
<button v-on:click="plus">+</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
count:1
},
methods:{
sub:function(){
this.count-- ;
},
plus:function(){
this.count++;
}
}
})
</script>
</body>
</html>
|
使用@替代v-on
我们的v-on 还有一种简单的写法，就是用@代替。
1
| <button @click="plus">+</button>
|
其他事件绑定
我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。 绑定事件写法：
1
| <input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
|
javascript代码：
1
2
3
| onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
|
因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。
你也可以根据键值表来定义键盘事件。
v-model指令
v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
双向数据绑定代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model 双向数据绑定</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h2>v-model 双向数据绑定</h2>
<hr>
<div id="app">
<pre>
第一个数：{{num1}}
第二个数：{{num2}}
计算结果：{{result}}
</pre>
<hr>
number1：<input type="text" name="num1" id="num1" v-model="num1"><br>
number2：<input type="text" name="num2" id="num2" v-model="num2"><br>
计算：<button v-on:click="plus">加</button>
<script>
var app = new Vue({
el:'#app',
data:{
num1:10,
num2:20,
result:30
},
methods:{
plus:function(){
this.result = parseInt(this.num1) + parseInt(this.num2) ;
}
}
})
</script>
</div>
</body>
</html>
|
修饰符
- .lazy：取代input监听change事件
- .number：输入字符串转为数字
- .trim:输入去掉首尾空格
文本区域加入数据绑定
1
| <textarea < cols="30" rows="10" v-model="message"></textarea>
|
多选按钮绑定一个值
1
2
3
| <h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>
|
多选绑定一个数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div>
<h2>多选绑定一个数组</h2>
<p>{{hobbys}}</p>
<hr>
<p>
hobby:
<input type="checkbox" value="basketball" id="hb1" v-model="hobbys"/>
<label for="hb1">篮球</label>
<input type="checkbox" value="vollerball" id="hb2" v-model="hobbys"/>
<label for="hb2">排球</label>
<input type="checkbox" value="football" id="hb3" v-model="hobbys"/>
<label for="hb3">足球</label>
</p>
</div>
|
单选按钮绑定数据
1
2
3
4
5
6
| <h3>单选按钮绑定</h3>html
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
|
v-bind 指令
v-bind是处理HTML中的标签属性的，例如
html文件：
1
2
3
| <div id="app">
<img v-bind:src="imgSrc" width="200px">
</div>
|
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。
js文件：
1
2
3
4
5
6
| var app=new Vue({
el:'#app',
data:{
imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
}
})
|
我们在data对象在中增加了imgSrc属性来供html调用。
v-bind 缩写
1
| <!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a>xml
|
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
1
| <div :class="className">1、绑定classA</div>
|
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
1
| <div :class="{classA:isOk}">2、绑定class中的判断</div>
|
3、绑定class中的数组
1
| <div :class="[classA,classB]">3、绑定class中的数组</div>
|
4、绑定class中使用三元表达式判断
1
| <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
|
5、绑定style
1
| <div :style="{color:red,fontSize:font}">5、绑定style</div>
|
6、用对象绑定style样式
1
| <div :style="styleObject">6、用对象绑定style样式</div>
|
1
| var app=new Vue({ el:'#app', data:{ styleObject:{ fontSize:'24px', color:'green' } }})javascript
|
其他内部指令(v-pre & v-cloak & v-once)
v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
1
| <div v-pre>{{message}}</div>
|
这时并不会输出我们的message值，而是直接在网页中显示
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
1
| [v-cloak] { display: none;}
|
1
| <div v-cloak> {{ message }}</div>
|
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
1
| <div v-once>第一次绑定的值：{{message}}</div><div><input type="text" v-model="message"></div>
|
