Vue总结篇上 （看完你就学会整个Vue）

1.vue(渐进式javascript框架)

 vue特点

* 组件化 分为独立的一块块

* 声明式  直接有目的去做一件事

* 虚拟DOM 形成一块虚拟区域 你用的时候去匹配一下 有的话直接拿过来用  

* 遵循MVVM的模式

* 编码简洁

* 本身只关注UI，可以轻松引入vue插件或其他第三方库

* 借鉴angular的模板与数据绑定

* 借鉴react的组件与虚拟DOM

 1.1 vm雏形

<div id='app'> 这里是V视图模块 {
  {插值写data里面的数据}}</div>  
<script>
    Vue.config.productionTip = false (防止vue在启动时有提示)
      const vm = new  Vue({        (创建vue实例 这里是VM:视图模型)
          el:'#app',                   (为谁服务就绑定谁id)
          data:{                       (为el服务的 一个家只认定一个主人)
               name:'Sakura',          (这里是M模型)
               age:'22'    
          },
          methods:{     
               change(){
               this.msg = '数据改变了'
                        }              (vm的方法 this指向vm)
       })  
       v.$mount("#app")                 (el的第二种写法)
       data:function(){
                    return{
                        name:'Sakura'
                        age:'22'        (data的第二种写法)
                    }
                }
</script>

1.2vue中的模板

 <div id="app">
    {
  { msg }} 
    {
  { 2+4 }}
    {
  { change() }}
    {
  { parseInt('1.234') }}
    {
  { isBeauty?'大美女':'好姑娘' }}
  </div>

在视图上 输出 vm上数据的 
类似于console.log()只不过 在控制台输出
vue中的模板
{
  {数据}}
特点：
 1，不能写语句 
        var a=10;
        a+b
    2，能不能流程控制 不能写流程控制 只能写三目 或者短路
    3,模板中 js全局变量有些可以使用有些不可以使用（vue有一个白名单）
    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
    'require' 
重点：
  1 m是什么（vm上的数据 在 new Vue传入对象中的data属性中定义，直接渲染到vm上 作为vm的属性的）
  2 v是指 vm el控制的范围（元素）
  3 vm就是 new Vue返回的实例（控制el内部视图）
  m改变视图会自动刷新

  4 {
  {}} 模板是用来在视图上 渲染 m数据 (js环境)

1.3 vue指令

## vue指令
1. vue有两种绑定方式 
     1.单向绑定(V-bind)：数据只能从data传向页面  简写 :属性 将属性的值 变成动态的值  :id="a" 可以绑定id  只有a是真的就行
     2.双向绑定(V-model): 数据两边是双向流通的 一般用于表单类型input元素上
2. v-html  将内容解析成 html （慎重使用，一般后台返回富文本内容时使用）
3. v-text   就是出现纯文本不解析标签
4.v-on简写  @click:事件 将元素的事件 与 methods中的方法进行绑定（方法变成事件函数） 
   @click="fn2(222, $event) 这样就能传参 
5.  v-show 将元素的display属性的值 与 一个布尔值进行绑定
6. v-cloak  [v-cloak]{display:none;} 实例加载完成后 vue会自动去除解决闪烁

1.3.1 vue指令案例

div点击消失
<div id="app">
    <button @click="showHide" id="btn">{
  {isShow?'消失':'显示'}}</button>
    <div id="box" v-show="isShow"></div><!-- v-show   也可以直接写true 和false -->
  </div>
  <script src="./vue.js"></script>
  <script>
   // 创建vm (Vue的实例)
   const vm = new Vue({
     el: '#app', // el定义vm 控制的范围
     // m数据
     data: {
       // 控制某个元素显示消失
        isShow: true
     },
     methods: {
       showHide(){
         // 改变m
         this.isShow = !this.isShow;
       }
     }
   })
  </script>

点击显示对应图片
 <div id="app">
    <div v-bind:id="a">aaaaaa</div>
    <div v-bind:aa="aa">bb</div>
    <label for="img1">佳丽1</label>
    <input type="radio" id="img1" v-model="imgSrc" value="https://img0.baidu.com/it/u=3849172531,2173774839&fm=26&fmt=auto&gp=0.jpg">
    <label for="img2">佳丽2</label>
    <input type="radio" id="img2" v-model="imgSrc" value="https://img0.baidu.com/it/u=2223756706,3188697330&fm=26&fmt=auto&gp=0.jpg">
    <hr>
    <img :src="imgSrc" alt="">
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        AAA:'XXX1',
        a: 'box',
        aa: '自定义属性的值',
        imgSrc:'https://img0.baidu.com/it/u=3849172531,2173774839&fm=26&fmt=auto&gp=0.jpg'
      }
    })
  </script>


点击传参
 <div id="app">  
    <button @click="fn1">按钮1</button>  
    <button @click="fn2(222, $event)">按钮2</button>  
  </div>
  <script src="./vue.js"></script>
  <script>

    const vm = new Vue({
      el: '#app',
      
      methods: {
        fn1(e){
          // 这种方式绑定 fn是事件函数
          console.log(e,111);
          console.log(e.target);//获得事件源 地址
          
        },
        fn2(n, e){
          console.log(n);
          console.log(e,222);
         
        }
      }
    })
    /* 
    原生js中绑定事件
  
    btn.onclick = function(){}
    */
  </script>

1.4事件修饰

```
    修饰符是由点开头的指令后缀来表示的。赋予了事件一些特殊的功能 addEventListener("事件名",函数,true/false)