01-Vue指令-Day1

1 什么是vue？

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

优点：
易用
灵活
高效 （20kb左右）
数据驱动（只需要操作数据 视图自动渲染）

2 特性：

轻量： 非常小
数据绑定：  双向数据绑定 
指令系统： v-* 
插件化： vue-router vuex  axios
组件化： 就是模块化  增强代码的复用性  可维护性

3 vue的安装

1) 下载资源文件 vue.min.js 或 vue.js

2) script 引入
    

4 vue实例里面常用选项：

let vm = new Vue({
    el: '#app',    // el 主要是挂载dom
    data: {        // data 主要用来准备数据

    },
    methods: {     // methods 主要用来写方法的
        方法名 () {  
            // 方法执行的代码
        }
    }

})

5 架构认识：

MVC  M: 模型  V：视图  C: 控制器
MVVM：   M: 模型  V：视图  VM: 视图模型

6 vue表达式

基本语法：
  双大括号 {{ 表达式 }}
  备注： 表达式只能输出唯一结果

7 vue指令

1） 什么是vue指令？
    带有 v-前缀的标签属性 就是指令

2) v-text:  绑定文本数据，不能解析HTML标签
3) v-html:  可以解析 html标签 

4) v-show: 通过控制display属性来切换dom元素的显示和隐藏
5) v-if：  如果为true 渲染dom， 如果有false 删除dom
    区别： v-show 只是切换显示和隐藏 v-if会删除和重建dom，
    频繁切换 用 v-show  

6) v-if  v-else-if  v-else:
    条件判断  只要找到第一个满足的条件 下面就不判断了

7) v-for:  循环
    a) 循环数组
        <标签  v-for="元素 in 数组">  
        例子： 


    b) 循环数组 带 索引
        <标签  v-for="(元素, 索引) in 数组">  
        例子： 


    c) 循环对象
        <标签  v-for="元素 in 对象">  
        例子： 


    d) 循环对象 带 键 索引
        <标签  v-for="(元素, 键, 索引) in 对象">  
        例子： 



8) v-bind:  绑定动态数据(把原生自带属性 变成动态属性)
    a) 正常写法：
        <标签 v-bind:标签属性名字="表达式">
        例子： 

    b) 简写：
        <标签 :标签属性名字="表达式">
        例子： 

    c)  :class  动态绑定 class
        <标签 :class="{类名：表达式}">

    d)  :style  动态绑定 style

9) 其他指令：
    v-pre  不编译模板 直接输出
    v-once 只渲染一次
    v-cloak  隐藏没有编译的模板

10) v-on  事件绑定
    a）
        正常写法：  
            <标签 v-on:事件句柄="表达式或者事件处理函数">
            
        简写：
            <标签 @事件句柄="表达式或者事件处理函数">
            

    b）事件修饰符
        .stop 阻止冒泡
        .prevent 阻止浏览器默认行为

    c） 按键修饰符
        @keydown.enter

8 过滤器
vue实例选项： filters （过滤器）

{{ 表达式 | 过滤器 }}

new Vue({
    el: '',
    data: {},
    methods: {},
    filters: {}
})

9 计算属性
1） 什么是计算属性：
用法和methods一样的 里面写函数 返回一个唯一的结果。
区别： 计算属性依赖的数据，如果不变，就不会重新计算，有依赖缓存

new Vue({
    el: '',
    data: {},
    methods: { // 方法

    },
    filters: { // 过滤器

    },
    computed: {  // 计算属性

    }
})