Vue 框架学习(二) 基础

一、生命周期

 

 

参考：https://www.cnblogs.com/qidh/p/11431998.html

 

二、实例属性

1、methods

View Code

 

2、computed：

多次调用的时候使用 computed ，会缓存。而使用函数则会用一次调用一次 

View Code
 

3、filters（具体参照书馆购物案例）通过 | 进行使用

filters: {
  showPrice(price){
    return '￥' + price.toFixed(2);
  }
}
<h2>总价格: {{totalPrice | showPrice}}</h2>

 

三、基础使用

1、内容展示（moustache语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
</head>

<script src = "../js/vue.js"></script>

<body>
    <!--  mustache语法有很多，自行学习  -->
　　 <!-- 可用 v-once 让他只显示第一次的值不改变 -->
    <div id = "text">
        Hello {{message}}
    </div>
    <!--  列表遍历显示  -->
    <div id = "list">
        <ul v-for = "movie in movies">
            <li>{{movie}}</li>
        </ul>
    </div>


    <script>
        let text = new Vue({
            el: '#text',
            data: {
                message: 'Vue.js'
            }
        });

        let list = new Vue({
            el: '#list',
            data: {
                movies: ['大话西游', '赌圣', '星际穿越'],
            }
        })
    </script>
</body>
</html>
View Code

 

2、v-for 和 v-bind 使用：详见案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>

    <style>
        .textcolor{
            color: red;
        }
    </style>
</head>

<body>
    <script src = "../js/vue.js"></script>

    <div id="text">
        <h2 :class="{textcolor: color}">Hello {{message}}</h2>
        <button @click="conventColor">换色</button>
    </div>

    <div id="movies" >
        <ul >
            <li :class="{textcolor: currentIndex === index}" v-for="(m, index) in movies" @click="conventColor(index)">{{index}}: {{m}}</li>
        </ul>
    </div>

    <script>
        let text = new Vue({
            el: '#text',
            data:{
                message: 'v-bind',
                color: true,
            },
            methods: {
                conventColor() {
                    this.color = !this.color;
                }
            }
        });
        let movies = new Vue({
            el: '#movies',
            data: {
                movies:['星际争霸', '盗梦空间', '源代码', '死神来了'],
                currentIndex: 0,
            },

            methods: {
                conventColor(num) {
                    this.currentIndex = num;
                }
            }
        })
    </script>
</body>
</html>
View Code

 

v-for的key使用：

<body>
  <div id ="app">
    <!-- 
      key 给每个节点做一个唯一标识，可以高效的更新虚拟DOM 
      如果没有 key 相当于数组插入，有 key 相当于链表
    -->
    <ul>
      <li v-for="value in letters": key="value">{{value}}</li>
    </ul>
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {
        letters: ['A','B','C','D','E']
      },
      methods: {},
      computed: {},
    });
  </script>
</body>
View Code

 

 

3、动态绑定style：

    <body>
        <div id="app">
            <!-- 如果50px没有单引号就毁在data中寻找对象 -->
            <h2 :style="{fontSizs: '50px', color: finalColor}">
                {{message}}
            </h2>
        </div>

        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: 'Smallstars',
                    finalColor: 'blue',
                }
            })
        </script>
    </body>
View Code

 

posted @ 2020-06-21 16:35  北冥雪  阅读(197)  评论(0)  编辑  收藏  举报