Home Esplora Aiuto
Accedi
lovecoding
/
VIP28
9
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

new

zsydgithub 1 anno fa
parent
da900834b6
commit
377386edb1
5 ha cambiato i file con 328 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 71 0
      Vue/10_v-bind.html
  2. 106 0
      Vue/11_todolist.html
  3. 45 0
      Vue/12_set.html
  4. 45 0
      Vue/13_computed.html
  5. 61 0
      Vue/14_watch.html

+ 71 - 0
Vue/10_v-bind.html
Vedi File 

@@ -0,0 +1,71 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    .aa{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+    .bb{
 
+      color: white;
 
+      font-size: 50px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <button @click="change">change</button>
 
+
 
+    <!-- v-bind  动态绑定属性 -->
 
+    <!-- <div v-bind:id="myName"></div> -->
 
+    <div :id="myName"></div>
 
+    <!-- <div :class="{aa:isA,bb:isB}">11111111111111</div> -->
 
+
 
+    <!-- <div :class="[flag?class1:'',class2]"></div> -->
 
+
 
+
 
+    <div style="width: 200px;height:300px"></div>
 
+    <div :style="{color: color1}"></div>
 
+
 
+
 
+    <div :style="[s1,s2]">xixixixixixiixiixxi</div>
 
+
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: '#app',
 
+      data: {
 
+        myName: 'zs',
 
+        isA: true,
 
+        isB: true,
 
+        flag: false,
 
+        class1: 'aa',
 
+        class2: 'bb',
 
+        color1: 'green',
 
+        s1: {
 
+          width: '200px',
 
+          height: '300px'
 
+        },
 
+        s2:{
 
+          background: 'red'
 
+        }
 
+
 
+      },
 
+      methods: {
 
+        change(){
 
+          this.myName = 'lisi'
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 106 - 0
Vue/11_todolist.html
Vedi File 

@@ -0,0 +1,106 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #app {
 
+      width: 500px;
 
+    }
 
+
 
+    .close {
 
+      float: right;
 
+    }
 
+    .active{
 
+      background: red;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <h2>todoList</h2>
 
+    <hr>
 
+    <div>
 
+      名称: <input type="text" v-model="name">
 
+      价格: <input type="text" v-model="price">
 
+      <button @click="add">提交</button>
 
+    </div>
 
+    <div>
 
+      <input type="text" v-model="searchVal">
 
+      <button @click="search">搜索</button>
 
+    </div>
 
+    <ul>
 
+      <li v-for="(obj,index) in list" :class="{active: obj.isChecked}" v-show="obj.isShow">
 
+        <input type="checkbox" v-model="obj.isChecked">
 
+        <span>{{obj.name}}</span>
 
+        <span>{{obj.price}}</span>
 
+        <span class="close" @click="del(index)">[X]</span>
 
+      </li>
 
+    </ul>
 
+    <div>
 
+      <span>总价:{{total()}}</span>
 
+    </div>
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: '#app',
 
+      data: {
 
+        list: [{
 
+          name: '苹果',
 
+          price: 5,
 
+          isChecked: false,
 
+          isShow: true
 
+        }, {
 
+          name: '香蕉',
 
+          price: 8,
 
+          isChecked: false,
 
+          isShow: true
 
+        }],
 
+        name: '',
 
+        price: '',
 
+        searchVal: ''
 
+      },
 
+      methods: {
 
+        add() {
 
+          this.list.push({
 
+            name: this.name,
 
+            price: this.price,
 
+            isChecked: false,
 
+            isShow: true
 
+          })
 
+          this.name = ''
 
+          this.price = ''
 
+        },
 
+        total(){
 
+          var sum = 0
 
+          this.list.forEach((obj)=>{
 
+            if(obj.isChecked){
 
+              sum += obj.price * 1
 
+            }
 
+          })
 
+          return sum
 
+        },
 
+        search(){
 
+          this.list.forEach((obj)=>{
 
+            if(obj.name.includes(this.searchVal)){
 
+              obj.isShow = true
 
+            } else {
 
+              obj.isShow = false
 
+            }
 
+          })
 
+          this.searchVal = ''
 
+        },
 
+        del(index){
 
+          this.list.splice(index,1)
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 45 - 0
Vue/12_set.html
Vedi File 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <button @click="change()">修改</button>
 
+    <ul>
 
+      <li v-for="(val,index) in arr"> 
+        {{val}}
 
+        {{index}}
 
+      </li>
 
+    </ul>
 
+    {{person.name}}
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: '#app',
 
+      data:{
 
+        arr: ['a','b','c','d','e'],
 
+        person: {
 
+          name: 'zs'
 
+        }
 
+      },
 
+      methods:{
 
+        change(){
 
+          console.log(1111)
 
+          // this.arr[0] = 'x'
 
+          //在Vue中 不能使用数组[索引] 这样的方式修改数组
 
+          //Vue.set(data数据,修改值的索引,修改的值)
 
+          Vue.set(this.person,'name','lisi')
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 45 - 0
Vue/13_computed.html
Vedi File 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div id="app">
 
+    {{msg}}
 
+    <br>
 
+    {{msg.split('').reverse().join('')}}
 
+    <br>
 
+    方法 : {{newMsg1()}}
 
+    <br>
 
+    计算属性: {{newMsg2}}
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: "#app",
 
+      data:{
 
+        msg: 'hello word'
 
+      },
 
+      methods:{
 
+        newMsg1(){
 
+          return this.msg.split('').reverse().join('')
 
+        }
 
+      },
 
+      computed:{
 
+        /* 计算属性  依赖于其他值去进行计算 并且缓存 */
 
+        /* 
+          在Vue中 computed 比较特殊的属性  他的值是根据其他值进行计算的出来
 
+          computed可以使用get或者set的方法来实现数据的读取和色织
 
+          
+        */
 
+        newMsg2: function(){
 
+          return this.msg.split('').reverse().join('')
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+</html>

+ 61 - 0
Vue/14_watch.html
Vedi File 

@@ -0,0 +1,61 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div id="app">
 
+    <button @click="change()">修改</button>
 
+    <h2>姓: {{firstName}}</h2>
 
+    <h2>名：{{lastName}}</h2>
 
+    <h2>姓名：{{fullName}}</h2>
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: "#app",
 
+      data:{
 
+        firstName: 'zhang',
 
+        lastName: 'san',
 
+        sex: '男'
 
+      },
 
+      computed:{
 
+        fullName: function(){
 
+          console.log(333)
 
+          return this.firstName + this.lastName
 
+        }
 
+      },
 
+      methods:{
 
+        change(){
 
+          this.firstName = 'li'
 
+        }
 
+      },
 
+      watch:{
 
+        firstName: function(){
 
+          console.log(111)
 
+        },
 
+        lastName: function(){
 
+          console.log(222)
 
+        },
 
+        sex: function(){
 
+          console.log(555)
 
+        }
 
+        /* 
+        在Vue中 watch和computed都是用来观察数据变化的
 
+        作用不相同
 
+
 
+        watch是响应数据变化并且进行相应的操作
 
+        computed是用来计算一些基于响应式数据的操作
 
+
 
+        computed是带有一定缓存的  当响应式没有变化的时候
 
+        computed不会重新计算
 
+        
+        */
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+</html>