首页 📪VUE

什么是VUE

vue的两个特性

  1. 数据驱动视图

    • 数据的变化会驱动视图自动更新
    • 好处:程序员只管把数据维护好,那么页面结构会被vue自动渲染出来
  2. 数据双向绑定
  • 在网页中,from表单负责采集数据,ajax负责提交数据
  • js数据的变化,会被自动渲染到页面上
  • 页面上表单采集的数据发生变化的时候,会被vue自动获取到,并更新到js数据中

vue指令

1,内容渲染指令

  1. v-text指令的缺点:会覆盖元素内部原有的内容!
  2. {{}} 差值表达式:在实际开发中用的最多
  3. v-html 指令的作用:可以把带有标签的字符串,渲染成真正的HTML内容!

2,属性绑定指令

注意:插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中

在vue中,可以使用v-bind: 指令,为元素的属性动态绑定值

在使用v-bind:属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面用过包裹单引号,例如

  <div :title="'box' + index">这是一个div</div>

3,事件绑定指令

  1. v-on:简写是@
  2. 语法格式为

    <button @click='add'()></button>
    
    methods:{
      add(n,e){
        //如果在方法中修改data中的数据,可有通过this访问
        this.count+=1
      }
    }
  3. $event 的应用场景:如果默认的事件对象e被费改了,则可以手动传递一个$event
  4.     <button @click='add'(3,$event)></button>
        
        methods:{
          add(n,e){
            //如果在方法中修改data中的数据,可有通过this访问
            this.count+=1
          }
        }
  5. 事件修饰符:
  • prevent

    <button @click.prevent="xxx">按钮</button>
  • stop

    <button @click.stop="xxx">按钮</button>
  • v-model 为了方便对用户输入的内容进行处理,vue为v-model 指令提供了3个修饰符,分别是:

    修饰符作用示例
    .number自动将用户的输入值转为数值类型<input v-model.number="age">
    .trim自动过滤用户输入的首尾空白字符<input v-model.trim="msg"/>
    .lazy在“change”的而非“input” 时更新<input v-model.lazy="msg"/>

    4,条件渲染指令

    1,v-show 的原理是:动态为元素添加或移除display:none样式,来显示元素的显示和隐藏

    如果是要频繁的切换元素的显示状态,用v-show性能更好

    2,v-if 的原理是:每次动态创建或移除元素,实现元素的显示和隐藏

    如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时v-if性能更好

    5,循环渲染指令

  1. key的值只能说字符串或数字类型
  2. key的值必须具有唯一性
  3. 建议把数据项id属性的值作为key的值
  4. 使用index的值当做key的值没有任何意义
  5. 建议使用v-for指令时一定要指定key的值(提升性能,又防止列表状态紊乱)

<!-- 用索引加上小括号 --> <!-- 官方给key的类型是有要求的,字符串或者字符类型 -->
索引 ID 姓名
{{index}} {{item.id}} {{item.name}}

</div>
<script>

const vm = new Vue({
  el: "#app",
  data: {
    list: [{
        id: 1,
        name: '张三'
      },
      {
        id: 2,
        name: '李四'
      },
      {
        id: 3,
        name: '王五'
      },
    ]
  }
});

</script>


#### 6,品牌案例

<div id="app">

<!-- 卡片区域 -->
<div class="card">
  <div class="card-header">
    添加品牌
  </div>
  <div class="card-body">
    <!-- 添加品牌的表单区域 -->
    <!-- from元素表单有submit事件 -->
    <form @submit.prevent="add">
      <div class="form-row align-items-center">
        <div class="col-auto">
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">品牌名称</div>
            </div>
            <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
          </div>
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-primary mb-2">添加</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 表格区域 -->
<table class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">品牌名称</th>
      <th scope="col">状态</th>
      <th scope="col">创建时间</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in list" :key="item.id">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>
        <div class="custom-control custom-switch">
          <input type="checkbox" class="custom-control-input" :id="'cd'+item.id" v-model="item.status">
          <label class="custom-control-label" :for="'cd'+item.id" v-if="item.status">已启用</label>
          <label class="custom-control-label" :for="'cd'+item.id" v-else>已禁用</label>
      </td>
      <td>{{item.time}}</td>
      <td>
        <a href="javascript:;" @click="remove(item.id)">删除</a>
      </td>
    </tr>
  </tbody>

</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>

const vm = new Vue({
  el: '#app',
  data: {
    brand: '123',
    nextId: 4,
    // 下一个可用的id
    //品牌列表
    list: [{
        id: 1,
        name: '宝马',
        status: true,
        time: new Date()
      },
      {
        id: 2,
        name: '奔驰',
        status: false,
        time: new Date()
      },
      {
        id: 3,
        name: '奥迪',
        status: true,
        time: new Date()
      },
    ],
  },
  methods: {
    //点击链接删除对应的品牌信息
    remove(id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    // 阻止表单提交的默认方式,触发add方法
    // 如果半段到填写内容为空时,则return出去
    add() {

      // 阻止表单提交的默认方式,触发add方法
      // 如果半段到填写内容为空时,则return出去
      if (this.brand === '') return alert('必须填写品牌名称!')
      //先把要添加的品牌形象整理出来
      const obj = {
        id: this.nextId,
        name: this.brand,
        status: true,
        time: new Date()
      }
      //往this,list数组中push步骤1 中得到的对象
      this.list.push(obj)
      this.brand = ''
      //清空this.brand,让this.nextId自增1
      this.nextId++
    }
  },
});

</script>




文章评论

    ALIVE 访客ChromeWindows
    2021-08-22 23:11   回复

    npm install react-scripts

目录