(二) 实例方法

2018-02-15  本文已影响0人  我拥抱着我的未来

本节知识点

$mount方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
      <hello></hello>
  </div>
</body>
<script>
    var hello = Vue.extend({
        template:`<p style="color:red;">{{message}}----{{a}}</p>`,
        data:function(){
            return {
                message:"实例化练习"
            }
        },
        props:["a"]
    })
    var vm = new hello({propsData:{a:"测试props"}}).$mount("hello");
</script>
</html>

$destroy()卸载方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
      <hello></hello>
  </div>
<button onclick="destroy()">卸载挂载</button>
</body>
<script>
    var hello = Vue.extend({
        template:`<p style="color:red;">{{message}}----{{a}}</p>`,
        data:function(){
            return {
                message:"实例化练习"
            }
        },
        props:["a"]
    })
    var vm = new hello({propsData:{a:"测试props"}}).$mount("hello");
    function destroy(){
        vm.$destroy();
    }
</script>
</html>

$forceUpdate() 更新方法

vm.$forceUpdate()
上一篇下一篇

猜你喜欢

热点阅读