阅读 274

Vue 笔记 第 1~2 天

Vue -渐进式JavaScript框架


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
})
复制代码

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

文章分类
前端
文章标签