2 Vue 进阶用法(FH)

发布于:2023-01-24 ⋅ 阅读:(21) ⋅ 点赞:(0) ⋅ 评论:(0)

目录

1 v-html:在模板中输出原始的 HTML 代码

2 v-once:只渲染1次 HTML 模板

3 给 v-bind 和 v-on 设置动态参数

4  v-for 的进阶用法

5 模板 渲染一组标签但不额外增加嵌套

6  Vue  事件传参与多事件处理函数

7  事件相关的修饰符

8 处理键盘、鼠标事件的修饰符  

9 表单输入相关的修饰符

10 通过 Vue 实例访问和修改应用的配置

11Vue 生命周期钩子:在合适的时机为应用添加数据和行为


1 v-html:在模板中输出原始的 HTML 代码

 将html代码插入到页面中 

注意 如果代码是用户输入的要进行安全审查 

html:

  <div id="app">
      <div>
        <article v-html="content" />
        <!-- <article>{{ content }}</article> -->
      </div>
    </div>

js :

const app = Vue.createApp({
  data() {
    return {
      content: `<p>这是一段<span style="color: hsl(0, 80%, 70%);">HTML</span>代码</p>`,
    };
  },
}); 
app.mount("#app");

2 v-once:只渲染1次 HTML 模板

html:

<div id="app">
      <div>
        <p v-once>list 初始长度: {{ list.length }}</p>
        <p>list 新长度: {{ list.length }}</p>
        <button @click="list.push(list.length + 1)">添加元素</button>
      </div>
    </div>

js :

const app = Vue.createApp({
  data() {
    return {
      list: [1, 2, 3],
    };
  },
});
app.mount("#app");

3 给 v-bind 和 v-on 设置动态参数

placeholder属性提示input输入占位

用户名: <input type="text" name="username" placeholder="请输入用户名" > <br> 密&emsp;码: <input type="password" name="pwd" placeholder="请输入密码" > <br> <input type="submit" value="提交">

使用中括号 中写入表达式:

        <input type="text" :[attr]="value" @[event]="handleChange" />

html:

  <div id="app">
      <div>
        <input type="text" :[attr]="value" @[event]="handleChange" />
      </div>
    </div>

js:

const app = Vue.createApp({
  data() {
    return {
      attr: "placeholder",
      value: "请输入一些字符",
      event: "change",
    };
  },
  methods: {
    handleChange() {
      console.log("input 变化");
    },
  },
});
app.mount("#app");

4  v-for 的进阶用法

html:

    <div id="app">
      <div>
        <ul>
           <li v-for="value in blogPost">{{value}}</li> <!--  普通用法 -->
           <li v-for="(value, name, index) in blogPost">  <!-- 属性值  属性名  索引 -->
            {{index}}. {{name}} - {{value}}
          </li>
        </ul>
        <ul>
          <li v-for="todo in todos" :key="todo.id">{{ todo.content }}</li>  <!-- 用key来顺序显示 移动HTML   -->
        </ul>
        <ul>
           <li v-for="n in 5" :key="n">{{ n }}</li> <!-- 在一个范围内的数据 排序名次 指定序号的情况 -->
        </ul>
      </div>
    </div>

js:

// 示例:再看 v-for
const app = Vue.createApp({
  data() {
    return {
      blogPost: {
        title: "Vue 3.x 完全指南",
        author: "aaa",
        pubDate: "2021-12-12",
      },
      todos: [
        {
          id: 1,
          content: "待办1",
        },
        {
          id: 2,
          content: "待办2",
        },
        {
          id: 3,
          content: "待办3",
        },
      ],
    };
  },
});
app.mount("#app");

5 模板<///template///> 渲染一组标签但不额外增加嵌套

如果代码是这样的,即使没有进入if 但页面还会产生多余的html标签 

  <div v-if="show" class="content">
          <h1>标题</h1>
          <p>这是一个段落</p>
        </div>

但是使用  <template/> 就不会产生多余的元素

html:

   <div id="app">
      <div>
        <template v-if="show" class="content">
          <h1>标题</h1>
          <p>这是一个段落</p>
        </template>
        <button @click="show = !show">切换显示</button>
      </div>
    </div>

js:

// 示例:Template 标签
const app = Vue.createApp({
  data() {
    return {
      show: true,
    };
  },
});
app.mount("#app");

6  Vue  事件传参与多事件处理函数

@click="handleClick(msg)"     //一般事件
@click="handleClick(msg, $event)"  //携带参数 与原生dom 函数 
@click="handleClick1(),handleClick2()  //可以触发多事件处理 但是函数名必须要带'()'

html:

  <div id="app">
      <div>
        <ul>
          <li
            v-for="todo in todos"
            :key="todo.id"
            @click="handleClick(todo.id, $event), showContent(todo.content)"
          >
            {{todo.content}}
          </li>
        </ul>
      </div>
    </div>

js:

const app = Vue.createApp({
  data() {
    return {
      todos: [
        {
          id: 1,
          content: "待办1",
        },
        {
          id: 2,
          content: "待办2",
        },
        {
          id: 3,
          content: "待办3",
        },
      ],
    };
  },
  methods: {
    handleClick(id, e) {
      alert(id + ", " + e.clientX + ", " + e.clientY);
    },
    showContent(content) {
      alert(content);
    },
  },
});
app.mount("#app");

7  事件相关的修饰符

之前已经在表单处理中接触到了 prevent 事件修饰符  来阻止页码刷新
<form
@submit.prevent="handleSubmit">/form>

 @submit.prevent ==  event.preventDefault(); 

Vue中的事件修饰符 

 事件修饰符还可以组合使用 

eg: @click.self.prevent   只有自身被点击 时 才会触发事件 而且阻止 跳转 

事件冒泡不会触发

.stop  .prevent  比较常用

html:

   <div>
        <a href="https://zxuqian.cn" @click.prevent="">点击跳转</a>
        <!-- <ul @click="handleUlClick">
          <li @click="handleLiClick">1</li>
          <li>2</li>
        </ul>  -->
        <!-- stop-->
        <ul @click="handleUlClick">
          <li @click.stop="handleLiClick">1</li>
          <li>2</li>
        </ul>
        <!-- capture -->
        <!-- <ul @click.capture="handleUlClick">
          <li @click="handleLiClick">1</li>
          <li>2</li>
        </ul> -->
        <!-- self -->
        <!-- <ul @click.self="handleUlClick">
          <li @click="handleLiClick">1</li>
          <li>2</li>
        </ul> -->
        <!-- once -->
        <!-- <ul @click.once="handleUlClick">
          <li @click="handleLiClick">1</li>
          <li>2</li>
        </ul> -->
      </div>

js:

const app = Vue.createApp({
  data() {
    return {};
  },
  methods: {
    handleUlClick() {
      alert(0);
    },
    handleLiClick() {
      alert(1);
    },
  },
});
app.mount("#app");

8 处理键盘、鼠标事件的修饰符  

Vue中的

更多键盘修饰符 访问这个网站

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

当使用两个按键是 需要'-'来连接 并且全部小写

常用组合键修饰符 (单个不能使用)

监听鼠标的修饰符有:

 html:

 <div id="app">
      <div>
        <ul @mousedown.right="comments.reverse()">    <!--鼠标右键监听 -->
          <li v-for="content in comments">{{ content }}</li>
        </ul>
        <input
          type="text"
          v-model="comment"
         @keyup.ctrl.enter.exact="addComment" />     <!-- 键盘ctrl+enter -->

            <!-- 双向监听v-model  -->
            <!-- exact准确 就需要这两个按键 -->
      </div>
    </div>

js:

// 示例:处理键盘、鼠标事件的修饰符
const app = Vue.createApp({
  data() {
    return {
      comments: ["好", "非常好", "赞"],
      comment: "",
    };
  },
  methods: {
    addComment() {
      this.comments.push(this.comment);
      this.comment = "";
    },
  },
});
app.mount("#app");

9 表单输入相关的修饰符

 html:

 <div id="app">
      <div>
        <input type="text" v-model.lazy.trim="username" />
        <p>{{ username }}</p>
        <!-- <input type="text" v-model.number="year" /> -->
        <input type="number" v-model="year" />
        <p>{{ typeof year }}</p>
      </div>
    </div>

js:

const app = Vue.createApp({
  data() {
    return {
      username: "",
      year: 2000,
    };
  },
});
app.mount("#app");

10 通过 Vue 实例访问和修改应用的配置

  • 实例可直接访问data 属性
  • 也可以通过 $data 访问
  • 还可访问计算属性、方法
  • 能添加监听
  • 适合传统网站和Vue 相结合的场景

js:

const app = Vue.createApp({
  data() {
    return {
      msg: "你好!",
      name: "张三",
    };
  },
  computed: {
    greetings() {
      return `${this.msg} ${this.name}`;
    },
  },
  methods: {
    changeName(name) {
      this.name = name;
    },
  },
  watch: {
    name(newName) {
      console.log("watch 监听:" + newName);
    },
  },
});
const vm = app.mount("#app");

Console:

>vm.changeName("李四") 

undefined

>vm.$watch("name",newName =>{console.log("监听 name:"+newName)})

> vm.name="王五" 监听 name:王五 VM688:1 
←'王五'

11Vue 生命周期钩子:在合适的时机为应用添加数据和行为

  •  生命周期钩子在不同时期执行
  • 最常用的有:created 和 mounted

1.vue的生命周期 生命周期函数,又叫钩子函数   生命周期钩子===生命周期函数===生命周期事件

2.

什么是生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。 

3.vue中的生命周期函数,一般都是 成对出现

4.10个生命周期函数 :    vue 实例被创建一直到 vue 实例被销毁 

beforecreate  --- vue实例创建之前 

 created -----------vue实例创建之后  

beforemounte ---DOM挂载之前  

mounted -----------DOM挂载之后  

beforeupdate ---数据更新之前  

updated -----------数据更新之后  

beforeDestroy ---组件销毁之前  

destroyed ----------组件销毁之后
 

html:

<div id="app">
      <div>
        <ul>
          <li v-for="post in posts" :key="post.id">
            {{ post.title }}
          </li>
        </ul>
      </div>
    </div>

js:

const app = Vue.createApp({
  data() {
    return {
      posts: [],
    };
  },
  methods: {
    async fetchPosts() {
      const res = await fetch("./posts.json");
      const postsData = await res.json();
      this.posts = postsData;
    },
  },
  created() {
    this.fetchPosts();
  },
});
const vm = app.mount("#app");

posts.json

[
  {
    "id": 1,
    "title": "Vue 生命周期的使用方法"
  },
  {
    "id": 2,
    "title": "JavaScript 原型链原理"
  },
  {
    "id": 3,
    "title": "CSS Grid 布局完全指南"
  },
  {
    "id": 4,
    "title": "CSS Flexbox 布局完全指南"
  }
]


网站公告

欢迎关注微信公众号

今日签到

点亮在社区的每一天
签到