美文网首页
Vue基础内容，Vue入门

Vue基础内容，Vue入门

作者: mcgee0731 | 来源:发表于2021-07-03 00:33 被阅读0次

传统网页开发

  • 请求数据->生成结构->监听变化
  • 元素变化->发送请求->更新结构
    缺点
  • DOM 操作频繁，代码繁杂
  • DOM 操作与逻辑代码混合，数据或者结构的修改，可维护性差
  • 不同功能区域书写在一起，可维护性低
  • 模块之间依赖关系复杂

前端流行框架Vue.js

库是一种工具，在代码中起到辅助作用。框架是JS框架，是遵从遵守规则开发的一种方式

本文目的是学习Vue.js规则，Vue.js是渐进式JavaScript框架，官方学习

特性：

  1. 数据驱动视图
  2. 组件化开发

数据驱动视图

  • 数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定
  • 对于输入框等可输入元素，可设置双向数据绑定
    • 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定

代码中只进行了数据展示和修改，并未使用 DOM 功能，这就是数据驱动的单项数据绑定（数据->视图）

image.png

双向数据绑定适用于特殊元素（可输入元素）例如：input，checkbox，textarea

输入后自动更新到绑定数据上，绑定数据的更改也会自动更新到元素中（双向）

Vue数据驱动视图

  • Vue.js的数据驱动视图是基于MVM模型实现的
  • MVVM(Model -View -ViewModel )是一种软件开发思想
  • Model层，代表数据
  • View层，代表视图模板
  • ViewModel层，代表业务逻辑处理代码

优点

  • 基于MVVM模型实现的数据驱动视图解放了DOM操作
  • View 与Model处理分离，降低代码耦合度

缺点

  • 但双向绑定时的 Bug调试难度增大
  • 大型项目的 View 与 Model过多，维护成本高

组件化开发

组件化开发，分功能组件进行开发的一种方式。允许我们将网页功能封装为自定义HTML 标签，复用时书写自定义标签名即可

组件不仅可以封装结构，还可以封装样式与逻辑代码，给组件起个名字，名字可作为html标签名进行使用。组件大大提高了开发效率与可维护性

安装

本地引入

cdn引入
比本地引入放到服务器上要快，通过script src属性

npm安装（yarn）

  • npm install vue
  • yarn add vue

基础语法

Vue实例，基础选项，指令，其他选项（过滤器，计算属性，监听器）四部分

Vue实例

通过Vue函数创建的对象，是使用Vue功能的基础

var vm = new Vue({
  // 选项对象
})

el选项

  • 用于选取一个 DOM元素作为Vue 实例的挂载目标。
  • 只有挂载元素内部才会被Vue进行处理，外部为普通HTML元素无法使用Vue功能。
  • 代表MVVM中的View层（视图)。

通过 el 挂载， 挂载完毕，可以通过 vm.$el进行访问操作 el，访问到的是个HTMLElement

两种挂载方式

  • css选择器格式的字符串
  • HTMLElement 实例
var app = document.querySelector('#app');

var vm = new Vue({
  el:"#app" // 通过css选择器格式的字符串
  el: app   // HTMLElement 实例，注意这里没引号，不能为html或body
})

未设置 el 的 vue实例，也可以通过 vm.$mount()进行挂载，参数形式与 el 规则相同

var vm = new Vue({});
vm.$mount('#app');

效果相同，一个通过创建时挂载，一个创建过后挂载，$mount()传入参数和 el 相同

插值表达式

挂载元素内可以使用Vue.js的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为{{ }}，括号内可 基本运算，三目运算，数值等等

注意点：

  • 插值表达式只能书写在标签内容区域，可以与其它内容混合
<li>{{1+2+3}}<li> // ok

<li id="{{ 1+2 }}"><li> // error
  • 内部只能书写JavaScript表达式，不能书写语句
<li>{{ var num = 100 }}<li> // error

data选项

用于存储Vue 实例需要使用的数据，值为对象类型。

new Vue({
  el:"#app",
  data:{
    title:"内容"
  }
})

访问数据方式，vm.$data.数据 或者 vm.数据，例如 vm.title

data数据特点，

  • data中的数据可以直接在视图中通过 插值表达式 访问
  • data 中的数据为响应式数据，在发生改变时，视图会自动更新。

data注意：

  • data 中存在数组时,索引操作与 length操作无法自动更新视图，这时可以借助Vue.set()方法替代操作。
var vm = new Vue({
  el:"#app",
  data:{
    contentArr:["1","2",3]
  }
})

Vue.set(vm.contentArr,0,"生效的新内容") // 数组 索引 新值

<ul>
  <li>{{ contentArr[0] }}</li>
  <li>{{ contentArr[1] }}</li>
  <li>{{ contentArr[2] }}</li>
</ul>

此时正常显示，通过控制台修改

  • vm.contentArr[0] = "你好吗"，li并未更新
  • vm.contentArr.length = 0 li并未更新

methods选项

用于存储需要在 Vue实例中使用的函数

new Vue({
  el:"#app",
  data:{
    contentArr:["1","2",3]
  },
  methods:{
    foo(){
      console.log(this)
      return this.contentArr
    }
  }
})

访问数据方式

  • methods中的方法可以通过vm.方法名访问
  • 方法中的this为vm 实例，可以便捷的访问vm数据等功能
  • 方法通过this也可以互相组合 this.foo(){ return this.foo1() }

Vue.js指令

指令本质就是 HTML 自定义属性 (html有固定属性和自定义属性)，指令是给框架进行识别的一种标记手段

Vue.js的指令就是以v-开头的自定义属性

指令学习入口

修饰符

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作

  • 事件修饰符
  • 按键修饰符
  • 系统修饰符
  • 鼠标修饰符
  • v-model修饰符

修饰符学习入口

自定义指令

指令用于简化DOM操作，相当于对基础DOM操作的一种封装。

当我们希望使用一些内置指令不具备的 DOM功能时，可以进行自定义指令设置。

  • 自定义全局指令
  • 自定义局部指令

自定义全局指令

  • 指的是可以被任意Vue 实例或组件使用的指令。

定义一个focus指令，执行配置对象内容

  • 参数1：指令名
  • 参数2：配置对象（内部可以添加钩子函数）
  • inserted钩子在元素插入 DOM 后执行

插入时自动获取焦点

Vue.directive('focus',{ 
  inserted(el){ // el表示设置这个指令的element元素，本文指下面的input元素
    el.focus() // 执行元素操作
  }
})

应用上面的指令

<div id="app">
  <input type="text" v-focus>
</div>

全局的意思表示, 当你创建多个vue实例对象时，都可以使用focus的指令

new Vue({
  el:"#app"
})

new Vue({
  el:"#app2"
})

<div id="app">
  <input type="text" v-focus>
</div>

<div id="app2">
  <input type="text" v-focus> // 都可以被使用
</div>

钩子函数参数

Vue.directive('focus',{  
  inserted(el,binding){ // el 指定指令的元素标签，binding指设置的相关信息,如图
    console.log(binding)
  }
})

<div id="app">
  <input type="text" v-focus.a.b="100+1"> // 可以判断有a或b修饰符做什么，如图
</div>

自定义局部指令

  • 指的是可以在当前Vue 实例或组件内使用的指令。
  • 对象键：属性名。对象值，配置对象
new Vue({
  ...
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    }
  }
})

使用

<div id="app">
  <input type="text" v-focus>
</div>

更多自定义指令内容参考官网

过滤器

过滤器用于进行文本内容格式化处理。过滤器可以在插值表达式和v-bind中使用。

  • 全局过滤器
  • 局部过滤器

全局过滤器：可以在任意Vue实例中使用

  • 参数1：过滤器名
  • 参数2：过滤器功能
Vue.filter('过滤器名称', function(value){ // value是使用过滤器时传入的数据
  // 逻辑代码
  return '处理结果'
})
  • 过滤器能在插值表达式和v-bind中使用，通过 管道符|连接数据
<div id="app">
  <div v-bind:id = "id | filterId"></div> // 对id处理，在bind中使用

  <div>{{ content | filterContent }}</div> // 对content处理，在插值表达式中使用
</div>

例子

<div id="app">
  <p v-bind:title = "val | filterVal"></p>  // "abc"

  <p>{{ val2 | filterVal }}</p>  // "xyz"
</div>

Vue.filter('filterVal',function(value){
  console.log(value) // "a-b-c"
  return value.split("-").join("") // 此时title则为"abc"
})

new Vue({
  ...
  data:{
    val:"a-b-c",
    val2:"x-y-z"
  }
})

注意事项

  • 可以将一个数据传入到多个过滤器中进行处理。
  • 过滤器的组合操作，类似于管道，content参数先经过filterA处理再将filterA的返回值传入filterB中处理，再返回
<div id="app">
  <p>{{ content | filterA | filterB }}</p>
</div>
  • 一个过滤器可以传入多个参数
  • 注意：
    • 参数1：content，参数2：par1，参数3：par2
<div id="app">
  <p>{{ content | filterContent(par1,par2) }}</p>
</div>

局部过滤器

  • 局部过滤器只能在当前Vue 实例中使用。
new Vue({
  ...
  filters:{
    过滤器名称：function(value){
      // 逻辑代码
      return '处理结果'
    }
  }
})

其他特点参考全局过滤器，一致的。

注意事项

  • 如果全局过滤器和局部过滤器都存在，且重名，只有局部过滤器生效
  • 因此，我们可以在vue全局 定义一些基础的过滤器规则，在实例里对 和全局重名的局部过滤器进行 重写，定义局部过滤功能

计算属性

  • Vue.js的视图不建议书写复杂逻辑，这样不利于维护。

取数组中最大值

<div id="app">
  <p>{{ Math.max.apply(null, arr) }}</p>
  <p>{{ Math.max.apply(null, arr) }}</p>
  <p>{{ Math.max.apply(null, arr) }}</p>
</div>

解决办法

  • 封装函数处理
    • 封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。
new Vue({
  ...
  data:{ arr:[1,2,3,4,5] },
  methods:{
    result(){
      var sum = 0
      var arr = this.arr
      for(var item of arr){
        sum+=item
      }
      return sum
    }
  }
})

<div id="app">
  <p>{{ result() }}</p>
  <p>{{ result() }}</p>
  <p>{{ result() }}</p>
</div>
  • 如何提高计算执行效率？计算属性
    • 计算属性使用时为属性形式，访问时会自动执行对应函数。
    • 执行一次后，计算属性内部会将执行的方法进行缓存
    • 计算属性减少了函数的执行次数
    • 计算属性可以通过 实例.xx 访问
new Vue({
  ...
  data:{ arr:[1,2,3,4,5] },
  computed:{
    result(){
      console.log("我只执行了一次")
      var sum = 0
      var arr = this.arr
      for(var item of arr){
        sum+=item
      }
      return sum
    }
  }
})

<div id="app">
  <p>{{ result }}</p>
  <p>{{ result }}</p>
  <p>{{ result }}</p>
</div>

Methods 与 Computed 区别

  • computed具有缓存性，methods没有。
  • computed通过属性名访问，methods需要调用。
  • computed仅适用于计算操作。

计算属性的setter

  • 计算属性默认只有getter，Vue.js也允许给计算属性设置setter
  • 将计算属性改为对象（以前是个方法）
  • vm.getResult = "xxx" 会执行 set方法
var vm = new Vue({
  ...
  computed:{
    getResult:{
      // getter
      get:function(){
        // 逻辑代码
      },
      // setter
      set:function(newVal){
        // 逻辑代码
      }
    }
  }
})

侦听器

  • 侦听器用于监听数据变化并执行指定操作。
new Vue({
  ...
  data:{ value:"" },
  watch:{
    value (newVal,oldVal){  // 当value数据发现变化会执行
      // 逻辑代码
    }
  }
})

例子

<div id="app">
  <input type="text" v-model="inputVal">
</div>

new Vue({
  ...
  data:{ inputVal:"" },   // 只要inputVal值变了，就会触发watch
  watch:{

    inputVal (newVal,oldVal){
      // 逻辑代码
      console.log("侦听器执行了")
    }

    inputVal :{           // 写法2
      handler(newVal,oldVal){
        console.log("侦听器执行了")
      }
    }
  }
})

复杂类型监听器设置

  • 为了监听对象内部值的变化，需要将watch书写为对象，并设置选项 deep: true，这时通过handler设置处理函数。
new Vue({
  ...
  data:{
    obj:{ contxt1:"内容1",contxt2:"内容2" },
    arr:[1,2,3,4,5]
  },
  watch:{
    obj:{
      deep:true,
      handler(val,oldVal){
        console.log(val,oldVal)
        console.log(val === oldVal) // true
      }
    },
    arr(val,oldVal){ // 数组不需要设置deep
      console.log(val,oldVal)
      console.log(val === oldVal) // true
    }
  }
})

注意事项

  • 当更改（非替换）数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组、对象。因此，对于复杂类型，无法进行val和oldVal对比

Vue DevTools

  • 是Vue.js官方提供的用来调试Vue应用的工具
    注意事项
  • 网页必须应用了Vue.js功能才能看到 Vue DevTools
  • 网页必须使用Vue.js 而不是 Vue.min.js
  • 网页需要在http协议下打开，而不是使用file协议本地打开。

综合案例 TodoMVC

综合案例练习地址gitee，欢迎star

欢迎赞赏和关注！！

相关文章

网友评论

      本文标题：Vue基础内容，Vue入门

      本文链接：https://www.haomeiwen.com/subject/xpkyultx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Vue基础内容，Vue入门|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！