Vue2-Day1

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

导入Vue2

在HTML中通过jsdelivr导入:

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

在Chorme/Edge浏览器中打开https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd即可获取Vue官方插件用于辅助开发

Vue实例

导入vue.js后即可在script标签内新建Vue实例对象

<script>
    const vm = new Vue({
        el:...,
        data:{
            url:'https://dougunduzi.top'
        }
    })
</script>

其中el字段填入css选择器，用于绑定HTML标签，也可直接填入HTML标签对象如document.getElementById(‘id’)
data字段填入一些数据

el属性可在构造方法外用vm.$mout()方法手动挂载，data属性也可写成一个方法：

<script>
    const vm = new Vue({
        data(){
            return{
                url:'https://dougunduzi.top'
            }
        }
    })
    vm.$mout('css选择器')
</script>

数据绑定

绑定Vue实例后可以直接在innerHTML中使用Vue实例中的data数据变量，用双重花括号{{}}包裹即可

单向绑定

在HTML标签的属性前加上v-bind:标记即可实现数据的单向绑定，有v-bind绑定的属性可直接以字符串形式使用Vue实例中的data数据

v-bind:通常简写为:

<body>
    <div id="app">
      <h1>{{ id }}</h1>
      <a :href="url">dgdz</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            id: 5,
            url: "https://dougunduzi.top",
          }
        },
      })
    </script>
  </body>

当data中的数据发生变化时，由v-bind绑定的数据会同步变化

但仅v-bind绑定的数据变化时，data中的数据不会变化，因此成为单向绑定

双向绑定

v-model:标记可实现双向绑定，即data中的数据和被绑定的HTML标签中的数据其中之一改变时，the other也会同步改变

由于v-model经常被用于绑定value属性，因此v-model:value=可简写为v-model=

因为双向绑定的特性，以下代码中，改任意一个input标签的value，其他所有input标签的value都会同步改变

<body>
    <div id="app">
      <input type="text" v-model="id"><br/>
      <input type="text" v-model="id"><br/>
      <input type="text" v-model="id"><br/>
      <input type="text" v-model="id"><br/>
      <input type="text" v-model="id"><br/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            id: 5,
            url: "https://dougunduzi.top",
          }
        },
      })

    </script>
</body>

事件处理

Vue2中的事件用v-on:事件标记，用Vue实例对象中的methods对象中的方法实现，如：

<body>
  <div id="app">
    <button v-on:click="greet">Hello World</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el: "#app",
      methods: {
        greet() {
          alert("Hello World")
        },
      },
    })
  </script>
</body>

v-on:事件=可简写为@事件=

传参

事件触发时会默认传回event对象，可在methods的方法中使用它

当方法指定了需要传入的参数时，在调用加上()传入对应参数即可，event对象在调用处可使用$event表示:

<body>
  <div id="app">
    <button @click="greet('dougunduzi',$event)">Hello World</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el: "#app",
      methods: {
        greet(user,e) {
          alert(`Hello ${user}`)
          console.log(e)
        },
      },
    })
  </script>
</body>