Vue -渐进式JavaScript框架

• Vue中文官网

---

MVVM的介绍

• MVVM ===> M/V/VM
• M: model 数据模型（专门操作数据）
• V：view视图 （我们的页面）
• VM：ViewModel 视图模型

---

MVC的介绍

• M：Model 数据模型
• V：View 视图
• C：contorller 控制器 （是视图和数据沟通的桥梁，用于处理业务逻辑）

---

template

类似于文档碎片的作用 作为一层盒子包着元素 但他不会处理成具体的元素 [不会渲染在HTML中]

---

指令

• 释：指令是已v-为前缀的特殊属性
• 作用： 当表达式的值发生改变时，将其产生的连带影响，响应式地作用于DOM
• 一定是放在行内属性里边的

v-cloak

• 作用：解决网页刷新的时候小胡子出现的问题
• 注意：v-cloak配合css样式使用 设置display：none
  一般放在根元素行内属性里

<style>
[v-cloak]{
    display:none;
         }
</style>
<div v-cloak> </div>
复制代码

v-text

• 作用：只能识别元素的文本显示(除标签以外的内容就是) – 不能识别标签

• 举例： 只会识别内容：你好吗？ —- h1不会被识别

<div v-text="arr">  <h1> 你好吗？ </h1>  </div>
复制代码

v-bind

• 作用：放在原生行内属性前面 可以吧等号后面的值当成变量处理

–:class=”如何灵活运用”

    完整语句
<div v-bind:class="ary">  </div>
    缩写语句
 <div :class="ary">     </div>
复制代码

v-on

• 作用：绑定事件
• 重点：绑定的时间定义在methods里边

完整语句
<div v-on:click="fn">   </div>
缩写语句
<div @click="fn">       <div>
复制代码

v-model

• 作用：用于表单元素上创建双向绑定
• 作用：把元素的值和变量绑定在一起

      输入框
 <input type="text" v-model="value">
     单选框
<input type="radio" v-model="sex">
    多选框
 <input type="checkbox" value="1" v-model="ary">
    下拉框
 <select name="play" v-model="play">
 下拉框内容
 <option value="嘿嘿"></option>
 </select>
 
复制代码

v-for

• 作用 ： 循环元素多次渲染
• 用法 ： 配合methods使用
• 案例 ： 在搜索框输入内容回车添加到数组里边 点击按钮执行fn2函数 删除这项数组

item 为当前项，index 为索引 在data中创建一个ary数组
<ul>
<li v-for="(item, index) in  ary"> </li>
 <button @click="fn2(index)"> </button>
</ul>

  methods:{
            fn2(index) {
                this.ary.splice(index, 1)
            },
            fn(e) {
                if(e.keyCode===13){
                      this.ary.push(this.info),
                      this.info=""
                }
            }      
        }
复制代码

v-if 和 v-show

• 相同点：控制元素是否出现
• 不同点：v-if 通过控制display：none/block
  ：v-show 通过false/true 控制元素是否在HTML中

<div v-show="1<2">我是none 还是 block</div>
<div v-if="1<2">我出现在HTML结构中吗？？？</div>
复制代码

v-if v-else if v-else

• 作用：像javascript中的一样使用 三者配合使用

  <div v-if="isshow">条件符合我就出来</div>
  <div v-else-if="false">不符合我就出来</div>
  <div v-else="1">都不符合我就出来</div>
复制代码

优化性能的指令

v-pre

• 作用：vue会跳这个元素和它的子元素的编译过程，把他当成原始标签来处理
• 用法：写在不需要编译的元素的根元素行内属性上

<div v-pre>{{这里写的什么就显示什么包括小胡子}}</div>
复制代码

v-once

• 作用：只渲染一次这个元素 随后重新渲染也不会更改其及其子元素的内容

<div v-once>{我是好男人永远不会变因为我有`v-once`}</div>
复制代码

过滤器 全局-filter 局部-filters

• 作用：更改输出的返回值 最后的输出由过滤器的返回值决定
• 注意 1：使用全局过滤器 要先创建全局过滤器在创建Vue实例
• 注意 2：如果全局过滤器和局部过滤器重名会优先使用局部过滤器

 过滤器的串联使用 price变量传给fn  fn的返回值返回结果传给fn2  
 <div id="add">
        {{price | fn | fn2}}
           {{str | ap}}
 </div>
\===ap函数名  str传进来的值===\
  Vue.filter("ap",function(str){
        return str+"这是处理过的"
    })
    let vm = new Vue({
        el: "#add",
        data: {
         price: "我是初始值",
        },
        //局部过滤器
        filters: {
          \--- number 是传进来的  我是初始值 ---\
            fn(number) {
                return "fn更改过" + number;
            },
           \fn返回的值\
            fn2(unde) {
                return "我是fn2更改过得" + unde
            }
        }
    })
      let mv= new Vue({
        el: "#app",
        data: {
         str:"我是App"
        },
    })
复制代码

函数执行 methods

• 定义事件响应函数
• 定义组件公共处理函数

监听数据变化 watch

• 作用：当data中的值发生改变后就会触发对应的函数，完成响应的监视操作
• Vue $stach

new Vue({
  data: { a: 1,
  b: { age: 10 } 
  },
  watch: {
    a: function(item1, item2) {
      // item1 表示当前值
      // item2 表示旧值
      console.log('当前值为：' + item1, '旧值为：' + item2)
  }
})
复制代码

计算属性 Computed

• 用法：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会重新求值

特点：调用的时候才会执行、有缓存、

• 注意：computed中的属性不能与data中的属性同名，否则会报错

var vm = new Vue({
  el: '#app',
  data: {
   pig: '赵',
   dag: '天'
  },
  computed: {
    fullname() {
      return this.pig + '日' + this.dag
    }
  }
})
复制代码

---

Object.defineProperty

• 作用：监听属性的变化
• 传参：第一个参数(a)是目标对象
• ——–第二个参数(“b”)是需要定义的属性或者方法的名字
• ———第三个参数是目标属性有拥有的特性

var a= {}
Object.defineProperty(a,"b",{

})

复制代码

descriptor默认值

configurable 总开关

• 作用：总开关
• 默认值：false （如果是false 第二次就不能设置了）

var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
Object.defineProperty(a,"b",{
  configurable:true
})
//报错
复制代码

writable 只读

• 作用：设置只读
• 默认值：false

var a = {}; 
Object.defineProperty(a, "b", { 
    writable : false 
    });
复制代码

enumerable 是否可以枚举

• 作用：是否可以枚举（循环）
• 默认值：ture

var a= {}
Object.defineProperty(a,"b",{
  enumerable:true
})
复制代码

configurable 是否可删除

• 作用：是否可以删除
• 默认值：false

var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
复制代码

希望能对你有所帮助，感谢阅读～笔芯❤️