zoukankan      html  css  js  c++  java
  • Vue实例

    创建一个vue实例

    <div id="root" @click="handleClick">{{message}}<div>
        
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                message: 'Peng'
            },
            methods:{
                handleClick(){
                    alert("Peng")
                }
            }
        })
    </script>

    vm的构造函数是Vue(vm所属的类是Vue)。

    vm对象封装了对视图的所有操作,包括数据读写、事件绑定、DOM更新(不包括Ajax!)。

    el:是vm实例的属性,定义vue实例接管dom的最外层标签。

    'peng'这个字符串之所以可以成功显示页面上,是因为vm实例接管了id为root的dom,vm实例会对dom的代码进行分析,当发现使用了插值表达式后,就会在data中去寻找对应的值,然后把插值表达式替换成data中的数据。

    因为vm实例接管了#root这个dom,所以可以分析出#root需要绑定handleClick这个事件。当dom被点击的时候,就会自动执行methods中的handleClick方法。

    每个组件都是一个Vue实例,定义全局的Vue组件,必须在定义Vue实例之前,否则无效。

    Vue实例属性和方法以$开头,凡是以$符号开头的,指的都是Vue实例属性或者实例方法。

  • 相关阅读:
    AXI协议(一)
    System Verilog基础(一)
    AHB协议
    验证的概述
    简易APB4 slave实践
    APB协议
    指令跳转与预测
    HDU4405--Aeroplane chess(概率dp)
    BZOJ1419——Red is good(期望dp)
    BZOJ1426----收集邮票(期望dp)
  • 原文地址:https://www.cnblogs.com/manhuai/p/14533972.html
Copyright © 2011-2022 走看看