Vue的基本语法和常用指令

vue介绍

vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue特点

mvvm：双向数据绑定 mv vm 无需关注 dom操作（无需关注视图），只需要关注数据即可

组件化：组件 页面上的 公共小单元（如 网页头部 商品卡片）

vue基本语法

首先用script标签引入vue.js

let vm = new Vue({
            el:"#box",
            data:{  //用于存放vue的状态
                msg:123
            }
        })
        vue mvvm原理
        利用es5 defineProperty()
        拦截 数据的设置和获取，动态的改变视图

vue模板的语法

{{}} 模板  插值  展示 vue 状态（可以是一个数据也可以是一个函数返回数据）

 {{}} 可以写 简单的js表达式 （加减乘除 三目 短路）
注意：
    1，不能写语句
        var a=10;
        a+b
    2，能不能流程控制 不能写流程控制 只能写三目 或者短路
    3,模板中 js全局变量有些可以使用有些不可以使用（vue有一个白名单）

vue外部挂载实例

let vm = new Vue({
     data:{
        msg:123
     }
 })
 vm.$mount(document.querySelector("#box"));

vue中的指令

vue 扩展了 标签属性的功能，赋予它一些特殊的功能

语法： v-指令名字
使用方法：同标签的属性
v-model   将表单的值 与 data中的状态 进行 双向绑定
v-text    将元素的内容 与data状态进行双向绑定
v-html    将内容解析成 html （慎重使用，一般后台返回富文本内容时使用）
v-bind:属性  扩展了是任意属性（可以包括自定义属性，也可以是标签默认的属性）
            干了什么事：
                将属性的值 变成动态的值，和 vue的data中的state进行绑定
    简写：    :属性
v-on:事件
    将元素的事件 与 methods中的方法进行绑定（方法变成事件函数）
    事件调用时  全局变量 $event 保存了事件对象
    简写： @事件
注意：
    vue
        v-on:事件="这里不适合写过多的业务逻辑代码"
        {{ 也不适合写过多的业务逻辑代码 }}
原因：
    只能使用一些简单的表达式，不能写语句，不能使用 逻辑控制语句，很多js全局变量也不能使用（白名单里面的才能用）
    视图 中一般只简单的展示数据，调用命令，不适合 写过多的业务逻辑代码，否则会造成，代码混乱（高耦合）

vue中的事件修饰符

       修饰符是由点开头的指令后缀来表示的。赋予了事件一些特殊的功能 addEventListener("事件名",函数,true/false)
    .stop  阻止事件冒泡
    .prevent  阻止默认事件
    .capture    在捕获阶段触发
    .self   只能通过元素本身触发，后代元素无法触发
    .oncvuee  只触发一次

vue条件渲染

一切以数据为核心 不要去操作dom
  v-if
  v-else-if
  v-else

  v-show

  v-if和v-show的区别以及使用场景？
    1，当元素消失时不出来时。v-show 是display:none v-if直接dom移除节点
  都有啥使用场景：
    场景1： 代码块 代码很多，默认是不显示的，后面有条件的显示   v-if
      首次加载 惰性的

    v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

Vue组件 component

 组件化：组件可以理解为 网页上 独立的一个部分 （如网页头部）
 vue:  组件也是Vue实例 （实例的属性 组件都有）
 如何定义一个组件
 let CommonHeader = {
  template:""
  data(){
   return{

   }
  },
  methods:{

  }
 }
 如何区分全局组件和局部组件？ 在Vue上注册的就是全局组件 在某个组件或者实例中注册的就是局部组件
 全局组件 
  在任意的组件和实例上使用
  Vue.component("组件名",{
   template:"",
   data(){
    return {

    }
   },
   methods:{

   }
  })
 
 局部组件  只能在注册的组件或者实例上使用

 注意：
  1，组件中的data 必须是 一个函数 返回一个对象
  2，每个组件有自己的作用域，组件内部的数据，和方法只能在组件内部使用（如向跨组件，需要组件间通信）
  3，组件的命名 可以有两种 1大驼峰 2下划线命名法
   eg:
    CommonHead   common-head
   使用时二者都一样
    <common-head></common-head>
  4，局部组件 在哪个组件的components中注册，就只能在这个组件的template中使用
  5，组件的template 有且只能有一个根标签（元素）

组件间的关系：父向子传参： props传参

 1，简单用法
  在子组件中 定义props属性 值是一个数组 数组中 每个元素，就是 从父组件接收的 数据
  子组件
  let  CommonHead={
            template:`
               <div>   
                    <h1>我是 {{title}} 的标题</h1>
                    <h2>我是 {{ subTitle }} </h2> 
               </div>
            `,
            props:['title',"subTitle"]
        }
  在父组件中 使用 子组件 的自定义标签中 通过 属性的形式 传入 父组件的数据
  父组件
  let Home = {
            template:`
                <div>
                    <h4>我是home组件</h4>
                    <common-head :title="myTitle" :subTitle=" '我是home组件副标题' "></common-head>
                </div>
            `,
            data(){
                return {
                  myTitle:"首页组件"
                }
            },
            components: {
                CommonHead
            }
        }

 2，props验证
  上面的props用法，没有校验 props数据类型，以及必须填写，默认值 等，会造成 程序 存在 不稳定性 （代码不健壮）

  验证主要验证三个类型：
   数据类型
    String
    Number
    Boolean
    Array
    Object
    Date
    Function
    Symbol
   必须填写
    required:true/false 如果为false 就别写了
   默认值：
    default
  注意：props 不再是数组 而是对象

  props:{
   a:String,
   b:{
    type:String,
    required:true
   },
   c:{
    type:Number,
    default:0
   }
  }
  注意：
   1，当 一个数组 类型为 数据的时候 传数据时，不能直接静态传一个数据（传的是字符串）
   2，数据类型为 Array，或者Object 默认值 必须是一个 函数 返回一个默认值
   3，props 能在子组件中 直接改变值吗？  不能（单向数据流）

子向父传参

在子组件中 通过
 名字 Child组件
 this.$emit("事件名",携带的数据)
 父组件 Parent中使用
 <child @事件名="fn"></child>

 {
  methods:{
   fn(data){
    data就是子组件传过来的数据
   }
  }
 }

兄弟之间组件传参

原理：利用一个第三方的 组件 进行弹射事件，且 进行接收事件
let  bus = new Vue();
弹射：
bus.$emit("事件名字",携带的参数)
监听事件：
bus.$on(事件名,回调函数)