Vue-第一个Vue程序

第一个Vue程序

首先在html文件中引入cdn：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!--视图View，模板-->
<div id="app">{{ message }}</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp } = Vue

    createApp({
        data() {
            return {
                //模型model，数据
                message: 'Hello Vue!'
            }
        }
    }).mount('#app')
</script>

MVVM-数据双向绑定

• MVVM是一种软件架构模型（model-view-vewmodel）。这种模型来源于java中的MVC模型，将视图和数据分离开。能够做到修改model的同时view跟着发生变化，同时两者互不影响。
• Vue实现了MVVM这种模型，同时集成了【虚拟DOM】的特性。

Vue基本语法

• v-bind:绑定属性和数据

<span v-bind:title="message">鼠标悬停</span>

• v-if：判断

<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>

data() {
     return {
        //模型model，数据
        message: 'Hello Vue!',
        ok: false,
        type: "B"
    }
}

• v-for：循环，用于遍历对象类型数据

<h1 v-for="item in items">
   {{item.message}}
</h1>

items: [
     {message: "1111"},
     {message: "2222"}
]

Vue事件绑定

• 常用事件自行搜索...
• v-on:

<button v-on:click="count += 1">点我</button>
{{count}}

Vue在表单中实现双向数据绑定

你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Vue组件

示例：

<button-counter></button-counter>

<!--    创建一个Vue组件-->
    Vue.component("button-counter",{
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++" >点击我{{count}}</button>'
    });

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。