双向绑定例子
{{username}} 和input有默认值(绑定到username),{{username}} 随input输入框输入而变化。

<div id="app">
  <input type="text" v-model="username">
  <p>{{username}}</p>
</div>

<script src="../vue.js"></script>
<script>
 const vm = new Vue({
   el:'#app',
    data:{
      username:'默认值'
    },
 });

</script>

模版
{{变量或者执行函数}} :属性中绑定 @监听

<div id="app">
<h2>1. 双花括号为模板表达式</h2>
<p>{{msg}}</p> <!-- 无v-model时,区分大小写 -->
<p>{{msg.toUpperCase()}}</p>
<p v-html="msg"></p>
<p v-text="msg"></p>

<h2>2. 指令 强制数据绑定,原Html语法绑定为变量</h2>
<!--<img src={{imgurl}} > 标签属性不能用双大括号引用变量   -->
<img v-bind:src="imgurl" >
<img :src="imgurl" alt="">    <!-- 简写   这也是正确写法-->

<h2>3. 指令 绑定事件监听</h2>
<button v-on:click="func1">点击1</button>
<button @click="func1">点击2</button>
<button @click='func2("abc")'>点击3</button>   <!-- 回调参数 按钮绑定的函数所传的参数 -->
<button @click="func2(msg)">点击4</button>  <!-- 回调变量 按钮绑定的函数所传的变量-->

</div>

<script src="../vue.js"></script>
<script>
(function (){
 new Vue({
   el:'#app',
    data:{
      msg:'默认值',
      imgurl:'http://www.woftsun.com/logo.png',
    },
    methods:{
       func1:function () {  //这是比较老的写法
           alert('ok')
       },
       func2(content){
           alert(content,'ES6简写fun语法');
       },
    }
});
})();

</script>

计算属性和监视
计算computed 执行: 【1】初始化 【2】相关data发生改变 。

<body>
<div id="app">
    {{msg + "你好"}}
    {{msg + "你滚"}}
    {{show}}
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    new Vue({
        el:"#app",
        data:{
            msg:"小妹妹"
        },
        computed:{  //计算   初始化显示 或者 data属性发生变化时执行
            show(){
                return this.msg + "很好";
            }
        }
    })
  })();
  </script>

computed小案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>computed案例</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    税前工资: <input type="number" v-model="noTaxMoney">
    <hr>
    保险: <input type="number" v-model="insNum">
    <hr>
    应纳税额=所得额:{{needTaxMoney}}
    <hr>
    累积应纳款:{{realTaxMoney}}
    <hr>
    本月税后收入:{{money}}
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    new Vue({
        el:"#app",
        data:{
            msg:"工资计算器",
            noTaxMoney:0,
            insNum:0
        },
        computed:{
            needTaxMoney(){
                return this.noTaxMoney - 5000 - this.insNum;
            },
            realTaxMoney(){
                let total = 0;
                if(this.needTaxMoney<=36000){
                    total = this.needTaxMoney * 0.03;
                }else{
                    total = this.needTaxMoney * 0.1;
                }
                return total;
            },
            money(){
                return this.noTaxMoney - this.realTaxMoney - this.insNum;
            }
        }
    })
 })();
 </script>

监听:

<div id="app">
    <h1>{{msg}}</h1>
    <h1>{{num}}</h1>
    <button @click="update">+</button>
    <hr>
</div>
(function (){
    new Vue({
        el:"#app",
        data:{
            num:0,
            msg:"哈哈",
            user:{
                name:"",
                age:10
            }
        },
        methods:{
            update(){
                this.num++;
            }
        },
        watch:{
            msg:function(n,o){   //n指的是new 新的值  o指的是old旧值
                console.log(n,0);
            },
            num:function(n,o){
                console.log(n,o);
            },
        }
    })
})();

methods computed watch区别
methods里面定义的函数,是需要主动调用的,而和watch和computed相关的函数,会自动调用,完成我们希望完成的作用
watch擅长处理的场景:一个数据影响多个数据
computed擅长处理的场景:一个数据受多个数据影响

class样式绑定

<head>
<meta charset="UTF-8">
<title>样式绑定</title>
<style>
    .show{
        display: block;
    }
    .hide{
        display: none;
    }
</style>
</head>
<body>
<div id="app">
    <a @click="show = !show">toggle</a>
    <div :class="show?'show':'hide'">
        {{msg}}
    </div>
    <button @click="update">更新</button>
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    new Vue({
        el:"#app",
        data:{
            msg:"哈哈哈",
            color:"background-color:red",
            show:true
        },
        methods:{
            update(){
                this.msg="hello kitty",
                    this.color="background-color:yellow"
            }
        }
    })
 })();
 </script>

自定义指令小案例(拖拽效果)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
</head>
<body>
<div id="app">
    <div v-drag style="width:300px;height:500px;background-color: red"></div>
    <div v-drag style="width:300px;height:500px;background-color: green"></div>
    <div v-drag style="width:300px;height:500px;background-color: blue"></div>
    <div v-drag style="width:300px;height:500px;background-color: yellow"></div>
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    Vue.directive("drag",function (el,bingding) {
        el.onmousedown = function(e){
            el.style.position ="absolute";
            let sx = e.clientX - el.offsetLeft;
            let sy = e.clientY - el.offsetTop;
            document.onmousemove = function(e){
                el.style.left = (e.clientX - sx)+"px";
                el.style.top = e.clientY - sy + "px";
            }
            el.onmouseup = function(){
                document.onmousemove = null;
                el.onmouseup=null
            }
        }
    });
    new Vue({
        el:"#app"
    })
})();
</script>

创建组件

<body>
<div id="app">
    <hello></hello>
    <world></world>
    <hi></hi>
</div>
</body>
</html>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
(function (){
    //局部组件(注册到new vue({components}))
    let hello = {
        template:"<h1>你好啊</h1>",

    };
    //全局组件
    Vue.component("world",{
        template:"<h1>hello</h1>",
        render(h){
            return h("h1",{},"world hello");
        }
    });
    //3.
    let hi = Vue.extend({
        template:"<h1>hi</h1>"
    });
    new Vue({
        el:"#app",
        data:{
            msg:"哈哈"
        },
        components:{
            hello,
            hi
        }
    })
})();
Last modification:October 26th, 2019 at 04:05 pm
来杯coffee吧