Vue语法格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <div id = "vue_det">
 	<h1>{{details()}}</h1>
 </div>

 var vm=new Vue({
el:'#vue_det',
data:{
  site: "菜鸟教程",
  url: "www.runoob.com",
  alexa: "10000"
},
methods:{
  details:function(){
    return  this.site+"-学的不仅是技术，更是梦想！";
  }
}
 })
 data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
 methods 用于定义的函数，可以通过 return 来返回函数值。
 {{ }} 用于输出对象属性和函数返回值。
 在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 : {{site}}</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插值

  • v-cloak

v-cloak隐藏未编译的变量，即插值不等式；直到Vue实例被读取完毕。

  • 文本和html

使用v-text指令不解析直接输出字符串，使用v-html指令解析后用于输出字符串的执行结果：

1
2
3
4
5
6
7
8
9
10
11
 <div id="app">
   <div v-html="message"></div>
<div v-text="message"></div>
 </div>

 new Vue({
   el: '#app',
   data: {
     message: '<h1>菜鸟教程</h1>'
   }
 })
  • 属性绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
value值的绑定
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。
单选按钮是直接取值不是逻辑值。
select列表与单选按钮是相似取值。
<input type="checkbox" v-model="use">
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>

new Vue({
  el: '#app',
  data:{
    use: false
  }
});

input的value等于use，值的变化是相互的。即如果勾选后，use=true；
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
 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'
   }
 })
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
 style的绑定，与class相似。

 <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'
     }
   }
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 表达式
 Vue.js都提供了完全的JavaScript表达式支持。
 <div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
 </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
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之后。
1
2
3
4
5
6
7
8
9
10
11
v-show指令来根据条件真假来是否展示元素。
<div id="app">
  <h1 v-show="ok">Hello!</h1>
</div>

new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
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
v-for指令
v-for="变量名 in 数组名"
变量名是从数组中取出的每一个变量的临时名称，数组名是vue的一个属性名。
<div id="app">
  <ul>
    <li v-for="value in object">
      {{ value }}
    </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">
      {{ key }} : {{ value }}
    </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">
      {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>