• 第4篇 vue的基本语法操作以及组件，声明周期，路由的操作

    一 vue常用操作案例

    1.1 事件渲染

    1.数据渲染的方式：使用插值表达式{{}}进行数据渲染

    2.数据渲染的方式：以使用 v-bind指令，它的简写的形式就是一个冒号（:），v-bind 特性被称为指令。指令带有前缀 v-

    代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.   
    13.  
    14.         <div id="app">
    15.     
    16.             <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    17.            div中内容： {{ message }}
    18.  
    19.            <h1 :title="info">
    20.             {{ message }}
    21.            </h1>
    22.         <h2 v-bind:title="content">
    23.             {{ message }}
    24.         </h2>
    25.  
    26.     </div>
    27.     <h1 v-bind:class="myClass">这是一个标题</h1>
    28.     <script src="vue.min.js"></script>
    29.     <script>
    30.         new Vue({
    31.             el: '#app',
    32.             data: {
    33.                 message: '页面加载于 ' + new Date().toLocaleString(),
    34.                 content: '我是标题',
    35.                 info: '好痛苦..........',
    36.                 myClass: 'red'
    37.             }
    38.         })
    39.     </script>
    40. </body>
    41.  
    42. </html>

    2.结果：

    1.2 双向绑定

    v-model 可以进行双向的数据绑定；

    v-bind:value只能进行单向的数据渲染；

    代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <!-- v-bind:value只能进行单向的数据渲染 -->
    14.         <input type="text" v-bind:value="searchMap.keyWord">
    15.         <p>您要查询的是：{{searchMap.keyWord}}</p>
    16.         <!-- v-model 可以进行双向的数据绑定  -->
    17.        <input type="text" v-model="searchMap.keyWord">
    18.     </div>
    19.     <script src="vue.min.js"></script>
    20.     <script>
    21.         new Vue({
    22.             el: '#app',
    23.             data: {
    24.                 searchMap:{
    25.                 keyWord: '我爱北京'
    26.     }
    27.             }
    28.         })
    29.     </script>
    30. </body>
    31.  
    32. </html>

    2.页面

    1.3 click事件

    1.说明

     v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法

    2.代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
    14.         <button v-on:click="search()">查询</button>
    15. <p>您要查询的是：{{searchMap.keyWord}}</p>
    16. <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
    17.     </div>
    18.     <script src="vue.min.js"></script>
    19.     <script>
    20.         new Vue({
    21.             el: '#app',
    22.             data: {
    23.                 searchMap:{
    24.                    keyWord: 'wo ai beijing!!!'
    25.              },
    26.             //查询结果
    27.            result: {}
    28.             },
    29.             methods:{
    30.             search(){
    31.                 this.result = {
    32.            "title":"baidu",
    33.            "site":"http://www.baidu.com"   
    34.             }
    35.           }}
    36.         })
    37.     </script>
    38. </body>
    39.  
    40. </html>

    3.结果

     1.4 表格提交且阻止默认行为

    1.说明

         这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：即阻止表单提交的默认行为 

    2.代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13. <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
    14.      这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
    15.      即阻止表单提交的默认行为 -->
    16.      <form action="save" v-on:submit.prevent="onSubmit">
    17.          <label for="username">
    18.              <input type="text" id="username" v-model="user.username">
    19.              <button type="submit">保存</button>
    20.          </label>
    21.      </form>
    22.     </div>
    23.     <script src="vue.min.js"></script>
    24.     <script>
    25.         new Vue({
    26.             el: '#app',
    27.             data: {
    28.                 user:{username:'默认值'}
    29.             },
    30.             methods:{
    31.                 onSubmit() {
    32.           if (this.user.username) {
    33.              alert('提交订单内容值>>>:'+this.user.username);
    34.            } else {
    35.             alert('请输入用户名')
    36.         }
    37.     }
    38.         }
    39.         })
    40.     </script>
    41. </body>
    42.  
    43. </html>

    3.页面执行

    1.5 for循环列表

    1.说明

    v-for：列表循环指令

    2.代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13. <!-- 2、遍历数据列表 -->
    14. <table border="1">
    15.     <!-- <tr v-for="item in userList"></tr> -->
    16.     <tr v-for="(item, index) in userList">
    17.         <td>{{index}}</td>
    18.         <td>{{item.id}}</td>
    19.         <td>{{item.username}}</td>
    20.         <td>{{item.age}}</td>
    21.     </tr>
    22. </table>
    23.     </div>
    24.     <script src="vue.min.js"></script>
    25.     <script>
    26.         new Vue({
    27.             el: '#app',
    28.             data: {
    29.                 userList: [
    30.         { id: 1, username: 'helen', age: 18 },
    31.         { id: 2, username: 'peter', age: 28 },
    32.         { id: 3, username: 'andy', age: 38 }
    33.     ]
    34.             }
    35.         })
    36.     </script>
    37. </body>
    38.  
    39. </html>

    3.效果

    1.6 if条件判断

    1.说明

    v:if条件指令：还有v-else、v-else-if 切换开销大

    2.代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <input type="checkbox" v-model="permitflag">同意许可协议
    14.         <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    15.         <h1 v-if="permitflag">if条件同意是吧.....</h1>
    16.         <h1 v-else>no  不同意要....</h1>
    17.     </div>
    18.     <script src="vue.min.js"></script>
    19.     <script>
    20.         new Vue({
    21.             el: '#app',
    22.             data: {
    23.                 permitflag:true
    24.             }
    25.         })
    26.     </script>
    27. </body>
    28.  
    29. </html>

    3.效果

    二  组件

    2.1 组件 

    2.1.1 局部

    1.代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <Navbar></Navbar>
    14.     </div>
    15.     <script src="vue.min.js"></script>
    16.     <script>
    17.         var app = new Vue({
    18.         el: '#app',
    19.     // 定义局部组件，这里可以定义多个局部组件
    20.     components: {
    21.         //组件的名字
    22.         'Navbar': {
    23.             //组件的内容
    24.             template: '
      • 首页
      • 学员管理
      '
    25.         }
    26.     }
    27. })
    28.     </script>
    29. </body>
    30.  
    31. </html>

    2.效果

    2.1.2  全局

    1.自定义js文件

    1. // 定义全局组件
    2. Vue.component('Navbar', {
    3.     template: '<ul><li>首页li><li>学员管理li><li>讲师管理li>ul>'
    4. })

    2.应用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <Navbar></Navbar>
    14.     </div>
    15.     <script src="vue.min.js"></script>
    16.     <script src="zidingyi.js"></script>
    17.     <script>
    18.         new Vue({
    19.             el: '#app',
    20.             data: {
    21.                 
    22.             }
    23.         })
    24.     </script>
    25. </body>
    26.  
    27. </html>

    3.效果

    三  生命周期

    3.1 生命周期

    1.创建时的四个事件

    2.执行中的2个事件

     3.2 案例

    1.代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.  
    14.     </div>
    15.     <script src="vue.min.js"></script>
    16.     <script>
    17.         new Vue({
    18.             el: '#app',
    19.             data: {
    20.                 
    21.             },
    22.             created(){
    23.               alert('初始化页面.....');
    24.             },
    25.             mounted(){
    26.                 alert('渲染染成.....');
    27.             }
    28.         })
    29.     </script>
    30. </body>
    31.  
    32. </html>

    2.页面

    四 路由

    4.1 路由的含义

     Vue.js 路由允许我们通过不同的 URL 访问不同的内容。Vue.js 路由需要载入 vue-router 库

    4.2 案例

    1代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <h1>Hello App!</h1>
    14.             <p>
    15.                 <!-- 使用 router-link 组件来导航. -->
    16.                 <!-- 通过传入 `to` 属性指定链接. -->
    17.                 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    18.                 <router-link to="/">首页</router-link>
    19.                 <router-link to="/student">会员管理</router-link>
    20.                 <router-link to="/teacher">讲师管理</router-link>
    21.             </p>
    22.             <!-- 路由出口 -->
    23.             <!-- 路由匹配到的组件将渲染在这里 -->
    24.             <router-view></router-view>
    25.     </div>
    26.     <script src="vue.min.js"></script>
    27. <script src="vue-router.min.js"></script>
    28.     <script>
    29.          // 1. 定义（路由）组件。
    30.     // 可以从其他文件 import 进来
    31.     const Welcome = { template: '
      欢迎
      '       }
    32.     const Student = { template: '
      student list
      '       }
    33.     const Teacher = { template: '
      teacher list
      '       }
    34.     // 2. 定义路由
    35.     // 每个路由应该映射一个组件。
    36.     const routes = [
    37.         { path: '/', redirect: '/welcome' }, //设置默认指向的路径
    38.         { path: '/welcome', component: Welcome },
    39.         { path: '/student', component: Student },
    40.         { path: '/teacher', component: Teacher }
    41.     ]
    42.     // 3. 创建 router 实例，然后传 `routes` 配置
    43.     const router = new VueRouter({
    44.         routes // （缩写）相当于 routes: routes
    45.     })
    46.     // 4. 创建和挂载根实例。
    47.     // 从而让整个应用都有路由功能
    48.     const app = new Vue({
    49.         el: '#app',
    50.         router
    51.     })
    52.     // 现在，应用已经启动了！
    53.     </script>
    54. </body>
    55.  
    56. </html>

    2.页面

     

  • 相关阅读:
    【操作系统】基础知识
    智云通CRM：客户说“手头紧”，如何应对才能让他下定决心购买？
    前端利用原生canvas生成图片
    【框架风格】解释器模式
    CVE-2023-3836：大华智慧园区综合管理平台任意文件上传漏洞复现
    【推搜】embedding评估 | faiss的topK向量检索
    @Async的用法和示例
    MAUI候选版本3发布啦
    第五章 将对象映射到 XML - 指定映射 XML 文档的格式选项
    PointSIFT: A SIFT-like Network Module for 3D Point Cloud Semantic Segmentation
  • 原文地址：https://blog.csdn.net/u011066470/article/details/132735058