初识Vue，Vue的一些基础概念 - VUE

首页 > 博客列表 > 初识Vue，Vue的一些基础概念

博主信息

博文 41

粉丝 0

访问量 41692

专题推荐

更多>

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 已经被建立了关联，所有东西都是响应式的。

//div包含的区域为挂载点
<div class="app">
//插值
  {{ message }}
</div>
//创建一个Vue实例
const vm = new Vue({
//el声明挂载点为.app的类
     el: ".app",
     // 数据注入
     data: {
          message: "hello world!",
     },
});

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

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

v-text: 输入text文档（类似于innerText, textContent）

<p v-text="message"></p>

v-once:只渲染一次;随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过

<p v-once>{{world}}</p>

v-html:可以解析html代码（类似于innerHtml)

 <p v-html="age"></p>
 data: {
     age: '<span style="background:red">28</span>',
},

v-bind,v-on指令

v-bind 绑定属性，可以简写为 ‘ ：’

<p :style="style">{{message}}</p>
data: {
    message: "hello world!",
    style: "color:red",
},

v-on 绑定事件监听器。事件类型由参数指定。可以简写为 ‘ @’

<input type="button" value="按钮1" @click="show()" />
methods: {
      show() {
      alert(1);
},
},
//事件对象的参数名必须是 $event
 <button @click.stop="handle($event, 100, 200)">sum</button>
//handle(参数的顺序和数量必须一致)
handle(ev, a, b) {
     console.log((a, b, a + b));
},

v-moudle 双向绑定

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

.lazy - 取代 input 监听 change 事件,例如回车后才同步
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤

<div class="app">
      <p>{{username}}</p>
      <p><input type="text" v-model.lazy="username" /></p>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data: {
          username: "jack",
          age: '18',
        },
      });
    </script>

v-for, key

v-for 遍历数组

<li v-for="(value,index) in arr">{{index}}-{{value}}</li>
arr: ["apple", "banana", "orange", "pear"],

v-for 处理对象，必须要增加key属性

<li v-for="(value,prop,index) in perpson" :key="prop">{{index}}-{{prop}}-{{value}}</li>
perpson: {
    username: "jack",
    age: "18",
},

v-for 处理对象数组

<li v-for="(city,index) in citys" :key="city.id">{{city.id}}-{{city.name}}</li>
citys: [
    { id: 1, name: "beijing" },
    { id: 2, name: "shanghai" },
    { id: 3, name: "tianjin" },
],

小案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      ul li {
        list-style: none;
      }
      h2 {
        text-align: center;
      }
      .app {
        display: grid;
        width: 20em;
      }
      .app ul:first-of-type {
        background: red;
        color: #fff;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
        align-items: center;
        padding: 1em;
      }
      .app ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
        align-items: center;
        padding: 0.5em;
      }
      .app ul:nth-child(odd) {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <h2>用户信息表</h2>
      <ul>
        <li>姓名</li>
        <li>年龄</li>
        <li>性别</li>
        <li>城市</li>
      </ul>
      <ul v-for="user in perpson" :key="user.id">
        <li>{{user.name}}</li>
        <li>{{user.age}}</li>
        <li>{{user.gender}}</li>
        <li>{{user.city}}</li>
      </ul>
    </div>
    <script>
      const vm = new Vue({
        el: ".app",
        data: {
          perpson: [
            {id: 1, name: "张三", age: 18, gender: "男", city: "北京" },
            {id: 2, name: "赵四", age: 30, gender: "女", city: "天津" },
            {id: 3, name: "王五", age: 21, gender: "男", city: "上海" },
            {id: 4, name: "赵六", age: 15, gender: "女", city: "成都" },
          ],
        },
      });
    </script>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

第一次作业---html标签及元素

2020-12-09 11:29:36