vue基础操作

vue

vue 创建一个实例

new vue({
  el: "#app", //设置实例的挂载点
  data: {
    //表示数据，当前实例中可以使用的数据
    msg: "testing",
    color: "red",
  },
});

指令/操作/语法

v-bind

动态绑定数据在页面上，可以简写成 “:”。需要注意绑定的值为一个 js 表达式

<div id="app">
  <h1 :style="{color:'red'}">
    这里是一段文字
  </h1>
</div>

v-on

事件绑定，v-on 可以简写为 “@”。例如：v-on:click === @click。

<div id="app">
  <button @click="clickHandle">
    按钮
  </button>
</div>
<script>
  new Vue({
      ...
      methods: {
          clickHandle() {
              // 事件处理的内容
          }
      }
      ...
  })
</script>

{{}}数据绑定方式

v-for 循环指令

可以在页面中循环展示内容

<div id="app">
  <ul>
    <li v-for="(item,index) in people" :key="index">{{item}}-{{index}}</li>
  </ul>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      people:["aaa","bbb","ccc","ddd"],
    },
  });

v-model 表单绑定数据方式

v-model 可以对页面中表单里的 input 实现数据的双向绑定

<div id="app">
  <input type="text" v-model="txt" @keyup.enter="KeyUpHandle" />
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      txt: "",
    },
  });
</script>

fliter 过滤器

<div id="app">
  <h1>{{txt | aToA | bTo3}}</h1>
  <input type="text" v-model="txt" />
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      txt: "",
    },
    filters: {
      aToA(v) {
        return v.replace(/a/g, "A");
      },
      bTo3(v) {
        return v.replace(/b/g, "3");
      },
    },
  });
</script>