Vue框架

一、Vue基础

• 添加Vue到网页(无需保存到本地)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

• Vue生命周期

  
  

二、Vue 实例

创建Vue实例：

var vm = new Vue({
  el: '元素选择器',
  data: {
    数据项
  }
  methods:{
    函数项
  }
})

三、属性绑定

1.HTML Class绑定

Vue属性绑定支持对象绑定和数组绑定。其中，数组元素可以是三目表达式。

• 对象绑定时，对象属性的名称代表样式的名称，属性的值（true或false）表明了该样式是否应用。
• 数组绑定时，数组的值是一个变量名，变量的值即代表样式。

v-bind:class可略写为:class

（1）对象语法

示例：

<div :class="{active: isActive, 'text-danger':hasError}"></div>
<div :class="{active: isActive, 'text-danger':!isActive}"></div>
<div :class="classObj"></div>

data:{
    isActive:true,
    hasError:true,
    classObj:{
        'textColor':true,
        'textSize':true
    }
}

运行结果

（2）数组语法

示例：

<div :class="[style1, style2]">数组语法</div>
<div :class="[hasA ? styleA : styleB]">三目表达式</div>

2.内联样式绑定

v-bind:style可略写为:style

（1）对象语法

示例：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">对象语法（驼峰命名）</div>

data{
    activeColor: 'red',
    fontSize: 30
}

（2）数组语法

示例：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

四、事件处理

v-on:事件名可简写为@事件名

1.事件绑定

<div @click="changeBg()" id="div" :style="{background:bgColor}"></div>

2.事件修饰符

<!-- 阻止冒泡 -->
<div @click="outter" style="width: 300px;height: 300px;background: gray;">
    <div @click.stop="inner" style="width: 100px;height: 100px;background: green;"></div>
</div>

五、条件渲染（分支）

• v-if：直接根据条件重新渲染节点。
• v-show：通过改变节点的display属性来实现节点的显示隐藏切换 （适合需频繁切换状态的节点）。

1.v-if

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 80">良好</div>
<div v-else-if="score >= 70">中等</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

2.v-show

<div v-show="score >= 90">优秀</div>
<div v-show="score >= 80 && score < 90">良好</div>
<div v-show="score >= 70 && score < 80">中等</div>
<div v-show="score >= 60 && score < 70">及格</div>
<div v-show="score < 60">不及格</div>

运行结果

六、列表渲染（循环）

示例：

<table>
    <tr v-for="student, key in students">
        <td>{{key}}：{{student.name}}</td>
        <td>{{student.gender}}</td>
        <td>{{student.age}}</td>
    </tr>
</table>

七、计算属性和侦听器

1.计算属性

<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>

computed:{
    reversedMessage:function(){
        return this.message.split('').reverse().join('');
    }
}

计算属性会缓存结果，只要数据没有改变，就一直会使用计算后的结果（缓存）。而使用方法不会缓存。
示例：

<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Method reversed message: "{{ reversedMessage_method() }}"</p>
<p>Method reversed message: "{{ reversedMessage_method() }}"</p>
<p>Method reversed message: "{{ reversedMessage_method() }}"</p>

computed:{
    reversedMessage:function(){
        console.info("computed");
        return this.message.split('').reverse().join('');
    }
},
method:{
    reversedMessage_method(){
        console.info("method");
        return this.message.split('').reverse().join('');
    }
}

运行结果

2.侦听器

示例：

<button @click="changeA">改变a</button>
<button @click="changeStu">改变Student</button>

watch:{
    a:function(val, oldval){
        console.info("新的值是" + val);
        console.info("旧的值是" + oldval);
        // this.a = oldval;
    },
    student:{
        handler:function(){
            console.info("student改变了!");
        },
        deep:true
    },
},
methods:{
    changeA(){
        var newA = parseInt(Math.random() * 10);
        this.a = newA;
    },
    changeStu(){
        var num = parseInt(Math.random() * 10);
        this.student.name = this.student.name + num;
    },
}

八、表单输入绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

九、过滤器

1.过滤器定义

• 本地过滤器
  本地过滤器在一个组件的选项中定义。

filters: {
  过滤器名: function (value) {
    函数体
  }
}

• 全局过滤器
  全局过滤器在创建 Vue 实例之前定义。

Vue.filter("过滤器名", function(value){
    函数体
});

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器。

2.过滤器使用

过滤器可以串联。

{{ message | filter }}
{{ message | filterA | filterB }}

十、自定义指令

• 全局指令注册

Vue.directive('指令名', function(el){
    函数体
})

• 局部指令注册

directives:{
    指令名:function(el){
        函数体
    }
}

• 使用指令

<p v-指令名></p>

十一、组件注册

注意：在组件中，data必须是函数。

1.全局注册

var COMP = Vue.extend({
    template:'组件模板',
    data(){
        return {
            数据项(键:值)
        }
    },
    methods:{
        方法项
    }
})
Vue.component("组件名", COMP)

2.局部注册

components:{
    '组件名':{
        template:'组件模板',
        data(){
            return {
                数据项(键:值)
            }
        },
        methods:{
            方法项
        }
    }
}