Vue的介绍及基础指令

时间 2019-11-19

标签 vue 介绍基础指令繁體版

原文原文链接

1、什么是Vue

Vue.js是一个渐进式 JavaScript 框架

经过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终能够独立以框架方式完成整个web前端项目javascript

为何要学习Vue

三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
能够彻底脱离服务器端，之前端代码复用的方式渲染整个页面：组件化开发

特色

单页面web应用
数据驱动
数据的双向绑定
虚拟DOM

如何使用Vue

开发版本：vue.js
生产版本：vue.min.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用vue</title>
</head>
<body>
    <div id="box1">
        {{ }}
    </div>
    <hr>
    <div class="box2">
        {{ }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /* 
        拿到jquery框架的对象 ($ | jQuery) ===> 使用jquery框架
        拿到vue框架的对象 ( new Vue() ) ===> 使用vue框架
    */

    // vue对象须要手动建立, 缘由是一个vue对象能够只控制页面中的某一部分, 若是一个页面有多个部分都须要被控制, 那么就须要建立多个vue对象

    /*
      vue对象如何与控制的页面进行绑定关联
        采用的是vue对象中的挂载点(挂载点能够惟一标识页面中的某一个区域)
    */
    new Vue({
        el: "#box1"
        // 挂载在id为box1的div上, 那么该div下的全部内容都由该vue对象来控制
    });

    new Vue({
        el: '.box2'
        // 挂载在class为box2的div上, 那么该div下的全部内容都由该vue对象来控制 (尽可能使用id, 惟一标识)
    })
</script>
</html>

Vue的挂载点（vue实例）

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上)
    var app = new Vue({
        el: '#app',
        data: {
            msg: "开启vue学习之路"
        }
    });

    // 若是须要使用vue对象(实例), 那么就能够接受Vue建立的结果, 反之就不须要接收
    console.log(app);
    console.log(app.$attrs); // vue实例的变量都是以$开头
    console.log(app.$el);
    console.log(app.$data.msg);
    console.log(app.msg);
    // app对象 = new Vue()实例 = 标签div#app组件

</script>

vue的基础指令

文本指令

<body>
    <div id="app">
        <p>{{ info }}</p>
        <!-- v-text 为vue的文本指令 ="info" , info为vue实例data中的一个变量 -->
        <p v-text="info"></p>
        <p v-text="msg"></p>
        <p v-html="res"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            info: "插值表达式",
            msg: "文本指令",
            res: "<b>加粗的文本</b>"
        }
    })
</script>

属性指令

<body>
    <div id="app">
        <!-- v-bind:属性 = "变量" -->
        <!-- 若是abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 若是就想是普通字符串, 再用''包裹 -->
        <!-- : 就是 v-bind: 的简写方式 (1.经常使用 2.必定且只操做属性)-->
        <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>

        <!--最经常使用的两个属性 class | style-->

        <!--class-->
        <p :class="a"></p> <!-- 单类名 --> 
        <p :class="[a, b]"></p> <!-- 多类名 -->
        <p :class="{c: d}"></p> <!-- 了解: c为类名,是否起做用取决于d值为true|false 开关类名 -->
        <!--style-->
        <p :style="s1"></p> <!-- s1为一套样式 --> 
        <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> 

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            h_info: "悬浮提示",
            hehe: "呵呵",
            a: 'active',
            b: 'rule',
            d: false,
            s1: { // 样式1: 值1, ..., 样式n: 值n
                width: '200px',
                height: '200px',
                background: 'red'
            },
            s2: {
                borderRadius: '50%'
            },
            ta: 'center'
        }
    })
</script>

事件指令

<body>
    <div id="app">
        <!-- v-on:事件 = "变量 简写 @ -->
        <!-- 事件绑定的变量能够在data中赋值,但建议在methods中赋值 -->
        <p v-on:click="fn1">11111111111111</p>
        <p @click="fn2">22222222222222</p>
        <!--vue事件的绑定能够传自定义参数-->
        <p @click="fn3(333)">3333333333333333</p>
        <!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了-->
        <p @click="fn4">4444444444444444</p>
        <!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event-->
        <p @click="fn5(555, $event)">5555555555555555</p>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            // 事件在data中提供一个函数地址,能够实现事件
            fn1: function () {
                console.log("11111111111111")
            }
        },
        // 事件尽可能(要求)都放在vue实例的methods中
        methods: {
            fn2: function () {
                console.log("22222222222222")
            },
            fn3 (arg) {  // ES6语法
                console.log(arg)
            },
            fn4: function (ev) {
                console.log(ev)
            },
            fn5: function (arg, ev) {
                console.log(arg)
                console.log(ev)
            },
        }
    })
</script>

表单指令

<body>
    <div id="app">
        <!-- v-model = "变量" 本质操做的就是表单元素的value -->
        <!--v-model就是完成数据的双向绑定-->
        <form action="">
            <input type="text" v-model="info"> <!-- info变量就是表明输入框的value -->
            <input type="text" v-model="info">

        </form>
        <p> {{ info }} </p>
        <!--v-once只会被赋值一次,就再也不改变,而且要结合插值表达式使用-->
        <p v-once="info">{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
        // info: "初始value",
            info: ""
        },
    })
</script>

1. vue基础---介绍
2. vue指令系统介绍
3. Vue基础指令
4. electron-vue 介绍以及基础使用
5. Vue基础及指令总结
6. CMakeLists.txt基本指令介绍
7. Hadoop核心HDFS介绍以及基础指令
8. Vue基础语法介绍
9. Vue基础-框架介绍
10. Vue基础语法指令
更多相关文章...
• Spring目录结构和基础JAR包介绍 - Spring教程
• Kotlin 基础语法 - Kotlin 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• ☆基于Java Instrument的Agent实现