小白学习 Vue 1.介绍小白学习Vue系列目录小白学习Vue1.介绍小白学习Vue2.指令小白学习Vue3.绑定Cla

本人对 JS 已有一定的熟悉，学习 VUE v2 也是拓展技术面，将其应用在网页端和移动端。文中代码示例在官网都可以找到

小白学习 Vue 系列目录

基本用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 VUE 资源 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue.js v2.6.12 -->
</head>

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

    <div id="app2">
        <!--
           v-bind:attribute="property"
           v-bind:title="message"   将 Vue 实例的 message 属性与该元素的 title 属性绑定上
         -->
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <hr/>

    <div id="app3">
        <!--
           v-if="booleanProperty"
           v-if="visible"   该元素是否‘显示’还是‘隐藏’，由 Vue 实例的 visible 属性决定
         -->
        <p v-if="visible">你现在看到我了</p>
        <button v-on:click="show">显示/隐藏</button>
    </div>
    <hr/>

    <div id="app4">
        <!--
            for (todo in todos) {
                <li>{{ todo.text }}</li>
            }
            循环生成 <li></li> 元素
            可以在浏览器的控制台，输入 app4.todos.push({ "text": "Good Job" }) 就可以插入一个新元素了
         -->
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    <hr/>

    <div id="app5">
        <!--
            v-model 指令，实现表单输入和应用状态之间的双向绑定
         -->
        <p>{{ message }}</p>
        <input v-model="message" />
    </div>
    <hr/>

</body>

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

    var app2 = new Vue({
        el: '#app2',
        data: {
            message: '页面加载于：' + new Date().toLocaleString()
        }
    })

    var app3 = new Vue({
        el: '#app3',
        data: {
            visible: true
        },
        methods: {
            show: function () {
                this.visible = !this.visible // 实例内部方法，访问实例的属性
            }
        }
    })

    var app4 = new Vue({
        el: '#app4',
        data: {
            todos: [
                { "text": "Learn JavaScript" },
                { "text": "Learn Vue.js" },
                { "text": "Develop a Big Project" },
            ]
        }
    })

    var app5 = new Vue({
        el: '#app5',
        data: {
            message: "huangjian"
        }
    })
</script>

</html>

自定义组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <ol>
            <todo-item
                    v-for="todo in todos"
                    v-bind:todo="todo"
                    v-bind:key="todo.id"
            ></todo-item>
        </ol>
    </div>
</body>

<script type="text/javascript">
    // 自定义 Vue 组件（必须在 Vue 中使用，才可以被渲染）
    Vue.component("todo-item", {
        props: ["todo"],
        template: "<li>{{ todo.text }}</li>"
    })

    var app1 = new Vue({
        el: "#app1",
        data: {
            todos: [
                { id: 0, text: '待办事项1' },
                { id: 1, text: '待办事项2' },
                { id: 2, text: '待办事项3' },
                { id: 3, text: '待办事项4' },
            ]
        }
    })
</script>

</html>

今日总结

五种指令：

v-bind:attribute="property"
将 Vue 实例的 property 属性与该元素的 attribute 属性绑定上

v-if="booleanProperty"
该元素是否‘插入’还是‘移除’，由 Vue 实例的 booleanProperty 属性决定

v-on:click="func"
由 Vue 实例的 func 方法，来响应该元素的 onclick 事件

v-for="item in object"
循环遍历生成元素组件

v-model="property"
实现表单值与 Vue 实例的 property 属性之间的双向绑定