Vue2框架总结

Vue语法

1.基本介绍

　　vue两大特点：响应式编程、组件化。

　　vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

　　vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

　　MVVM设计模式:

　　　　model模型：指的是后端传过来的数据。

　　　　view视图：指的是所有看到的页面，可以理解为将数据以某种方式呈现给用户。

　　　　ViewMode：l指的是视图模型，他是连接view和model的桥梁。

2.语法简介

　　组成：

<template>
　　HTML代码
　　v-html：原样输出html,v-text：原样输出文本，{{}}插值表达式：data中定义的变量或者常量这里直接可以使用；

　　v-model：双向数据绑定，与data中的数据或者属性可以双向绑定；

　　　v-bind/： 自定义名字：v-bind:id="…" 绑定id名字，v-bind:title="…"绑定title属性，v-bind:style="…" 绑定样式属性，v-bind:…="…"绑定自定义属性；

　　　v-on/@：绑定事件，例如<input type=“button” value=“点击” name="" id="" @click.访问修饰符=“btnHandler”>

　　　　　访问修饰符：.stop：阻止冒泡行为.prevent：阻止默认行为.capture：事件捕获机制，从外往里执行.self：被修饰的元素只能通过自己来触发事件，只会阻止自己的冒泡行为，不会阻止别的元素.once：只触发一次事件函数

　　　v-for：循环 <p v-for="item in user" :key="item.id"> <input type="checkbox"> {{item.name}} </p>

　　　v-if和v-show：v-if是真实的条件渲染，不适合频繁切换，v-show:是隐藏，合适频繁切换

</template>

<script>
export default {
    name:"组件名",
    data(){
        return{
　　　　　　定义全局变量或常量，这里的变量或者属性值可以使用this来使用
        }
    },
    props: {
　　　　父子组件通信时使用，准确来说是父组件向子组件传参使用props
　　},
    created() {
　　　　钩子函数：八个：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destoryed，

　　},
    mounted() {

　　　　钩子函数

　　},
    methods:{
　　　　定义的方法

    },
    computed:{
　　　　计算属性或者方法
    },
}
</script>

<style>

</style>