VUE框架详解-优快云博客

本文链接：https://blog.youkuaiyun.com/bokerr/article/details/99660617

大致介绍

VUE 是MVVM框架，由事件、数据驱动视图

主要特点如下：

*简单：中文文档、对优秀框架的简化

*更小：

*更快：运用虚拟DOM技术，与JQuery操作DOM相比更快

*响应式：

*组件核心：一个页面由多个组件构成

缺点：整个项目打包，造成搜索引擎识别困难

Vue指令：vue隔离对DOM的操作，当需要操作DOM时，需要借助内置指令和自定义指令完成。

具体内容：

$ VUE实例对象，如： $.data(参数data的实例) $.el(相当于对应的实例对象)

v-html 输出文本是若文本中有html标签将会输出对应的标签

过滤器：用作常见文本格式化

v-if、v-else、v-else-if 条件语句

v-show :在data中定义ok为true或false决定当前标签是否显示

<h1 v-show="ok">Hello!</h1>

v-for:循环语句：

<div id="app">
  <ol>
    <li v-for="arr in arrs">
      {{ arr.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    arrs: [
      { name: 'value1' },
      { name: 'value2' },
      { name: 'value3' }
    ]
  }
})
</script>

计算属性： computed 用于处理复杂的逻辑

可以使用 methods 来替代 computed，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，每当页面重新渲染时，函数便会重新执行。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'comutedTest!'
  },
  computed: {
    //getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

watch: 属性监听，用来相应数据的变化

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    watch : {
        //当kilometers发生变化，换算两个输入框，更新
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
})
</script>

v-bind绑定样式：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
//其中active和text-danger是style样式类
//布尔值isActive和hasError决定这两个样式是否被引用

样式内联：

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">VUE 学习</div>
</div>

v-model：数据双向绑定

个人关于v-model的理解：重点还是 “绑定” 不论与data中的属性值绑定的是单个的文本框，还是分组了的复选框，一旦进行绑定，代表了两者指向了相同的引用，可以理解成java的浅拷贝。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST VUE</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app1">
  <p>input 元素：</p>
  <input v-model="message">
  <p>消息是: {{ message }}</p>
	
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2"></textarea>
</div>

<script>
new Vue({
  el: '#app1',
  data: {
    message: 'messageOfInput',
	message2: 'messageOfTextArea'
  }
})
</script>

<!--|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||-->
<div id="app2">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app2',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>


</body>
</html>

VUE.js组件

<div id="test">
    <tests></tests>
</div>
<script>
    Vue.component('tests',{
        template: "<div style='height:100px;width:200px;background-color:red;'></div>"
    });
    var vm = new Vue({
        el: "#test"
    });
</script>

上面的代码中定义了一个全局组件,"tests" 个人理解成把一片的变迁代码封装了，这样可以让代码复用率更高。效果如下：

局部组件：

注意：组件名不能带有大写字母（反正我这一开始把组件名写成了tempTest是显示不了，全改为小写了才能显示的）

<div id="test2">
    
    //本局部组件只能在父模板可用
    <temptest></temptest>

</div>

<script>
var child = {
        template: "<h1>HELLO WORLD!</h1>"
    }
var VM = new Vue({
    el:"#test2",
    components:{
        'temptest': child
    }
})
</script>

效果如下：

动态Prop：父组件通过prop传递属性

个人的理解是：prop为父组件data中的参数设置了别名message；父组件中定义了一个全局组件child，在定义的全局组件中通过该别名绑定数据；在子组件中通过别名可以引用父组件中的参数。(可能理解有错，欢迎大佬批评)

<!DOCTYPE html>
<html>
    <head>
        <title>TEST VUE</title>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="test1">
            <input v-model="parentData"><br>
            <child v-bind:message="parentData"></child>
        </div>
        <script>
            Vue.component('child',{
                props: ['message'],
                template: "<h1>{{message}}</h1>"
            });
            var vm = new Vue({
                el: "#test1",
                data:{
                    parentData: "test Parent DATA!"
                }
            })
        </script>
        
        <!--实例2-->
        
        <div id="test1">
            <arrs v-for="item in arr" v-bind:array="item"></arrs>
        </div>
        <script>
            Vue.component('arrs',{
                props: ['array'],
                template: "<h2>{{array.name}}</h2>"
            });
            var vm = new Vue({
                el: "#test1",
                data:{
                    arr: [
                        {name: "bokerr"},
                        {name: "jira"},
                        {name: "jane"},
                        {name: "tom"},
                        {name: "jackson"},
                        {name: "tomcat"}
                    ]
                }
            })
        </script>


    </body>
</html>

自定义事件：props让父组件可以向子组件传递参数，而子组件向父组件传递信息则需要自定义事件；

个人理解：<my-comp></my-comp>是一个全局组件，在定义全局组件时通过 "emit" 定义了一个 "keywords"关键字，父组件中的方法TotalMethod通过v-on与该关键字绑定，那么当子组件发生变化时将触发/驱动该父组件方法"TotalMethod"。

而此处需要注意的是，data是一个方法，类似直接返回了一个counter实例，如果data是一个对象，那么结果是所有的组件实例公用一个参数。

this.$emit('keywords');<!--触发绑定在keywords关键字上的事件-->
this.$on('keywords');<!--监听绑定在keywords关键字上的事件-->

<div id="test1">
        <h1>{{total}}</h1>
        <my-comp v-on:keywords="TotalMethod"></my-comp>
        <my-comp @keywords="TotalMethod"></my-comp>
    </div>
    <script>
        Vue.component('my-comp',{
            template: '<button @click="testMethod">{{counter}}</button>',
                data: function(){
                    return {
                        counter: 0
                    }
                },
            methods: {
                testMethod: function(){
                    this.counter += 1;
                    this.$emit('keywords');
                }
            }
        });
        var VM = new Vue({
            el: "#test1",
            data: {
                total: 0
            },
            methods:{
                TotalMethod: function(){
                    this.total += 1;
                }
            }
        })
    </script>

自定义指令：感觉没啥好说的，都是大部分都是关键字

局部指令

<script>
 var vm = new Vue({
            el: "#app",
            directives: {
                focus:{
                    inserted: function(el){
                        el.focus();
                    }
                }
            }
        });
</script>