Vue

基本了解

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue常见指令

1
{{xxx}}		vue一直解析数据的指令

v-bind

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-bind: 表示通知vue在渲染的 DOM 标签时，将bind绑定的属性 和 Vue 实例data中同名属性值保持一致
--------------------------------------------------------------------
<!--v-bind属性绑定--->
<div id="app">
    <!--v-bind-->
    <span v-bind:title="title">xiaowen</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          title:"mimimi"
      }
    })
</script>

绑定图片：
v-bind:src      或者  :src

绑定样式：
v-bind:class  或者 :class

绑定链接：
v-bind:href    或者 :href

PS :除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:），如:value

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
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定功能与v-bind类似， 不过数据可同步改动
--------------------------------------------------------------------
<!--model双向绑定--->
<div id="app">

    <!--  v-bind: 表示数据单项绑定，可以给html标签属性绑定参数，如果html属性值改变，vue中data数据值不会变动  -->   
    v-bind：<input type="text" name="username" v-bind:value="username">

    <!--v-model:表示双向绑定，绑定数据功能跟v-bind是一样的， 区别在如果htmle属性值改变， vue的data数据也会变动-->
    v-model:<input type="text" name="username" v-model:value="username">

    <br>
    <span>{{username}}</span>

</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            username:"xiaowen"
        }
    })
</script>

v-html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{{属性}}  会原样输出数据属性，如果说数据是带有html格式的数据时，此时需要使用v-html指令
<div id="app" >
    {{content}}
</div>

v-html ： 将html格式数据渲染出来
-->
<div id="app" v-html="content">
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            content:"<span style='color: red;'>这是内容</span>"
        }
    })
</script>

v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
判断指令
-----------------------------------------------------------
<!--age是否大于18，等于18，小于18-->
<div id="app">
    <span v-if="age > 18">欢迎光临</span>
    <span v-else-if="age < 18">18禁</span>
    <span v-else="age == 18">有点纠结</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          age:18
      }
    })
</script>

v-for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
		<li v-for="item2 in arr">{{item2}}</li>
    </ul>
    <!--带下标-->
    <ul>
        <li v-for="(item, index) in arr">{{index}}-{{item}}</li>
		<li v-for="(item2, index2) in list">{{index2}}-{{item2}}</li>
    </ul>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:["a","b","c"]
          list: [
                {id: 1, name: "糖糖"},
                {id: 2, name: "菠菠"},
                {id: 3, name: "烈烈"}
          ]
      }
    })
</script>

v-on

1
2
3
4
5
事件绑定指令， 可缩写成@

比如：
v-on:click       //绑定点击事件 
@click

vue事件

事件函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var vue = new Vue({
      el:"#app",
      data:{
          list:[
              {id: 1, name: "糖糖"},
              {id: 2, name: "菠菠"},
              {id: 3, name: "烈烈"}
          ]

      },
      methods:{
          choseClick : function () {
              alert(1);
          },
          changeSelect : function(){
              alert(2);
          }
      }
    })

事件对象

1
2
3
4
5
6
7
8
9
10
11
12
13
事件信息封装对象： 使用 $event 标记

   <ul>
        <li v-for="u in list" v-on:click="choseClick($event)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>

    methods:{
        choseClick:function (e) {
            alert(1);
        }
    }

获取事件源

1
2
3
4
5
6
7
8
9
10
11
12
13
被触发事件的标签元素

   <ul>
        <li v-for="u in list" v-on:click="choseClick($event)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>

    methods:{
        choseClick:function (e) {
            console.log(e.currentTarget);
        }
    }

事件传参

1
2
3
4
5
6
7
8
9
10
11
12
13
调用事件函数传入参数

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>

   methods:{
          choseClick:function (e, id, name) {
              console.log(e.currentTarget, id, name);
          }
      }

vue的属性

el

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
用来指示vue编译器从什么地方开始解析 vue的语法

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

data

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
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

methods

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
放置页面中的业务逻辑，js函数一般都放置在methods中

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

filters

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
44
45
46
vue过滤器集合

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
        </li>
    </ul>

局部：
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

全局：
// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('dataFormat', function (value) {
    return  ....
})

mounted

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
是一个函数， 在vue实例创建完成后被立即调用（html加载完成后执行）

一般用处初始化data中的数据

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

created

是一个函数， 在vue实例创建完成后被立即调用（html加载完成之前，执行）

computed

用来计算

template

用来设置模板，会替换页面元素，包括占位符

render

创建真正的Virtual Dom

watch

监听data中数据的变化

Vue生命周期