Vue01-创建Vue实例以及各选项含义

1、创建Vue实例Vue实例：通过new关键字实例化Vue（{}）构造函数<script>var vm = new Vue({//选项});Vue实例配置对象：data：Vue实例数据对象。methods：定义Vue示例中的方法。components：定义子组件。computed：计算属性。filters：过滤器。el：唯一根元素。watch：监听数据变化。2、el唯一根标签在创建Vu

杨杨卡不答

3046人浏览 · 2021-08-28 10:59:44

杨杨卡不答 · 2021-08-28 10:59:44 发布

1、创建Vue实例

Vue实例：通过new关键字实例化Vue（{}）构造函数

<script>
 var vm = new Vue({
	//选项
});

Vue实例配置对象：

data：Vue实例数据对象。
methods：定义Vue示例中的方法。
components：定义子组件。
computed：计算属性。
filters：过滤器。
el：唯一根元素。
watch：监听数据变化。

2、el唯一根标签

在创建Vue实例时，el表示唯一根标签，通过指定class或者id选择器可以用来将页面结构与Vue实例对象vm进行绑定。
比如，如果el绑定了一个div，那么Vue就可以调用div以及div内部的子元素，div就作为Vue的一个根元素。
案例实现
唯一根元素与div绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\Young\Desktop\VUE\js\vue.js"></script>
</head>
<body>
    <div id="app">{{name}}</div>

    <script>
        var vm = new Vue({
            el:'#app',//通过el与div绑定
            data:{name:"Vue实例创建成功"}
        });
    </script>
</body>
</html>

总结：

el选项表示：当前Vue实例绑定的页面元素。
绑定的这个元素，作为Vue实例在界面上的根元素。
el选项的值：id或类选择器。
注意：Vue的是数据只能在el绑定的元素内部使用。

3、data初始数据

data初始数据：Vue实力的数据对象为data，Vue会将data的属性转换为getter，setter，从而让data的属性能够响应数据变化。
与js相比，不需要程序员自己去实例中取数据，只需要程序员写插值表达式显示，由Vue来获取数据。
案例实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\Young\Desktop\VUE\js\vue.js"></script>
</head>
<body>
    <div id='app'>
        <p>{{name}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'data初始数据'
            }
        });
        //js方法得到
        console.log(vm.$data.name) //从vm中的data里提取name（$data就是此vm的data，还有$el）
        console.log(vm.name)//$data可省略
    </script>
</body>
</html>

总结

data选项表示：当前Vue实例可以使用的数据。
data选项的值：对象，对象中可以定义多个数据。

4、methods定义方法

methods选项用来定义方法，通过Vue实例可以直接访问这些方法
在定义的方法中，this指向Vue实例本身
定义在methods选项中的方法可以作为页面中的事件处理函数使用
当事件触发后，执行相应的事件处理函数

案例实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\Young\Desktop\VUE\js\vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click='showInfo'>请单击</button>
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'原始值'
            },
            methods:{
                showInfo:function(){
                    this.msg = '点击之后的内容';
                }
            }
            
        });
    </script>
</body>
</html>

总结

methods选项表示：当前Vue实例可以用到的方法
methods选项的值：对象，对象中定义方法

5、computed计算属性

computed计算属性：计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

案例展示：根据商品单价计算出商品的总价格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\Young\Desktop\VUE\js\vue.js"></script>
</head>
<body>
    <div id="app">
        <p>总价格：{{totalPrice}}</p>
        <p>价格：{{price}}</p>
        <p>数量：{{num}}</p>
        <div>
            <button @click="num==0?0:num--">
                减少数量
            </button>
            <button @click="num++">
                增加数量
            </button>
            <button @click="logTotalPrice">
                打印总价格
            </button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                price:20,
                num:0
            },
            computed:{//计算属性，虽然叫属性，但其实是一个方法，只不过在用的时候当属性来使用
                totalPrice(){
                    console.log("TotalPrice计算属性执行了");
                    return this.price * this.num;
                }
            },
            methods:{
                logTotalPrice(){
                    console.log('TotalPrice的结果是：'+this.totalPrice);
                }
            }
        });
    </script>
</body>
</html>

computed计算属性的计算结果会被存入到缓存中去，也就是说一旦程序执行，我们定义的属性值，比如说TotalPrice有一个初始值，再执行打印总价值方法就会从缓存中读取TotaPrice的值。效果如下
在这里插入图片描述
右侧的console界面提示，在程序刚开始的时候我们并没有对TotalPrice进行任何操作，但是依然执行了TotalPrice计算属性。（computed计算属性虽然说是属性，但其实是方法，只不过是当作属性来使用）
如果我们不对其进行操作而直接执行打印总价格方法的话，结果是读取到的TotalPrice的初始值，并存入缓存中，下次如果TotalPrice的值未变化那么执行打印总价格方法还是从缓存中读取数据。

总结

computed选项表示：当前Vue实例可以用到的计算属性
conputed选项的值：对象，对象中定义方法
应用场景：当有一些数据需要随着其他数据变动而变动的时候就需要使用computed计算属性
注意事项：
计算属性定义时是一个方法，但是当作属性使用；
计算属性需要将结果返回；
计算属性具有缓存，意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中读取

6、watch状态监听

watch状态监听：用来监测Vue示例中的数据变动。
专门用来检测data数据变化的

案例展示：通过watch获取cityName的新值和旧值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\Young\Desktop\VUE\js\vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='cityName'>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                cityName:'shanghai'
            },
            watch:{
                cityName(newValue,oldValue){
                    console.log(newValue,oldValue)
                }
            }
        });
    </script>
    
</body>
</html>

重点

watch选项表示：监测data选项中的数据变化
watch选项的值：对象，对象中定义的方法
应用场景：要在数据变化的同时进行异步操作或者比较大的开销时使用
注意：watch是监测data的数据变化，watch的方法名必须与data的属性名一致（如上例：data中的数据名为cityName，那么watch中的方法名就必须为cityName）

7、filters过滤器

filters过滤器主要是对数据进行格式化，比如字符串首字母变大写，日期格式化等。
案例实现：在插值表达式中使用filters过滤器，将小写字母转换成大写字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\Young\Desktop\VUE\js\vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:id="dataId | formatId">helloworld</div>
</div>    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                dataId:'dff1'
            },
            filters:{
                formatId(value) {
                    return value ? value.charAt(1) + value.indexOf('d') : '';
                }
            }
        });
    </script>
</body>
</html>

总结

filters选项表示：对data选项中的数据进行格式化。
filters选项的值：对象，对象中的方法。
注意：过滤器函数必须定义第一个参数，此参数就是使用过滤器的数据，将格式化的结果返回。
插值表达式使用：{{data属性名 | 过滤器名称}}。
属性绑定使用：v-bind：id=‘data属性名 | 过滤器名称’

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^