天天看点

vue再读11-指令解释

vue再读11-指令解释
vue再读11-指令解释
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <!-- 数据渲染界面 -->
    <div id="abc">
        <!-- s所有的指令都以v-开头 -->
        <button v-on:click="fn1()">按钮</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            //vue选项
            //el 
            //当前这个实例所要管理的视图
            //值可以是其他选择器
            //1可以通过fn直接调用
            //2可以通过new对象 方法名调用方法 vm.fn1()
            //3this指向的是实例对象
            //4可以这样做 但是不推荐这样做 可以通过指令调用
            el: '#abc',
            //模板ajax返回的数据
            data: {
                msg: '我是歌谣',
                count: 1,
                age: 15
            },
            methods: {
                fn1: function() {
                    console.log('fn.....')
                },
 
            }
        })
    </script>
</body>
 
</html>      
vue再读11-指令解释