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.js # javascript # html5
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue