个人学习笔记 - Vue本地应用

千层土拨鼠
117 阅读2分钟

VUE本地应用

Vue指令——区别于DOM元素操作；使用一系列的v-xx特殊语法

内容绑定，事件绑定:

  1. v-text：设置标签的文本值(textContent);覆盖整个内部文本
<div id="app">
    <h2 v-text="message">替换掉了</h2>
    <h2>不会替换内部text:{{message}}</h2>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            message: "Cool",
            info: "Can use it"
        }
    })
</script>

image.png
2. v-html：设置标签的innerHTML

<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            content: "<a href='#'>Cool!</a>"
        }
    })
</script>

image.png
3. v-on：为元素绑定事件
语法结构: v-on: + 事件名称 + ='方法' v-on:可以等价于@

<div id="app">
    <input type="button" value="按键点击" v-on:click="alertText">
    <input type="button" value="移入该元素" @mouseenter="mouseEnter">
    <input type="button" value="移出该元素" @mouseleave="mouseLeave">
    <h2 v-html="content"></h2>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
        el: "#app",
        methods: {
            alertText() {
                alert('Click in!')
            },
            mouseEnter() {
                console.log('移入');
            },
            mouseLeave() {
                console.log('移出');
            }
        },
        data: {
            content: "走着瞧"
        }
    })
</script>
  1. 案例1： 计数器
  • 指令可以简写为@
  • 绑定方法在methods属性中；属性在data中
  • 事件名不需要写on
  • 方法内部通过this关键字可以访问定义在data中的数据
<div id="app" class="app1">
    <input type="button" value="-" @click="minusNum">
    <span class="app1-content" v-text="count"></span>
    <input type="button" value="+" @click="addNum">
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        methods: {
            minusNum() {
                if (this.count === this.min) return alert("It's already min")
                this.count -= 1;
            },
            addNum() {
                if (this.count === this.max) return alert("It's already max")
                this.count += 1;
            }
        },
        data: {
            count: 0,
            min: 0,
            max: 10,
        }
    })
</script>

count.gif

显示切换，属性绑定：

  1. v-show：根据表达值的真假，切换元素的显示和隐藏
<div id="app">
    <input type="button" value="儿童" @click="watchAllowed">
    <input type="button" value="成人" @click="watchForbidden">
    <!-- <img src="../image/turbo.jpg" v-show="isShow"> -->
    <img src="../image/turbo.jpg" v-show="age>=18">
    <div v-show="age<18">18岁以上不能看</div>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
      el: '#app',
      data: {
          isShow: true,  //可以直接采用布尔值
          age: 16   //可以用表达式进行判断
      },
      methods: {
        watchAllowed() {
            this.age = 18
        },
        watchForbidden() {
            this.age = 17
        }
      }
    })
</script>

count.gif

  1. v-if：根据表达值的真假，切换元素的显示状态（操作DOM元素）+——区别于v-show变更DOM元素的样式，v-if会改变整个文档流

count.gif

  1. v-bind：设置元素的属性（比如src,class） 语法结构: v-bind: + 属性名 + ='表达式/值'
    v-bind可省略
<div id="app" class="app">
    <!-- <div v-bind:class="'pant ' + pantColor"></div> -->
    <div :class="'pant ' + pantColor"></div>
    <button @click="changeRed">RED</button>
    <button @click="changeBlue">BLUE</button>
    <button @click="changeYellow">YELLOW</button>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
      el: '#app',
      data: {
          pantColor: ""
      },
      methods: {
          changeRed() {
              this.pantColor = "red-pant"
          },
          changeBlue() {
              this.pantColor = "blue-pant"
          },
          changeYellow() {
              this.pantColor = "yellow-pant"
          }
      }
    })
</script>

count.gif

  1. 案例2： 图片切换
<div id="app" class="app1">
    <span :class="{active:isLeftActive}" @click="changeLeftImg" @mouseenter="LeftActive" @mouseleave="LeftNoActive" v-show="!(count<=0)"><</span>
    <img :src="imgSrc" :title="imgTitle">
    <span :class="{active:isRightActive}" @click="changeRightImg" @mouseenter="RightActive" @mouseleave="RightNoActive" v-show="!(count>=imgBase.length - 1)">></span>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        methods: {
            changeLeftImg() {
                this.count = this.count <= 0 ? 0 : this.count - 1;
                this.changeImg(this)
            },
            changeRightImg() {
                const nLength = this.imgBase.length - 1;
                this.count = this.count >= nLength ? nLength : this.count + 1;
                this.changeImg(this)
            },
            changeImg(that) {
                that.imgSrc = that.imgBase[that.count].img;
                that.imgTitle = that.imgBase[that.count].title;
            },
            LeftActive() {
                this.isLeftActive = true;
            },
            LeftNoActive() {
                this.isLeftActive = false
            },
            RightActive() {
                this.isRightActive = true
            },
            RightNoActive() {
                this.isRightActive = false
            }
        },
        data: {
            imgSrc: "../image/t1.jpg",
            imgTitle: "CUTE!!",
            isRightActive: false,
            isLeftActive: false,
            count: 0,
            imgBase:[
                {
                    img: "../image/t1.jpg",
                    title: "CUTE!!"
                },
                {
                    img: "../image/turbo.jpg",
                    title: "Yammy!!"
                },
                {
                    img: "../image/t2.jpg",
                    title: "FANCY!!"
                },
                {
                    img: "../image/t3.jpg",
                    title: "WOW!!"
                }
            ]
        }
    })
</script>

count.gif

列表循环，表单元素绑定：

  1. v-for：根据数据的个数生成列表结构
    语法结构: v-for: + item in + '对应的可迭代/类数组对象/数组'
<div id="note">
    <button @click="addData">添加</button>
    <button @click="removeData">删除</button>
    <ul>
        <!-- 缩略v-bind -->
        <li v-for="item in arr" :title="item">{{item}}:怎么回事</li>
        <!-- 采用item元素值 -->
        <li v-for="item in arr">{{item}}</li>
        <!-- 完整v-bind语法 -->
        <li v-for="item in arr1" v-bind:title="item">{{item}}</li>
        <!-- 采用索引值index + 对象元素的属性值 -->
        <li v-for="(item,index) in arr2" :title="index">{{index}}:{{item.name}}</li>
    </ul>
    <h2 v-for="item in arr2">{{item.name}}</h2>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
      el: '#note',
      data: {
          arr: [1, 2, 3],
          arr1: {data:[1, 2, 3, 4], length:4, test: 1},
          arr2: [{name: 'Rose'}, {name: 'Jack'},]
      },
      methods: {
          addData() {
              this.arr2.push({name: 'Sam'})
          },
          removeData() {
              this.arr2.shift()
          }
      }
    })
</script>
//和属性值的具体元素内容无关，for循环生成的列表结构只根据作为模板元素的接口进行迭代生成

count.gif
2. v-on补充参数：传递自定义参数，事件修饰符
事件修饰符： cn.vuejs.org/v2/api/#v-o…

<div id="note">
    <!-- 自定义传参用法 -->
    <input type="button" value="第一个文本改变" v-on:click="doIt('第一个改变了')">
    <input type="button" value="第二个文本改变" @click="doIt2('第二个改变了')">
    <input type="button" value="清空" @click="clearChange">
    
    <!-- 修饰符用法 -->
    <!-- v-on:keyup按键事件 @keyup.enter回车按键修饰符限制 v-bind:value控制属性 -->
    <input type="text" @keyup.enter="onEnter" placeholder="回车改变" :value="enterChange">
    <input type="text" @keyup.once="onOnce" :value="enterChange2">
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
      el: '#note',
      data: {
          enterChange: "",
          enterChange2: "",
      },
      methods: {
          doIt(p1) {
            this.enterChange = p1
          },
          doIt2(p1) {
            this.enterChange2 = p1
          },
          onEnter() {
              this.enterChange = "改变了"
          },
          clearChange() {
            this.enterChange = "";
            this.enterChange2 = ""
          }
      }
    })
</script>

count.gif
3. v-model：获取和设置表单元素的值（双向数据绑定）

<div id="note">
    <!-- 实时更新 -->
    <h2 class="noMove">{{message}}</h2>
    <!-- 输入回车后延时更新 -->
    <h2>{{delayMessage}}</h2>
    <input type="text" v-model="message" @keyup.enter="changeMsg">
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
      el: '#note',
      data: {
        message: "Cool Test",
        delayMessage: "暂无"
      },
      methods: {
          changeMsg() {
              this.delayMessage = this.message
          }
      }
    })
</script>

count.gif

avatar
文章
阅读
粉丝