Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 初识Vue，Vue的一些基础概念
Blogger Information
Blog 41
fans 0
comment 0
visits 31036
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
初识Vue，Vue的一些基础概念
陈强
Original
543 people have browsed it

Vue是什么？

  • Vue是一套用于构建用户界面的渐进式框架

安装Vue

  • 生产环境版本，优化了尺寸和速度

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  • 开发环境版本，包含了有帮助的命令行警告

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

挂载点、插值、响应式

  • 挂载点：声明的一个区域

  • 插值：插值用两个花括号包含，插值就是一个占位符

  • 响应式：数据和 DOM 已经被建立了关联，所有东西都是响应式的。

  1. //div包含的区域为挂载点
  2. <div class="app">
  3. //插值
  4.   {{ message }}
  5. </div>
  7. //创建一个Vue实例
  9. const vm = new Vue({
  10. //el声明挂载点为.app的类
  11.      el: ".app",
  12.      // 数据注入
  13.      data: {
  14.           message: "hello world!",
  15.      },
  16. });

控制台修改了vm.massges的值，dom内的数据随之改变

v-text,v-once,v-html三个指令

  • v-text: 输入text文档（类似于innerText, textContent）
  1. <p v-text="message"></p>
  • v-once:只渲染一次;随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过
  1. <p v-once>{{world}}</p>
  • v-html:可以解析html代码（类似于innerHtml)
  1.  <p v-html="age"></p>
  2.  data: {
  3.      age: '<span style="background:red">28</span>',
  4. },

v-bind,v-on指令

  • v-bind 绑定属性，可以简写为 ‘ ：’
  1. <p :style="style">{{message}}</p>
  2. data: {
  3.     message: "hello world!",
  4.     style: "color:red",
  5. },
  • v-on 绑定事件监听器。事件类型由参数指定。可以简写为 ‘ @’
  1. <input type="button" value="按钮1" @click="show()" />
  2. methods: {
  3.       show() {
  4.       alert(1);
  5. },
  6. },
  7. //事件对象的参数名必须是 $event
  8.  <button @click.stop="handle($event, 100, 200)">sum</button>
  9. //handle(参数的顺序和数量必须一致)
  10. handle(ev, a, b) {
  11.      console.log((a, b, a + b));
  12. },

v-moudle 双向绑定

v-model指令用来在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定。

  • .lazy - 取代 input 监听 change 事件,例如回车后才同步
  • .number - 输入字符串转为数字
  • .trim - 输入首尾空格过滤
  1. <div class="app">
  2.       <p>{{username}}</p>
  3.       <p><input type="text" v-model.lazy="username" /></p>
  4.     </div>
  5.     <script>
  6.       const vm = new Vue({
  7.         el: ".app",
  8.         data: {
  9.           username: "jack",
  10.           age: '18',
  11.         },
  12.       });
  13.     </script>

v-for, key

  • v-for 遍历数组
  1. <li v-for="(value,index) in arr">{{index}}-{{value}}</li>
  3. arr: ["apple", "banana", "orange", "pear"],

  • v-for 处理对象，必须要增加key属性
  1. <li v-for="(value,prop,index) in perpson" :key="prop">{{index}}-{{prop}}-{{value}}</li>
  2. perpson: {
  3.     username: "jack",
  4.     age: "18",
  5. },

  • v-for 处理对象数组
  1. <li v-for="(city,index) in citys" :key="city.id">{{city.id}}-{{city.name}}</li>
  2. citys: [
  3.     { id: 1, name: "beijing" },
  4.     { id: 2, name: "shanghai" },
  5.     { id: 3, name: "tianjin" },
  6. ],

小案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.     <style>
  9.       ul li {
  10.         list-style: none;
  11.       }
  12.       h2 {
  13.         text-align: center;
  14.       }
  15.       .app {
  16.         display: grid;
  17.         width: 20em;
  18.       }
  19.       .app ul:first-of-type {
  20.         background: red;
  21.         color: #fff;
  22.         display: grid;
  23.         grid-template-columns: repeat(4, 1fr);
  24.         justify-items: center;
  25.         align-items: center;
  26.         padding: 1em;
  27.       }
  28.       .app ul {
  29.         display: grid;
  30.         grid-template-columns: repeat(4, 1fr);
  31.         justify-items: center;
  32.         align-items: center;
  33.         padding: 0.5em;
  34.       }
  35.       .app ul:nth-child(odd) {
  36.         background: #ccc;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="app">
  42.       <h2>用户信息表</h2>
  43.       <ul>
  44.         <li>姓名</li>
  45.         <li>年龄</li>
  46.         <li>性别</li>
  47.         <li>城市</li>
  48.       </ul>
  49.       <ul v-for="user in perpson" :key="user.id">
  50.         <li>{{user.name}}</li>
  51.         <li>{{user.age}}</li>
  52.         <li>{{user.gender}}</li>
  53.         <li>{{user.city}}</li>
  54.       </ul>
  55.     </div>
  56.     <script>
  57.       const vm = new Vue({
  58.         el: ".app",
  59.         data: {
  60.           perpson: [
  61.             {id: 1, name: "张三", age: 18, gender: "男", city: "北京" },
  62.             {id: 2, name: "赵四", age: 30, gender: "女", city: "天津" },
  63.             {id: 3, name: "王五", age: 21, gender: "男", city: "上海" },
  64.             {id: 4, name: "赵六", age: 15, gender: "女", city: "成都" },
  65.           ],
  66.         },
  67.       });
  68.     </script>
  69.   </body>
  70. </html>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post