Vue.js——框架

Posted 2020-10-22 Neither Candidate

一.什么是VUE

vue 是一个构建用户界面的javascript框架

特点：轻量，高效

特性：双向数据绑定，数据驱动视图

 

二.vue的使用

1.引入vue.js

<script src=vue.js></script>

2.展示html

<div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>

3.建立vue对象

    new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: ""
            }
        })

 

三.　通过指令在元素中进行插值

指令：就是带有  V-  前缀的特殊属性

v-text: 在元素当中插入文本
v-html: 在元素不中不仅可以插入文本，还可以插入标签
v-if: 根据表达式的真假值来动态插入和移除元素
v-show: 根据表达式的真假值来动态隐藏和显示元素
v-for: 根据变量的值来循环渲染元素
v-on: 监听元素事件，并执行相应的操作
v-bind:绑定元素的属性来执行相应的操作

v-model:实现了数据和视图的双向绑定
 分成了3步：
 1）把元素的值和数据相绑定
 2）当输入内容时，数据同步发生变化，视图  ---》数据的驱动
 3）当改变数据时，输入内容也会发生变化，数据 ---》视图的驱动

自定义指令：

 new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{

            },
            directives: {
                focus: {    //指令的名字
                    //当绑定的元素显示时
                    inserted: function (tt) {
                        tt.focus();
                    }
                }
            }