javaweb04-vue基础

作者: 阴天吃鱼 | 来源:发表于2023-09-11 10:28 被阅读0次

话不多说，参考官网地址Vue文档集成Vue应用。

一、Vue快速入门

（1）新建HTML页面，引入Vue.js
我这里用的是CDN方式

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

（2）在核心区域创建Vue应用，定义数据模型

<script>
  Vue.createApp({
    data() {
      return {
        message:'Hello World'
      }
    }
  }).mount('#app')
</script>

（3）编写视图

<body>
  <div id="app">
    <input type="text" v-model="message">{{message}}
  </div>
</body>

说明：
（1）插值表达式：{{表达式}}。内容可以是变量、函数调用、算数运算等
（2）创建Vue应用申明的'#app'，表明寻找一个作用域为app的块，并只在该块下生效
（3）核心架构采用mvvm，实现数据和视图的双向绑定

二、常见指令

在HTML标签上带有v-的特殊属性，不同指令代表不同的意义。

1.v-bind 为HTML标签绑定属性值，比如设置 css 、href等
2.v-model 在表单元素上创建双向数据绑定
3.v-on 为HTML标签绑定事件
4.v-if、v-else-if、v-else 条件判定，符合条件时显示
5.v-show 符合条件时显示，区域在于切换的是display属性的值
6.v-for 列表渲染，遍历容器的元素或者对象的属性

（1）v-bind 为HTML标签绑定属性值，比如设置 css 、href等

——href绑定

<body>
  <div id="app">
    <a v-bind:href="url">链接</a>
    <input type="text" v-model="message">{{message}}
  </div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        message:'Hello World',
        url:'https://www.baidu.com'
      }
    }
  }).mount('#app')
</script>

——css绑定

<body>
  <div id="app">
    <div :style="{color:textColor}">aaa</div>
    <input type="text" v-model="message">{{message}}
  </div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello World',
        url: 'https://www.baidu.com',
        textColor: 'red'
      }
    }
  }).mount('#app')
</script>

注意：
v-bind可以省略，直接写:href

（2）v-model 在表单元素上创建双向数据绑定

<body>
  <div id="app">
    <a :href="url">变化链接，跟随text文本框输入内容</a>
    <input type="text" v-model="url">{{url}}
  </div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello World',
        url: 'https://www.baidu.com',
        textColor: 'red'
      }
    }
  }).mount('#app')
</script>

（3）v-on 为HTML标签绑定事件


<body>
  <div id="app">
    <input type="button" value="按钮点击" v-on:click="handle()">
  </div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello World',
        url: 'https://www.baidu.com',
        textColor: 'red'
      }
    },
    methods: {
      handle(){
        alert('被点击')
      }
    }
  }).mount('#app')
</script>

注意：
v-on:click可以简写成@click

（4）v-if、v-else-if、v-else 条件判定，符合条件时显示

<span v-if="item.score >=85">优秀</span>
<span v-else-if="item.score >=60">及格</span>
<span v-else style="color: red;">不及格</span>

（5）v-show 符合条件时显示，区域在于切换的是display属性的值

<body>
  <div id="app">
    <span v-show="show">优秀</span>
  </div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        show:true
      }
    }
  }).mount('#app')
</script>

（6）v-for 列表渲染，遍历容器的元素或者对象的属性

<tr v-for="(item, index) in users" :key="index">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>

        <td>
          <span v-if="item.gender ==1">男</span>
          <span v-if="item.gender ==2">女</span>
        </td>

        <td>{{item.score}}</td>

        <td>
          <span v-if="item.score >=85">优秀</span>
          <span v-else-if="item.score >=60">及格</span>
          <span v-else style="color: red;">不及格</span>
        </td>
</tr>

三、常见指令使用案例

案例.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <table border="1px" cellspacing="0px">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>成绩</th>
        <th>等级</th>
      </tr>

      <tr v-for="(item, index,allitem) in users" :key="index">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>

        <td>
          <span v-if="item.gender ==1">男</span>
          <span v-if="item.gender ==2">女</span>
        </td>

        <td>{{item.score}}</td>

        <td>
          <span v-if="item.score >=85">优秀</span>
          <span v-else-if="item.score >=60">及格</span>
          <span v-else style="color: red;">不及格</span>
        </td>
      </tr>
    </table>
  </div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        users: [
          { name: 'Tom', age: 20, gender: 1, score: 78 },
          { name: 'Rose', age: 18, gender: 2, score: 86 },
          { name: 'Jerry', age: 26, gender: 1, score: 90 },
          { name: 'Tony', age: 30, gender: 1, score: 52 }
        ]
      }
    }
  }).mount('#app')
</script>

</html>

四、Vue生命周期

概念：指一个对象从创建到销毁的整个过程。
一共分为八个阶段

beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成（钩子）
beforeUpdate 更新前
updated 更新后
beforeDestory 销毁前
destoryed 销毁后

晒一张官网生命周期图

官网.png

<script>
  Vue.createApp({
    data() {
      return {
        users: [
          { name: 'Tom', age: 20, gender: 1, score: 78 },
          { name: 'Rose', age: 18, gender: 2, score: 86 },
          { name: 'Jerry', age: 26, gender: 1, score: 90 },
          { name: 'Tony', age: 30, gender: 1, score: 52 }
        ],
      }
    },
    mounted() {
      //生命周期挂载 俗称钩子  发送请求到服务端来获取数据
      alert('view 挂载完成，发送请求到服务端')
    },
  }).mount('#app')
</script>

注意：
Vue的生命周期都有单独的方法，可以直接声明出来。
主要关注mounted挂载完成，因为这里处理发送请求到服务端请求数据。
特别说明beforeUpdate和updateed，当data被修改时，在dom渲染之前调用befroreUpdate，渲染完成之后调用updated

网友评论

本文标题：javaweb04-vue基础

本文链接：https://www.haomeiwen.com/subject/znbsvdtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！