Home Explore Help
Sign In
lovecoding
/
W250913
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 1 day ago
parent
6692413e8d
commit
27ac639537
5 changed files with 274 additions and 1 deletions
Unified View Show Diff Stats
  1. 55 0
      9_vue/10_watch.html
  2. 1 1
      9_vue/7_v-model.html
  3. 74 0
      9_vue/8_生命周期函数.html
  4. 51 0
      9_vue/9_计算属性.html
  5. 93 0
      9_vue/练习2_筛选.html

+ 55 - 0
9_vue/10_watch.html
View File 

@@ -0,0 +1,55 @@
 
+<!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="app">
 
+        <div>{{num}}</div>
 
+        <div>{{arr}}</div>
 
+        <input type="text" v-model.number="num">
 
+        <button @click="change">按钮</button>
 
+    </div>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el:"#app",
 
+            data:{
 
+                num:0,
 
+                arr:[1,2,3,4]
 
+            },
 
+            methods:{
 
+                change(){
 
+                    this.num++;
 
+                    // this.arr.push(5);
 
+                    // this.arr[1] = "hello";
 
+                    // this.arr = ["a","b","c"];
 
+                }
 
+            },
 
+            watch:{
 
+                // 监听data中某个属性变化 监听谁就以谁为方法名
 
+                // 只要num变化了，就会调用num方法
 
+                // 方法中会有两个参数，分别是新值和旧值
 
+                num(newVal,oldVal){
 
+                    console.log(newVal,oldVal);
 
+                },
 
+                // watch 默认只能监听基本数据类型 
+                // 如果要监听数组或对象变化，需要设置deep:true
 
+                // arr:{
 
+                //     // 监听数组或对象变化时，会调用handler方法
 
+                //     handler(){
 
+                //         console.log("arr变化了");
 
+                //     },
 
+                //     // 开启deep监听后，会监听数组或对象中的所有属性
 
+                //     deep:true
 
+                // }
 
+                // arr(){
 
+                //     console.log("arr变化了");
 
+                // }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 1 - 1
9_vue/7_v-model.html
View File 

@@ -31,7 +31,7 @@
 
         new Vue({
 
         new Vue({
 
             el: "#app",
 
             el: "#app",
 
             data: {
 
             data: {
 
-                str: ""
 
+                str: "",
 
             },
 
             },
 
             methods: {
 
             methods: {
 
                 changeStr() {
 
                 changeStr() {

+ 74 - 0
9_vue/8_生命周期函数.html
View File 

@@ -0,0 +1,74 @@
 
+<!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="app">
 
+        <div>{{num}}</div>
 
+        <!-- 如果事件可以用一条js语句执行 可以直接写在事件中 不用定义事件处理函数 -->
 
+        <button @click="num++">按钮</button>
 
+        <button @click="destroyFun">销毁按钮</button>
 
+    </div>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        let vm = new Vue({
 
+            el: "#app",
 
+            data: {
 
+                num: 10
 
+            },
 
+            // 生命周期函数 每一个vue的页面都是会经历一个完整生命过程 在这个过程一些特定节点vue会自动调用一些函数来通知我们是否需要一些操作
 
+
 
+            // 实例化vue之前调用
 
+            beforeCreate() {
 
+                console.log("beforeCreate")
 
+            },
 
+            // 实例化vue之后调用
 
+            // created 一般用作于 刚进入页面从服务端获取数据
 
+            created() {
 
+                console.log("created")
 
+            },
 
+            // 挂载之前调用
 
+            beforeMount() {
 
+                console.log("beforeMount")
 
+            },
 
+            // 挂载之后调用
 
+            // mounted 一般用作于 挂载完成后 对dom元素进行操作
 
+            mounted() {
 
+                console.log("mounted")
 
+            },
 
+            // beforeCreate created beforeMount mounted 这四个函数都是在实例化vue的时候调用的 只要刷新页面 这四个函数就会调用一次
 
+            // 更新之前调用 当data中的数据发生改变时 会调用beforeUpdate函数
 
+            beforeUpdate() {
 
+                console.log("beforeUpdate")
 
+            },
 
+            // 更新之后调用 当data中的数据发生改变时 会调用updated函数
 
+            updated() {
 
+                console.log("updated")
 
+            },
 
+            // 销毁之前调用 当调用vm.$destroy()方法时 会调用beforeDestroy函数
 
+            // 一般情况 离开当前页面会自动销毁当前vue实例 
+            // beforeDestroy 离开页面前做的一些操作 比如 清除定时器 清除事件监听 清除dom元素等
 
+            beforeDestroy() {
 
+                console.log("beforeDestroy")
 
+            },
 
+            // 销毁之后调用 当调用vm.$destroy()方法时 会调用destroyed函数
 
+            destroyed() {
 
+                console.log("destroyed")
 
+            },
 
+            // 自定义方法
 
+            methods: {
 
+                destroyFun() {
 
+                    vm.$destroy()
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 51 - 0
9_vue/9_计算属性.html
View File 

@@ -0,0 +1,51 @@
 
+<!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="app">
 
+        <span>{{num1}}</span> + <span>{{num2}}</span> = <span>{{num3}}</span>
 
+        <br>
 
+        <button @click="changeNum1">num1++</button>
 
+        <button @click="num2++">num2++</button>
 
+    </div>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el:"#app",
 
+            data:{
 
+                num1:1,
 
+                num2:2,
 
+                // num3:3
 
+            },
 
+            methods:{
 
+                changeNum1(){
 
+                    this.num1++;
 
+                    this.num3 = this.num1 + this.num2;
 
+                    // this.num3 = this.num1 + this.num2;
 
+                }
 
+            },
 
+            // computed 计算属性
 
+            // 如果当前计算属性所依赖的值发生变化，那么计算属性会自动重新计算
 
+            computed:{
 
+                num3(){
 
+                    console.log("num3被计算了");
 
+                    return this.num1 + this.num2;
 
+                }
 
+                // num3:{
 
+                //     get(){
 
+                //         console.log("num3被计算了");
 
+                //         return this.num1 + this.num2;
 
+                //     },
 
+                //     set(val){
 
+                //         console.log("num3被设置为了" + val);
 
+                //     }
 
+                // }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 93 - 0
9_vue/练习2_筛选.html
View File 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* css reset */
 
+        ul{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        li{
 
+            list-style: none;
 
+        }
 
+
 
+        ul li{
 
+            display: flex;
 
+            width: 300px;
 
+            justify-content: space-around;
 
+            margin:10px 0;
 
+        }
 
+        ul li:first-child div{
 
+            font-weight: bold;
 
+        }
 
+        ul li:first-child{
 
+            border-bottom: 3px solid black;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <div>
 
+            <input @input="inputHandle" type="text" v-model="searchName">
 
+        </div>
 
+        <ul>
 
+            <li>
 
+                <div>姓名</div>
 
+                <div>性别</div>
 
+                <div>地址</div>
 
+            </li>
 
+            <li v-for="item in list">
 
+                <div>{{item.userName}}</div>
 
+                <div>{{item.sex}}</div>
 
+                <div>{{item.address}}</div>
 
+            </li>
 
+        </ul>
 
+    </div>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        let _data = [
 
+            { id: 1, userName: '李雷', sex: '男', address: '北京市朝阳区' },
 
+            { id: 2, userName: '韩梅梅', sex: '女', address: '上海市浦东新区' },
 
+            { id: 3, userName: '李华', sex: '男', address: '广州市天河区' },
 
+            { id: 4, userName: '王芳', sex: '女', address: '深圳市南山区' },
 
+            { id: 5, userName: '张伟', sex: '男', address: '成都市武侯区' },
 
+            { id: 6, userName: '李娜', sex: '女', address: '重庆市渝中区' },
 
+            { id: 7, userName: '王磊', sex: '男', address: '杭州市西湖区' },
 
+            { id: 8, userName: '刘洋', sex: '女', address: '南京市玄武区' },
 
+            { id: 9, userName: '李强', sex: '男', address: '武汉市江汉区' },
 
+            { id: 10, userName: '王静', sex: '女', address: '西安市雁塔区' },
 
+            { id: 11, userName: '赵雷', sex: '男', address: '天津市河西区' },
 
+            { id: 12, userName: '孙娜', sex: '女', address: '长沙市芙蓉区' },
 
+            { id: 13, userName: '李敏', sex: '男', address: '沈阳市沈河区' },
 
+            { id: 14, userName: '王磊', sex: '女', address: '青岛市市南区' },
 
+            { id: 15, userName: '张强', sex: '男', address: '合肥市庐阳区' },
 
+            { id: 16, userName: '刘洋', sex: '女', address: '南昌市东湖区' },
 
+            { id: 17, userName: '李华', sex: '男', address: '厦门市思明区' },
 
+            { id: 18, userName: '王静', sex: '女', address: '福州市鼓楼区' },
 
+            { id: 19, userName: '赵雷', sex: '男', address: '大连市中山区' },
 
+            { id: 20, userName: '孙娜', sex: '女', address: '宁波市海曙区' }
 
+        ]
 
+        new Vue({
 
+            el:"#app",
 
+            data:{
 
+               list: _data,
 
+               searchName:""
 
+            },
 
+            methods:{
 
+                inputHandle(){
 
+                    // console.log(this.searchName);
 
+                    let newList = _data.filter((item)=>{
 
+                        if(item.userName.includes(this.searchName)){
 
+                            return true
 
+                        }
 
+                    })
 
+                    this.list = newList
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>