vue.js学习2

Posted on | In |

how2j

8.监听属性 watch

  • 通过v-model-number 将输入数据装换成可计算的number对象
  • 用vue的watch属性监控数据对象值的变化
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;

}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>

<div id="div1">

    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>      
        <tr>
            <td align="center" colspan="2">
            汇率： <input type="number" v-model.number="exchange" />
            </td>
        </tr>

        <tr>

            <td align="center">
                ￥: <input type="number" v-model.number = "rmb"  />
            </td>
            <td align="center">
                $: <input type="number" v-model.number = "dollar"   />
            </td>
        </tr>
    </table>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0,
          dollar:0
      },
      watch:{
          rmb:function(val) {
              this.rmb = val;
              this.dollar = this.rmb / this.exchange;
          },
          dollar:function(val) {
              this.dollar = val;
              this.rmb = this.dollar * this.exchange;
          },
      }

    })

</script>

9.过滤器属性 filters

9.1 一个过滤器

  • eg:输入字符串 首字母大写
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
47
48
49
50
51
52
53
54
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
table tr td{
    border:1px solid gray;
    padding:10px;

}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>

<div id="div1">

    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>      
        <tr>
            <td align="center">
                <input v-model= "data"  />
            </td>
            <td align="center">
                {{ data|capitalize }}
            </td>
        </tr>
    </table>

</div>

<script>

new Vue({
      el: '#div1',
      data: {
          data:''
      },
      filters:{
          capitalize:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.substring(1)
          }
      }
    })

</script>

9.2 多个过滤器

  • eg:首字母大写+尾字母大写
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
<td align="center">
                {{ data|capitalize|capitalizeLastLetter }}
            </td>
            <script>

            new Vue({
                  el: '#div1',
                  data: {
                      data:''
                  },
                  filters:{
                      capitalize:function(value) {
                            if (!value) return '' //如果为空，则返回空字符串
                            value = value.toString()
                            return value.charAt(0).toUpperCase() + value.substring(1)
                      },
                      capitalizeLastLetter:function(value) {
                            if (!value) return '' //如果为空，则返回空字符串
                            value = value.toString()
                            return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
                      }
                  }
                })

            </script>
```      

### 9.3 全局过滤器
- 解决问题：过滤器是定义在Vue对象里的。 但是有时候，很多不同的页面都会用到相同的过滤器
- 所以在不停vue对象也能调用

```java
Vue.filter('capitalize', function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
})
Vue.filter('capitalizeLastLetter', function (value) {
	if (!value) return '' //如果为空，则返回空字符串
	value = value.toString()
	return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
})

10.组件

10.1 组件是什么？

  • 只用做一个模板，然后照着这个模板，传递不同的参数就可以看到不同的产品展示了。
  • 这个模板，就是组件。

10.2 局部组件

  • 定义components:{ ‘product’:{….}}
  • 调用即可
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
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>

<script>
new Vue({
  el: '#div1',
  components:{
      'product':{
          template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
      }
  }
})
</script>
```            

### 10.3 全局组件
- 定义类似全局过滤器 调用方式一样

```Java
Vue.component('product', {
	  template: '<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
	})

10.4 参数

  • 给模板传参
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
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })
```    

```Java
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product>
    <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product>
    <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
</div>

<script>
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })

new Vue({
  el: '#div1'
})
</script>

10.5 动态参数

1
2
3
4
<div id="div1">
    组件外的值：<input v-model="outName" ><br>
    <product v-bind:name="outName"></product>
</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
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    组件外的值：<input v-model="outName" ><br>
    <product v-bind:name="outName"></product>
</div>

<script>
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })

new Vue({
  el: '#div1',
  data:{
      outName:'产品名称'
  }
})
</script>

10.6 自定义事件

  • 就是上面的例子+sale++事件
1
2
3
4
5
methods:{
          increaseSale:function(){
              this.sale++
          }
      }
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
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮" sale="10" ></product>
    <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包" sale="20" ></product>
    <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮" sale="30" ></product>
</div>

<script>
Vue.component('product', {
      props:['name','sale'],
      template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
      methods:{
          increaseSale:function(){
              this.sale++
          }
      }
    })

new Vue({
  el: '#div1'
})
</script>

10.7 遍历json数组为多个组件实例

  • 准备json数组
1
2
3
4
5
products:[
          {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
          {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
          {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
          ]
  • v-bind单向属性绑定 v-model双向绑定
  • 用v-for取出单个product 并与组件product参数绑定
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
 <product v-for="item in products" v-bind:product="item"></product>
```          

```Java
<script src="http://how2j.cn/study/vue.min.js"></script>

<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

<div id="div1">
    <product v-for="item in products" v-bind:product="item"></product>
</div>

<script>
Vue.component('product', {
      props:['product'],
      template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
      methods:{
          increaseSale:function(){
              this.product.sale++
          }
      }
    })

new Vue({
  el: '#div1',
  data:{
      products:[
                {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
                {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
                {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
                ]
  }
})
</script>

11.自定义指令 Vue.directive

  • 区别与vue提供的指令如v-for v-if v-bind v-model

    11.1 简单例子

1
2
3
4
Vue.directive('xart', function (el) {
	el.innerHTML = el.innerHTML + ' ( x-art ) '
	el.style.color = 'pink'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

    <div v-xart> 好好学习，天天向上 </div>

</div>

<script>

Vue.directive('xart', function (el) {
    el.innerHTML = el.innerHTML + ' ( x-art ) '
    el.style.color = 'pink'
})

new Vue({
  el: '#div1'
})
</script>

11.2 带参数的自定义指令

  • 可以通过传参 调用指令取出参数 按照希望的方式显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

    <div v-xart="{color:'red',text:'best learning video'}"> 好好学习，天天向上 </div>

</div>

<script>

Vue.directive('xart', function (el,binding) {
    el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
    el.style.color = binding.value.color
})

new Vue({
  el: '#div1'
})
</script>

11.3钩子函数

  • 没看懂
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
<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">

    <div v-xart:hello.a.b="message"> </div>

</div>

<script>
Vue.directive('xart', {
      bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
              'name: '       + s(binding.name) + '<br>' +
              'value: '      + s(binding.value) + '<br>' +
              'expression: ' + s(binding.expression) + '<br>' +
              'argument: '   + s(binding.arg) + '<br>' +
              'modifiers: '  + s(binding.modifiers) + '<br>' +
              'vnode keys: ' + Object.keys(vnode).join(', ')
      },

      update: function (newValue, oldValue) {
        // 值更新时的工作
        // 也会以初始值为参数调用一次
      },
      unbind: function () {
        // 清理工作
        // 例如，删除 bind() 添加的事件监听器
      }
    })

new Vue({
  el: '#div1',
  data:{
      message:'hello vue.js'
  }
})
</script>

12.路由

  • vue.js 里的路由相当于就是局部刷新。

    12.1 vue-router.min.js

  • 为了实现路由，需要一个额外的库： vue-router.min.js

    12.2 路由代码实例

  • router-link 相当于就是超链 to 相当于就是 href
    -
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
47
48
49
50
<div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链
            to 相当于就是 href
        -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>

    <div class="workingRoom">
        <!--
            点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
         -->
         <router-view></router-view>   
    </div>

</div>
<script>
    /*
    * 申明三个模板( html 片段 )
    */
    var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };
    /*
    * 定义路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user，没有这个就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    */
    new Vue({
        el:"#app",
        router
    })

</script>