vue初步学习

vue初步体验

  <div id="app">{{ username }}</div>
   <script src="./lib/vue-2.6.12.js"></script>
   <script>
    const vm = new Vue({
  		el: '#app',
        data: {
        username: 'zhangsan'
      }
    })

{{}}将data中的数据进入div中，mvvm模式的初步体验

v-text v-html {{}}

<!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">
    <p v-text="username"></p>
    <p v-text="gender">性别：</p>

    <hr>

    <p>姓名：{{ username }}</p>
    <p>性别：{{ gender }}</p>

    <hr>

    <div v-text="info"></div>
    <div>{{ info }}</div>
    <div v-html="info"></div>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'zhangsan',
        gender: '女',
        info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习 vue.js</h4>'
      }
    })
  </script>

v-text会把原来的内容进行覆盖，不是很好操作，所以使用的频率斌不是很高，而{{}}可以把他放在想放到的地方，操作灵活度比较高。而v-html可以识别一些标签，可以不仅仅添加字符串


## 属性绑定指令
在属性中使用{{}}是无法被识别的，这就需要涉及到v-bind用法。
看代码

```javascript
 <input type="text" :placeholder="tips">
 <input type="text" v-bind:placeholder="tips">

这两行的代码实现的功能是一样的。第一行是第二行的简写，这里的tips就会变成下面的data中的tips数据

事件绑定

先上代码

 <div id="app">
    <p>count 的值是：{{ count }}</p>
    <button @click="add(1)">+1</button>
    <button @click="sub">-1</button>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        add(n) {
          console.log(vm)
          this.count += n
        },
        sub() {
          this.count --
        }
      }
    })
  </script>

事件绑定运用了v-on的·知识 如上的代码 在button中 @click就是给button绑定了一个点击事件，@click=‘add’ 就表示绑定了一个add函数
add函数相关的就在下面vm实例中的methods对象里面具体表现，这样就完成了事件绑定

事件对象

和原生js一样，里面的绑定事件也是有事件对象，分为两种情况，有参数的情况和没有参数的情况
举个例子 @click=’add‘ 表示绑定了一个add函数，这时候药获取事件对象，就在method里面的函数里接收一下
add(e){
console.log(e)
}就像这样 就可以打印出事件对象
如果此时函数需要参数 那么就需要使用$event如上的例子就需要写成@click=’add($event ,1)‘ 这里的$event就是事件对象，在下面进行接收据可以得到事件对象了。

事件修饰符

主要有.prevent .stop 主要的是阻止默认行为 还有阻止事件冒泡的
<a href=“http://www.baidu.com” @click.prevent=“show”>跳转到百度首页
这行代码就是通过a链接跳转到百度首页
@click.prevent加上这个代码之后 就无法进行跳转了，这是因为事件修饰符阻止了默认行为