快速开始

创建 Vue 实例可以设置的选项:

https://cn.vuejs.org/v2/api/#%e9%80%89%e9%a1%b9-%e6%95%b0%e6%8d%ae

其中有对 data,methods 等选项的进一步说明

Hello Vue

首先导入开发版本的 Vue.js

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

创建 Vue 实例对象,设置 el 属性和 data 属性:

<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!",
        }
    })
</script>

使用简洁的模板语法把数据渲染到页面上

el 挂载点 (string | HTMLElement)

Vue 实例的作用域只在 el 命中的元素,以及 el 命中的元素内的其他元素中有效

 {{ message }}  <!-- 外侧这个不生效 -->
<div id="app">
    {{ message }}
</div>

el 的挂载方法和 CSS 选择器是一样的,可以通过 ID,类名,标签名等方法来命中特定的元素;通常来说开发中更多的使用 ID 选择器,更明确。EL 挂载那个节点,就管理哪个节点。

注意,不能把用 HTML 和 BODY 来挂载

data (Object | Function)

data 为 Vue 实例对应的数据对象(Model),这些数据可以是直接定义的,也可以请求自服务器。在组件中,data 必须是一个函数。

列表展示

通过 v-for 指令来实现动态展示数据

HTML:

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

JS:


let app = new Vue({
    el: '#app',
    data: {
        message: 'Hello',
        movies: ['A', 'B', 'C']
    }
})

计数器

点击 +- 按钮会修改计数器的值,通过 v-on 来监听事件,该 demo 也引入 methods 的使用方法

HTML:

<div id="app2">
    当前计数:{{counter}}
    <br>
    <input v-on:click="add" type="button" value="+">
    <input v-on:click="sub" type="button" value="-">
</div>

JS:

let app2 = new Vue({
    el: '#app2',
    data: {
        counter: 0
    },
    methods: {
        add: function () {
            console.log('执行 add 函数');
            this.counter++;
        },
        sub: function () {
            console.log('执行 sub 函数');
            this.counter--;
        }
    }
});

技巧:v-on:click="" 可以 @click="" 代替,语法糖

Methods ([key:string] | Function)

定义属于该 Vue 实例的方法,可以在其他地方调用,也可以在指令中使用

最后修改:2021 年 02 月 23 日 02 : 46 AM
谢谢老板