嘘~ 正在从服务器偷取页面 . . .

Vue基础入门

Vue
Vue的相关基础知识
发布日期:   2022-04-01

什么是vue

  1. 构建用户界面
  • 用vue往HTML页面中填充数据，非常方便
  1. 框架
  • 框架是一套现成的解决方案，程序员只能遵守框架内的规范，去编写自己的业务功能！
  • 要学习vue，就是在学习vue框架中规定的用法！
  • vue的指令，组件（是对UI结构的复用），路由，Vuex，vue组件库
  • 只有把上面罗列的知识，掌握之后，才有开发vue项目的能力

重点：

  1. 能够知道 vue 的基本使用步骤：①导入vue.js文件，②new Vue()构造函数，得到vm实例对象，③声明 el 和 data 数据节点，④ MVVM 的对应关系
  2. 掌握 vue 中常见指令的基本用法：插值表达式，v-bind(:),v-on(@),v-if和v-else;v-for,:key,v-model

vue 的特性

1.数据驱动视图

  • 数据的变化会驱动视图自动更新
  • 好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来!

2.双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据！

  • js数据的变化，会被自动渲染到页面上，开发者不需要手动操作DOM元素
  • 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

    注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

vue的使用

  1. 导入vue.js的script脚本文件
  2. 在页面中声明一个将要被vue所控制的DOM区域
  3. 创建vm 实例对象（vue实例对象）
<!-- 希望Vue能够控制下面的这个div 帮我们在把数据填充到div 内部 -->
<div id="app">{{ username }}</div>
<!-- 1.导入Vue的库文件，在Windows全局就有了Vue构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2.创建Vue实例对象 -->
<script>
    // 创建Vue的实例对象
    const vm = new Vue({
        // el 属性是固定写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data 对象就是要渲染到页面上的数据
        data: {
            username: 'zhangsan'
        }
    })
</script>

vue 的调试工具

  1. 安装vue-devtools调试工具：vue官方提供的vue-devtools调试工具，能够方便对开发者对vue项目进行调试与开发

    Chrome浏览器在线安装 vue-devtools

vue 的指令

内容渲染指令

  1. v-text ：<p v-text="gender">性别</p>指令的缺点：会覆盖元素内部原有的内容！
  2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
  3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

    注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

    属性绑定指令

  • 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
  • 简写是英文的 :
  • 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如 
    <div :title="'box' + index">这是一个 div</div>

    事件绑定指令

  1. v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，简写形式：@
  2. 语法格式为：通过v-on绑定的事件处理函数，需要在methods节点中进行声明
<button @click="add"></button>
methods: {
   add() {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
   }
   }

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，
分别为：v-on:click、v-on:input、v-on:keyup

3.$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

<button @click="add(3, $event)"></button>
  methods: {
     add(n, e) {
  			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
  			this.count += 1
     }
  }

4.事件修饰符：在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制

  • .prevent：阻止默认行为

    <a @click.prevent="xxx">链接</a>

  • .stop ：阻止事件冒泡

    <button @click.stop="xxx">按钮</button>

5.案件修饰符：在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，

//只有在 key 是  Enter 时调用  vm.submit() 
<input @keyup.enter="submit">
//只有在 key 是  Esc 时调用  vm.clearInput() 
<input @keyup.esc="clearInput">

双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

  1. input 输入框
    • type=”radio”
    • type=”checkbox”
    • type=”xxxx”
  2. textarea
  3. select
  4. v-model 指令的修饰符
    • .number:自动将用户的输入值转为数值类型 <input v-model.number="age"/>
    • .trim: 自动过滤用户输入的首尾空白字符 <inut v-model.trim="msg"/>
    • .lazy： 在”change”时而非”input”时更新 <input v-model.lazy="msg"/>

条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

  • v-if
  • v-show
  1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
    • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
  2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
    • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

  1. v-else : v-if 可以单独使用，或配合 v-else 指令一起使用：v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

    列表渲染指令

    vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使
    用 item in items 形式的特殊语法，其中：

    • items 是待循环的数组
    • item 是被循环的每一项
  • v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，

    注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

使用 key 维护列表的状态:
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲
染的性能。此时，需要为每项提供一个唯一的 key 属性：
key 的注意事项:
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

Vue的过滤器

定义过滤器

在创建vue 实例期间，可以在 filters 节点中定义过滤器，

count vm=new Vue({
  el:'#app',
  data: {
     message: 'hello vue.js',
     info: 'title info'
  },
  filters: {    //在filters 节点下定义"过滤器"
    capitalize(str) {    //把首字母转为大写的过滤器
       return str.charAt(0).toUpperCase() + str.slice(1)
   }
  }
  

})

私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

  //全局过滤器--独立于每个 vm 实例之外
  //Vue.filters() 方法，接收两个参数
  //第一个参数，是全局过滤器的 "名字"
  //第二个参数，是全局过滤器的 "处理函数"
Vue.filters('capitalize',(str) =>{
   return str.charAt(0).toUpperCase()+ str.slice(1) + '~~'
})

过滤器的调用

过滤器可以串联的进行调用 {{message | filterA | filterB}} 中间用 ‘|’ 隔开
A–处理过的值传递给 B ，最终把 B处理的结果渲染到页面上

过滤器传参

过滤器的本质是JavaScript 函数，因此可以接收参数，

  <p>{{message | filterA(arg1,arg2) }}</p>
   Vue.filter('filterA',(msg,arg1,arg2)=>{
   //过滤器代码逻辑
})

过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中：

  • 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
  • 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
    具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：https://v3.vuejs.org/guide/migration/filters.html#migration-strategy
文章作者: 哲哲
文章链接: http://zhezhe0723.github.io/2022/04/01/vue-ji-chu-ru-men/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 哲哲 !
Vue
赏
  目录