vue-02-vue设计模式和vue指令

mc.byte

已于 2023-02-24 21:16:04 修改

阅读量129

点赞数 1

分类专栏： web前端 # 笔记 # vue 文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-02-12 10:36:52 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/128977520

版权

web前端同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

一、vue设计模式 MVVM

详：

vue如何提供数据

二、插值表达式和 vue指令

1. 插值表达式

<template>
  <!--这里放html代码，只有一个根标签  -->
  <div>
    <h2>这里有且只有一个根标签，（也就是只有一个最大的根标签）</h2>
    <p v-text="uname">12345</p>
    <p>{{ age }}</p>
    <p>{{ height.toUpperCase() }}</p>

    <!-- 插值表达式{{}} 只能写在一对标签中间使用，不能当作属性 -->
    <p v-html="introduce">67890</p>
  </div>
</template>

<script>
// 这里放JS代码
export default {
  // =======vue所有的代码，都写道这个对象中=========

  // 数据放到data中，方法放到methods中，计算属性放到computed里面，侦听器放到watch
  data() {
    return {
      // 这里写你的数据
      uname: "王勃",
      age: "20",
      introduce: "关山难越，<strong>谁悲失路之人</strong>；萍水相逢，",
      height:"175cm",
    };
  },
};
</script>

插值表达式{{ }} 只能写在一对标签中间使用

2. v-bind

给标签属性设置vue变量的值

或（把vue变量的值, 赋予给dom属性上, 影响标签显示效果）

语法：v-bind:属性名="vue变量"

简写：：属性名=“vue变量”

注：

title = "abc"  设置title属性，值是'abc'字符串
:title = "abc" 设置title属性，值是abc变量，要去data中取值的

代码例：

<template>
  <div>
    <img v-bind:src="url" />

    <img :src="url" />
    <!--(v-bind可以省略)-->
    <img :src="url" alt="" />
    <img :src="logo" alt="" />
    <br />
    <input type="text" v-bind:value="uname" />
    <input type="text" :value="uname + '你好'" />
  </div>
</template>

<script>
import pic from "./assets/logo.png";
export default {
  // name: "App",
  data() {
    return {
      url: "http://www.itcbc.com:3006/formdata/123.jpg",
      uname: "李四",
      logo: pic,
      // logo:require('./assets/logo.png')
    };
  },
};
</script>

总结：

3. 事件绑定 v-on

语法1：v-on:事件名 = “要执行的少量代码”

（逻辑代码很少的时候用的，直接写在模块中；就和css行内样式的用法环境类似）

<template>
  <div>
    <h3>银行卡余额：{{ money }}</h3>
    <button v-on:click="money++">搬砖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 666,
    };
  },
};
</script>

语法2：v-on：事件名=“methods中的函数名”

<template>
  <div>
    <h3>银行卡余额-{{ money }}</h3>
    <button v-on:click="addmoney">开个小卖部</button>
  </div>
</template>

<script>
export default {
  // data 里面用于存放数据，只有值会经常发生变化的才会放到data中
  data() {
    return {
      money: 666, //data当中的变量，最终会挂载到vue实例身上
    };
  },

  // methods 里面用于存放 方法，方法是用于调用的
  methods: {
    //todo: methods中如果要访问或修改data中的数据. this.xxx = '值'
    //todo: methods所有的方法中的this，指向当前vue实例（vue内容绑好了）
    // 存放记录的所有的方法
    addmoney() {
      // 去掉租金、成本 和 加上收入
      this.money = this.money - 3000 - 4000 + 2000;
    },
  },


  // 什么是实例
  // const p = new Person() => 构造函数的内部： this.name = xxx this.age =xxx
  // p.name
  // p.age
};
</script>

知识点：

1. data 里面用于存放数据，只有值会经常发生变化的才会放到data中

data() {
    return {
      money: 666, //data当中的变量，最终会挂载到vue实例身上
    };
  },

2. methods 里面用于存放方法，方法是用于调用的

methods中如果要访问或修改data中的数据. this.xxx = '值'
methods所有的方法中的this，指向当前vue实例（vue内容绑好了）

 addmoney() {
      // 去掉租金、成本 和 加上收入
      this.money = this.money - 3000 - 4000 + 2000;
  },

注：如果说不明白为什么data后面跟括号，methods后面跟冒号，就看看对象的属性和方法，就明白了

const obj ={
    name:'xm',
    test:{},
    sayhi(){....}
  }

3. 关于methods中this 指向vue的实例，可以拿构造函数参照

const p = new Person() => 构造函数的内部： this.name = xxx this.age =xxx
p 就是 person的实例）
p.name
p.age

4. v-on:事件名可以简写成 @事件名

 <button v-on:click="age++">+1</button>
 <button @click="age--">-1</button>

总结：

5.vue中获取事件对象

代码例：

阻止默认跳转的三种方式

<template>
  <div>
    <h3>vue中获取事件对象</h3>
    <a href="http://www.jd.com" @click="fn1">去京东</a>
    <a href="http://www.taobao.com" @click="fn2(女朋友, $event)">去淘宝</a>
    <a href="http://www.baidu.com" @click.prevent>去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    fn1(e) {
      e.preventDefault();
      console.log("去京东");
    },
    fn2(Person, e) {
      e.preventDefault();
      console.log(Person, "去淘宝");
      console.log("不给去");
    },
  },
};
</script>

5.2 事件修饰符

 <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

5.3 按键修饰符

<template>
  <div>
    <h3>按键修饰符</h3>
    <input type="text" @keyup="keySwitch" />
    //直接写法
    <input type="text" @keyup.enter="keySwitch" />
    <br />
    <button>开始搜索</button>
  </div>
</template>

<script>
export default {
  methods: {
    keySwitch(e) {
      if (e.key === "Enter") {
        console.log(e);
        console.log("开始搜索");
      }
    },
  },
};
</script>

6. v-show 和 v-if 控制盒子的显示隐藏

<template>
  <div>
    <!--模板中访问数据，无需this.  -->
    <button @click="isShow = !isShow">控制显示隐藏</button>
    <!-- v-show='布尔值' true 显示，false隐藏 -->
    <h6 v-show="isShow">我是v-show控制的盒子</h6>
    
    <!-- v-if='布尔值' true显示 false隐藏  （控制页面有无该节点）-->
    <h6>我是v-if控制的盒子</h6>

  </div>
</template>

<script>
export default {
  // 提供数据： data 是一个函数, 内部提供数据
  data() {
    return {
      isShow: true,
    };
  },
  methods: {},
};
</script>

7.v-if 配合 v-else 和 v-else-if

<template>
  <div>
    <h3 v-if="flag">尊敬的超级vip, 里面请</h3>
    <h3 v-else>你谁呀，请先登录</h3>
    <hr>
    <h3 v-if="age >= 31">31岁往上  全球旅游</h3>
    <h3 v-else-if="age >= 21">21岁-30岁 跳广场舞</h3>
    <h3 v-else-if="age >= 11">11岁-20岁 蹦迪</h3>
    <h3 v-else>1岁-10岁  看动画片</h3>
  </div>
</template>

<script>
// 联想js中的 if else / else if
// 问题：if / else / else if  需要连着写
export default {
  data () {
    return {
      flag: true,
      age: 12
    }
  }
}
</script>

8.v-model

v-model 案例

<template>
  <div>
    <!-- v-model: 给表单元素使用, 实现双向数据绑定 
         语法：v-model="变量值"
         作用：可以快速 收集 或 设置 表单元素，实现双向绑定！
    -->
    姓名：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      console.log('登录 => ', this.username, this.password)
    },
    reset () {
      this.username = ''
      this.password = ''
    }
  }
}
</script>

8.2 v-model 作用在其它表单元素

v-model 可以和表单元素，实现双向数据绑定 => 可以快速获取或设置表单

注意：v-model 会忽略掉表单元素原本的value，checked

<template>
  <div>
    <!-- v-model 可以和表单元素，实现双向数据绑定 => 可以快速获取 或 设置表单 -->
    <select v-model="cityId">
      <!-- 注意：v-model 会忽略掉表单元素原本的value，checked -->
      <option value="101">上海</option>
      <option value="102">成都</option>
      <option value="103">六安</option>
      <option value="104">武汉</option>
    </select>
    {{ cityId }}

    <hr />

    是否单身：<input type="checkbox" v-model="isSingle" />{{isSingle}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityId: "103",
      isSingle: false,
      desc:""
    };
  },
};
</script>

8.3 v-model 修饰符

<template>
  <div>
    <!-- .number 尝试将输入的内容，能转数字就转数字，（转不了，不乱改） -->
    年纪：<input type="text" v-model.number="age" />
    <br />

    <!-- .trim 去除首尾空格 -->
    标题：<input type="text" v-model.trim="title" />
    <br />

    <!-- .layzy  在change时触发
    
    input事件，实时绑定 /  change事件，失去焦点或回车时触发 
    -->
    描述：<input type="text" v-model.lazy="desc" />
    <br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      title: "大数据",
      desc: "努力学习 vue! 做到熟练",
    };
  },
};
</script>

9. v-text和v-html

v-text 不会解析标签； v-html 可以解析标签

10. v-for

最重要：遍历数组：v-for="item in arr"

<template>
  <div>
    <!-- 语法1： v-for='(每一项，索引) in 目标结构' 口诀：想要谁循环就放到谁身上 -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <!--语法2  v-for='值变量名 in 目标结构' -->
    <ul>
      <li v-for="item in stuArr" :key="item.id">{{ item.pname }}</li>
    </ul>
  </div>
<script>
export default {
  data() {
    return {
      arr: ["苹果", "梨子", "香蕉", "哈密瓜"],
      stuArr: [
        { id: 101, pname: "超级无敌棒棒糖", price: 15, info: "好吃，再来一根" },
        { id: 171, pname: "超级解渴水果茶", price: 80, info: "好甜，真好喝" },
        { id: 191, pname: "超级好吃大鸡腿", price: 60, info: "可口，下饭~" },
      ],
    };
  },
};
</script>
</template>