|
|
@@ -0,0 +1,67 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <h1>{{num}}</h1>
|
|
|
+ <!-- 如果事件处理函数内只有一行代码 那么可以直接写在事件后边 不用定义事件处理函数 -->
|
|
|
+ <button type="button" @click="num++">增加</button>
|
|
|
+ <div>
|
|
|
+ <p>姓名{{obj.name}}</p>
|
|
|
+ <p>年龄{{obj.age}}</p>
|
|
|
+ </div>
|
|
|
+ <button type="button" @click="obj.age++">年龄增加</button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data:{
|
|
|
+ num: 0,
|
|
|
+ obj:{
|
|
|
+ name:'张三',
|
|
|
+ age:18
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // watch监听属性值的变化
|
|
|
+ watch:{
|
|
|
+ // 把需要监听的属性值写在watch对象中 以函数的形式
|
|
|
+ // 函数的参数是新值和旧值 （修改之后值，修改之前值）
|
|
|
+ num(newVal,oldVal){
|
|
|
+ console.log(newVal,oldVal);
|
|
|
+ if(newVal>10){
|
|
|
+ // this.num=10;
|
|
|
+ console.log('num不能大于10');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 如果监听的是一个对象属性变化 那么需要使用deep:true来监听对象的属性值的变化
|
|
|
+ // obj(newVal,oldVal){
|
|
|
+ // console.log(newVal,oldVal);
|
|
|
+ // }
|
|
|
+ // 方法一
|
|
|
+ // 改为对象的形式
|
|
|
+ // 可以监听对象中所有属性的变化
|
|
|
+ // 数组监听同样需要使用deep:true来监听数组的值的变化
|
|
|
+ // obj:{
|
|
|
+ // // 监听对象的属性值变化
|
|
|
+ // handler(newVal,oldVal){
|
|
|
+ // console.log(newVal,oldVal);
|
|
|
+ // },
|
|
|
+ // // 监听对象的属性值变化
|
|
|
+ // deep:true
|
|
|
+ // }
|
|
|
+ // 方法二
|
|
|
+ // 只能监听对象中具体某一个属性的变化
|
|
|
+ "obj.age":(newVal,oldVal)=>{
|
|
|
+ console.log(newVal,oldVal);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
