Vue学习（二）本地应用

转载

mb5fdb133c76a49 2021-09-23 17:53:00

文章标签 html 双击事件 vue.js 表单添加数据 文章分类 Java 后端开发

内容绑定，事件绑定

v-text

设置标签文本值（textContent）

会将标签文本内容全部替换
支持字符串拼接

<div id="app">
  <h2 v-text="message"></h2>
  <h2 v-text="message">这句话会被覆盖</h2>
  <h2 v-text="message + '!'"></h2>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: "Hello Vue.js"
    }
  })
</script>

v-html

设置标签文本值，添加子标签（innerHtml）

<div id="app">
  <h2 v-html="message"></h2>
  <p v-html="a"></p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: "Hello Vue.js",
      a: "<a href='https://www.baidu.com'>百度</a>"
    }
  })
</script>

v-on 基础

为元素绑定事件（onclick、onmonseenter、ondblclick）

<div id="app">
  <input type="button" v-on:click="onClick" />
  <input type="button" v-on:monseenter="onMonseenter" />
  <input type="button" v-on:dblclick="onDblclick" />
  <input type="button" @dblclick="双击事件" />  <!-- 用 @ 符号代替 v-on: -->
  <h3 @click="changeEle">{{ val }}</h3>  <!-- 更改元素属性 -->
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      val: '番茄鸡蛋',
    },
    methods: {
      onClick: function () {
        alert('这是一个点击事件')
      },
      onMonseenter: function () {
        alert('这是一个鼠标移入事件')
      },
      onDblclick: function () {
        alert('这是一个双击事件')
      },
      changeEle() {
        this.val += '好好吃!'
      },
    },
  })
</script>

计时器案例

<div id="app" style="display: flex;">
  <button style="width: 50px;" v-on:click='on_del'>-</button>
  <span style="width: 50px; text-align: center;">{{ number }}</span>
  <button style="width: 50px;" v-on:click='on_add'>+</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      number: 0,
    },
    methods: {
      on_add: function(){
        this.number +=1
      },
      on_del: function(){
        if (this.number <= 0){
          alert("不能再小了")
          return
        }
        this.number -=1
      }
    }
  })
</script>

显示切换，属性绑定

v-show

根据表达式的真假，切换元素的显示和隐藏（display）

<div id="app">
  <img src="https://cdn.wetest.qq.com/wetest-web-qq/static/img/add.2925520.png" v-show='isShow'>
  <input type="button" @click='show_this' value="show">
</div>

<script>
  new Vue({
    el: '#app',
    data:{
      isShow: true
    },
    methods:{
      show_this: function(){
        this.isShow = !this.isShow;
      }
    }
  })
</script>

v-if

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

跟v-show的区别：

二者都是用来展示/隐藏元素的
v-show 通过控制标签的display属性来实现元素的展示/隐藏
v-if 隐藏元素时，直接将元素从dom中删除
频繁显示/隐藏的元素用v-show，反之用v-if

<div id="app">
  <p v-if='isShow'> 这是一个p标签 </p>
  <input type="button" value="show" @click='p_show'>
	<p v-if='age > 35'> 年纪有点大了 </p>       <!-- 表达式 -->
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isShow: false,
      age: 40
    },
    methods: {
      p_show: function(){
        this.isShow = !this.isShow
      }
    }
  })
</script>

v-bind

设置元素的属性

<div id="app" style="display: flex;">
  <img v-bind:src="imgSrc"> <br>
  <img :src="imgSrc" alt="" :title="titleSrc" :class='{active:isActive}' @click='toActive'>
  <!-- :xxx 省略写法，{xxx：xxx} 对象表达式  -->
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      imgSrc: 'https://www.itheima.com/images/logo.png',
      titleSrc: '好看的壁纸',
      isActive: false,
    },
    methods:{
      toActive: function(){
        this.isActive = !this.isActive
      }
    }
  })
</script>

图片切换案例

<div id="app" style="display: flex">
  <button @click="prev" v-show="index!=0">上一张</button>
  <img :src="imgList[index]" alt="" />
  <button @click="next" v-show="index<imgList.length-1">下一张</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      imgList: [
        'https://th.wallhaven.cc/lg/y8/y8vlyk.jpg',
        'https://th.wallhaven.cc/lg/72/72rxqo.jpg',
        'https://th.wallhaven.cc/lg/e7/e7ek7k.jpg',
        'https://th.wallhaven.cc/lg/z8/z8odwg.jpg',
      ],
      index: 0,
    },
    methods: {
      prev: function () {
        this.index --
      },
      next: function () {
        this.index ++
      },
    },
  })
</script>

列表循环，表单元素绑定

v-for

根据数据生成列表结构

<div id="app" style="display: flex">
  <ul>
    <li v-for="item in arr">item: {{ item }}</li>  <!-- arr script中定义好的变量 -->
  </ul>
  <ul>
    <li v-for="(item,index) in arr">index: {{ index }} | {{ item }}</li> <!-- index-下标，item-值 -->
  </ul>
  <ul>
    <li v-for="(item,index) in arrObj">
      index: {{ index }} | {{ item.name }}:{{ item.age }} <!-- 拿字典值 -->
    </li>
  </ul>
  <button @click="addPerson">添加</button>
  <button @click="delPerson">删除</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      arr: [1, 2, 3, 4, 5],
      arrObj: [
        { name: 'Tom', age: 18 },
        { name: 'Jack', age: 19 },
        { name: 'Rose', age: 19 },
        { name: 'Jarry', age: 19 },
        { name: 'Talor', age: 19 },
      ],
    },
    methods: {
      addPerson: function () {
        this.arrObj.push({ name: '大头', age: 19 })  // push 向列表添加数据
      },
      delPerson: function () {
        this.arrObj.shift()  // shift 移除列表第一个元素
      },
    },
  })
</script>

v-on 补充

传参，事件修饰符等。https://cn.vuejs.org/v2/api/#v-on

<div id="app" style="display: flex">
  <input type="button" @click='doIt("over")' value="please talk something" />
  <input type="text" @keyup.enter='sayBye("LX", "Bye")' value="Bye" />  <!-- @keyup事件触发固定写法，@keyup.enter 限制点击回车按键时触发方法 -->
</div>

<script>
  new Vue({
    el: '#app',
    data: {},
    methods: {
      doIt: function (solve) {
        console.log('Nothing is impossible!')
        console.log('but ' + solve + '.')
      },
      sayBye: function (name, des) {
        console.log(name + ':' + des)
      },
    },
  })
</script>

v-model

设置、获取表单元素的值（双向数据绑定）

<div id="app">
  <input type="text" v-model="msg" @keyup.enter="getMsg" />
  <input type="button" @click="setMsg" value="set" />
  <h3>{{ msg }}</h3>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      msg: '给我一首歌的时间',
    },
    methods: {
      getMsg: function () {
        console.log(this.msg)
      },
      setMsg: function () {
        this.msg = '一滴泪的时间'
      },
    },
  })
</script>

记事本案例

<div id="app">
  <section>
    <header>
      <h1>记事本</h1>
      <!-- v-model、v-on 使用 -->
      <input v-model='input_value' @keyup.enter='add' placeholder="请输入任务">
    </header>
    <section>
      <ul class="todo-list">
        <!-- v-for 使用 -->
        <li v-for="(item, index) in list">
          <span>{{ index+1 }}: </span>
          <label>{{ item }}</label>
          <!-- v-on 使用 -->
          <button @click='del(index)'>删除</button>
        </li>
      </ul>
    </section>
    <footer>
      <span>
        <strong>{{ list.length }}</strong>
        items left
      </span>
      <button @click='clear'>clear</button>
    </footer>
  </section>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      list: ['吃饭', '睡觉', '敲代码'],
      input_value: "好好学习，天天向上",
    },
    methods: {
      add: function () {
        this.list.push(this.input_value)
      },
      del: function (index) {
        this.list.splice(index, 1); // splice根据索引删除列表元素，一次删一个
      },
      clear: function(){
        this.list = []
      }
    }
  })
</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。