时间戳

首页 > 技术文章 > Vue使用指南(一)

Vue使用指南(一)

98WDJ 2019-05-13 16:07 原文

Vue

 Vue:前台框架
 渐进式JavaScript框架
 渐进式：vue可以控制页面的一个局部，vue也可以控制整个页面，vue也能控制整个前端项目
      -- 根据项目需求，来决定vue控制项目的程度
​

使用

 1.下载：https://vuejs.org/js/vue.min.js
 2.导入vue.js
 3.在自定义的script标签中创建vue对象
 4.用vue对象来控制页面内容

 

vue的优点

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

 

挂载点与数据的渲染

<body>
    <div id="app">
        <!-- 插值表达式：插值表达式中出现的名字代表vue变量 -->
        <div class="root">{{ abc }}</div>
        <div class="main">{{ xyz }}</div>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        // 挂载点：vue对象通过el参数(挂载点)与页面结构建立联系，vue对象与页面控制的结构应该是一对一关系，所以挂载点选择id作为唯一标识
        el: '#app',
        // 在挂载点插值表达式中出现的名字是变量，需要vue对象通过data提供
        data: {
            abc: '内容',
            xyz: 3.14
        }
    })
</script>
​

 

vue实例

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    // vue实例(对象)
    var app = new Vue({
        el: '#app',
        data: {
            msg: "message"
        }
    });
</script>
<script>
    // 如何访问 "message"
    console.log(app);
    console.log(app.$el);
    // vue的变量都是以$开头
    console.log(app.$data.msg);
    // vue实例(对象)就是挂载点
    // app找到new Vue()实例再找到页面结构id=app，然后直接访问实例中的变量
    console.log(app.msg)
</script>

 

 

实例的methods

<div id="app">
    <!-- v-on来为事件绑定方法，事件用 :事件名 标注 -->
    <!-- 语法：v-on:事件名 = "事件变量" -->
    <!-- 事件变量：由vue实例的methods提供 -->
    <button v-on:click="btnClick">{{ msg }}</button>
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "按钮"
        },
        methods: {
            btnClick: function () {
                alert('点击事件')
            }
        }
    });
</script>

 

案例：通过事件修改标签样式

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 通过不同的类名控制着一套css样式 */
        .btn {
            width: 100px;
            height: 40px;
            background: orange;
        }
        .botton {
            width: 200px;
            height: 80px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind来为属性绑定变量，属性用 :属性名 标注  eg:  :style  :class  :id -->
        <!-- 语法：v-bind:属性名 = "属性变量" -->
        <!-- 事件变量：由vue实例的data提供 -->
        <button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "按钮",
            my_style: {
                // background: 'transparent'
            },
            my_cls: 'btn'
        },
        methods: {
            btnClick: function () {
                // console.log(this.my_style.background)
                // this.my_style.background = 'yellow';
                // 修改类名就能直接对应一套css样式
                if (this.my_cls == 'btn') {
                    this.my_cls = 'botton'
                } else {
                    this.my_cls = 'btn'
                }
            }
        }
    });
</script>
</html>

 

 

实例的computed

# computed功能：将function封装给一个变量，通过该变量就可以得到该function的返回值
# 应用场景：一个变量(name)依赖于 多个变量(first_name + last_name)的值
<div id="app">
    <!-- v-model就是为表单元素 value属性 绑定变量 -->
    <p>
        姓：<input type="text" placeholder="姓" v-model="first_name">
    </p>
    <p>
        名：<input type="text" placeholder="名" v-model="last_name">
    </p>
    <p>
        <!-- 插值表达式中可以书写  变量表达式 -->
        姓名：<span class="span">{{ name }}</span>
    </p>
</div>
<script src="js/vue.min.js"></script>
<script>
    // vue实例(对象)
    var app = new Vue({
        el: '#app',
        data: {
            first_name: '',
            last_name: '',
        },
        computed: {
            name: function () {
                if (this.first_name == '' && this.last_name == '') {
                    return '姓名'
                }
                return this.first_name + this.last_name
            }
        }
    });
</script>

 

 

实例的watch方法

# watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数
# 应用场景：多个变量(first_name、last_name)依赖于一个变量(name)
<div id="app">
    <p>
        姓名：<input type="text" placeholder="姓名" v-model="name">
    </p>
    <p>姓: {{ first_name }}</p>
    <p>名: {{ last_name }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: "",
            first_name: "姓",
            last_name: "名",
        },
        watch: {
            name: function () {
                // eg: name = “张三”
                this.first_name = this.name[0];  // 张
                this.last_name = this.name[1];  // 三
            }
        }
    });
</script>

 

实例的delimiters

<body>
    <div id="main">
        <!-- 查找表达式 {{ }} 符号与其他语言冲突，可以自定义表达式的符号 -->
        <!-- 实例的 delimiters: ['左侧符号', '右侧符号'] -->
        {{ msg }}{{{ msg }}}${ msg }
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    // vue实例(对象)
    new Vue({
        el: '#main',
        data: {
            msg: "信息"
        },
        // delimiters: ['{{{', '}}}'],
        delimiters: ['${', '}'],
    });
</script>

 

实例的生命周期钩子

# 学习目的：
# 钩子：满足某种条件被（系统）调用的方法
# 在一个vue实例，从创建到销毁，整个过程中或产生一些时间节点，这些时间节点都会回调一些指定名字绑定的方法，在这些函数中去完成特点时间点的业务功能
​
new Vue({
    el: '#app',
    data: {
        msg: "message"
    },
    methods: {
        fn: function () {
            return '123'
        }
    },
    beforeCreate: function () {
        console.log('实例要被创建了');
        console.log(this.msg)
    },
    created: function () {
        console.log('实例已经创建了');
        console.log(this.msg);
        console.log(this.$el)
    },
    mounted: function () {
        console.log('实例已经渲染到页面');
        console.log(this.msg);
        console.log(this.$el);
        console.log(this.fn)
    },
    '生命周期钩子名': function () {
        console.log('该时间点需要完成的业务逻辑');
    },
});

 

 

 

推荐阅读