VUE 框架 - 爱码网

一、什么是vue

它是一个构建用户界面的JAVASCRITPO框架

二、怎么使用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-if 和v-show的区别：
     v-if改为false时，它就在dom中不存在，它被注释代替，而v-show改为false是，它在dom中存在，只是在v-showzhong 添加了隐藏属性

v-for：根据变量的值来循环渲染元素
v-on：监听元素事件，并执行想应的操作
对数组的操作：
push
pop
shift
unshift
splice
reverse

v-bind:绑定元素的属性来执行相应的操作

v-bind可以被：代替
v-on可以被@代替

v-model:实现了数据和视图的双向绑定
v-model份三步绑定：
        1、把元素的值和数据想绑定
        2、当输入内容时，数据同步发生变化，视图 ----数据的驱动
        3、当改变数据时，输入的内容会发生变化，数据-----视图的驱动
自定义指令：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <p>
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        }
    })
</script>

</body>
</html>

index