吼吼 ，今天其实已经开始了vue的学习
vue语法格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id = "vue_det">
<h1></h1>
</div>
var vm=new Vue({
el:'#vue_det',
data:{
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods:{
details:function(){
return this.site+"-学的不仅是技术，更是梦想！";
}
}
})
<p>data 用于定义属性，实例中有三个属性分别为：site、url、alexa。</p>
<p>methods 用于定义的函数，可以通过 return 来返回函数值。</p>
在Vue构造器中有一个el参数，它是DOM元素中的id，这意味着我们接下来的改动全部在以上指定的div内，div外部不受影响。
|
当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，html视图将也会产生相应的变化。
1
2
3
4
5
6
7
8
9
10
11
12
| var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data // 它们引用相同的对象！
})
document.write(vm.site === data.site) // true
document.write("<br>") // 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
|
除了数据属性，Vue实例还提供了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="vue_det">
<h1>site : Jekyll::Drops::SiteDrop</h1>
</div>
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true
|
vue插值
文本和html
使用v-text指令不解析直接输出字符串，使用v-html指令解析后用于输出字符串的执行结果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="app">
<div v-html="message"></div>
<div v-text="message"></div>
</div>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
```
> 属性绑定
<p> value值的绑定</p>
<p>复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。
单选按钮是直接取值不是逻辑值。</p>
<p>select列表与单选按钮是相似取值</p>
|
new Vue({
el: '#app',
data:{
use: false
}
});
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
|
<p> input的value等于use，值的变化是相互的。即如果勾选后，use=true；</p>
> class的绑定
```
v-bind:class ="{class名1:boolean值，...,class名2:boolean值}"
判断class名1的值，如果为true使用class名1类的样式，否则不使用该类。
<div v-bind:class="{'class1': use}">
</div>
new Vue({
el: '#app',
data:{
use: false
}
});
v-bind:class ="[vue的属性名1,...,vue的属性名n]"
class数组中的vue属性值就是class名。
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
|
style的绑定，与class相似。
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
| <div id="app">
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">菜鸟教程</div>
</div>
new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
|
表达式
Vue.js都提供了完全的JavaScript表达式支持。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app">
<br>
<br>
</div>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
|
指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| v-if指令将根据表达式seen的值(true 或 false )来决定是否插入p元素。
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
new Vue({
el: '#app',
data: {
seen: true
}
})
还有v-else 、v-else-if指令，具有与JavaScript的条件语句相同的含义，
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show指令来根据条件真假来是否展示元素。
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
new Vue({
el: '#app',
data: {
ok: true
}
})
|
v-for指令
v-for="变量名 in 数组名"
变量名是从数组中取出的每一个变量的临时名称，数组名是vue的一个属性名。
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
| <div id="app">
<ul>
<li v-for="value in object">
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
v-for="（变量名1，变量名2）in 数组名"
变量名1是从数组中取出的每一个变量的临时名称，变量名2是从数组中取出的每一个变量的键名，数组名是vue的一个属性名。
<div id="app">
<ul>
<li v-for="(value, key) in object">
:
</li>
</ul>
</div>
v-for="（变量名1，变量名2，变量名3）in 数组名"
变量名1是从数组中取出的每一个变量的临时名称，变量名2是每一个变量的键名，变量名3是每一个变量的下标值，数组名是vue的一个属性名。
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
</li>
</ul>
</div>
|