Vue初步认识与Vue基础指令

原创

conanma

修改于 2021-11-04 12:31:08

3.1K0

修改于 2021-11-04 12:31:08

文章被收录于专栏：正则正则

传统开发的缺点： 1.DOM操作频繁，代码繁杂 2.DOM操作与逻辑代码混合，可维护性差 3.不同功能区域书写在一起，可维护性低 4.模块之间的依赖关系复杂

Vue.js应运而生

官网：

https://cn.vuejs.org

Vue.js核心特性

数据驱动视图

数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。

单向数据绑定

对于输入框等可输入元素，可设置双向数据绑定
- 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。
Vue.js 的数据驱动视图是基于 MVVM 模型实现的。
MVVM (Model – View – ViewModel )是一种软件开发思想
- Model 层，代表数据
- View 层，代表视图模板
- ViewModel 层，代表业务逻辑处理代码
基于MVVM 模型实现的数据驱动视图解放了DOM操作
View 与 Model 处理分离，降低代码耦合度
但双向绑定时的 Bug 调试难度增大（有可能出现在视图或者数据层）
大型项目的 View 与 Model 过多，维护成本高

组件化开发

组件化开发，允许我们将网页功能封装为自定义HTML标签，复用时书写自定义标签名即可
组件不仅可以封装结构，还可以封装样式和逻辑代码，大大提高了开发效率和可维护性

Vue.js安装

本地引入

下载引用：

开发版本

https://cn.vuejs.org/js/vue.js

生产版本

https://cn.vuejs.org/js/vue.min.js

cdn引入

script标签内部引入

最新稳定版：

https://cdn.jsdelivr.net/npm/vue

指定版本:

https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js

npm安装

最新稳定版

npm install vue

指定版本

npm install vue@2.6.12

Vue.js基础语法

Vue实例

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

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

el选项

用于选取一个 DOM 元素作为 Vue 实例的挂载目标
只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素
代表 MVVM 中的 View 层（视图）
可以为 CSS 选择器格式的字符串或HTMLElement 实例，但不能为html 或 body

只能有一个DOM元素

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

也支持变量的方式

插值表达式

挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}
注意点：
- 插值表达式只能书写在标签内容区域，不可以和其他内容混合在一起 比如说不能通过插值表达式进行元素属性的混合设置
- 内部只能书写JS表达式，不能书写JS语句

违反两个注意点就会报出模板编辑错误的提示

data选项

用于存储Vue实例需要使用的数据，值为对象类型
data 中的数据可以通过 vm.$data.数据或 vm.数据访问。
特点：
- data中的数据是直接可以在视图中通过插值表达式访问
- data的数据为响应式数据，发生改变时，视图会自动更新
特殊情况：
- data中存在数组时，索引操作和length操作无法自动更新视图，可以通过Vue.set()方法替代操作 数组的方法是可以生效的，并且实时更新视图，比如pop()，push()
Vue.set()方法有三个参数，分别是数组，索引，新内容，用这个办法可以代替操作，以实时更新视图

methods选项

用于存储需要在Vue实例中使用的函数
methods的方法可以通过vm.方法名访问
方法中的this为vm实例，可以便捷的访问vm数据等功能

Vue.js指令

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

内容处理

v-once指令

使元素内部的插值表达式只生效一次（不随数据变化更新）

v-text指令

元素内容整体替换为指定纯文本数据

<body>
  <div id="app">
    <p v-text="100">这是 p 标签的原始内容</p>
    <p v-text="content">这是 p 标签的原始内容</p>
    <p v-text="content2"></p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        content: '内容文本',
        content2: '<span>span的内容</span>'
      }
    });
  </script>
</body>

显示结果

v-html指令

将元素内容整体替换为指定的HTML文本

与v-text的区别就在于可以替换为HTML文本，运行HTML代码

属性绑定

v-bind

v-bind 指令用于动态绑定 HTML 属性。
v-bind简写方式：
v-bind也可以使用表达式，与插值表达式类似

插件表达式和v-bind都不能插入语句

这一类就不行

还可以一次绑定多个属性，通过绑定对象的方式实现

注意不用冒号，而是等号了

Class绑定

class是HTML属性，可以通过v-bind绑定，并且可以和class属性共存

错误写法

有两个类名，一个x一个a，但是a是固定的，cls会动态变化

对于 class 绑定， Vue.js 中还提供了特殊处理方式
- 对象绑定
例子
- 数组绑定
大括号内部才是动态表示区域

例子

Style绑定

style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存
当我们希望给元素绑定多个样式对象时，可以设置为数组。

渲染指令

v-for指令

用于遍历数据渲染结构，常用的数组与对象均可遍历

index为数组下的索引值

index为对象下的索引值，key为数据的键值

除了遍历数组和对象，还可以对值进行遍历

运行结果

v-for注意点

使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题。

<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in itemList" :key="item.id">
        输入框{{ item.value }}: <input type="text">
      </li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3],
        itemList: [
          {
            id: 1,
            value: 2
          },
          {
            id: 2,
            value:3
          },
          {
            id:3,
            value:3
          }
        ]
      }
    })
  </script>
</body>

通过<template>标签设置模板占位符。可以将部分元素或者内容作为整体进行操作

template标签并不是真正的标签，生成的结构直接是内部的标签 template并不是一个真实的元素，所以没法设置key属性

<div id="app">
    <template v-for="item in obj">
      <span>{{ item }}</span>
      <br>
    </template>
  </div>

结果

v-show 指令

用于控制元素显示与隐藏，适用于显示隐藏频繁切换的时候使用

v-show内部的数据也可以通过data设置达到控制的效果 也可以通过条件表达式来控制

    <p v-show="false">标签内容</p>
    <p v-show="22 > 11">标签内容</p>

注意：
- <template>无法使用v-show指令（原因：template不是真正意义上的元素）
- v-show的本质就是元素内部的display属性是否为true

v-if指令

用于根据条件，控制元素的创建与移除

<body>
  <div id="app">
    <p v-if="bool">这是标签内容</p>
    <p v-else-if="false">这是第二个p标签</p>
    <p v-else-if="false">这是第三个p标签</p>
    <p v-else>最后一个p标签</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: false
      }
    });
  </script>
</body>

v-if 与 v-show的区别就在于show是创建了元素，if是符合条件才创建 v-if 和v-else-if这种组合只要有一个满足条件就会跳出，后面的不会再创建，跟JavaScript的if原理相同

注意事项
- 给使用v-if的同类型元素绑定不同的key

<body>
  <div id="app">
    <div v-if="type==='username'" :key="'username'">
      用户名输入框：<input type="text">
    </div>
    <div v-else :key="'email'">
      邮箱输入框：<input type="text">
    </div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: true,
        type: 'username'
      }
    });
  </script>
</body>

出于性能考虑，应该避免v-if和v-for应用于同一个标签更好的解决办法：将v-if和v-for分开，比如将v-if放在父元素上

<body>
  <div id="app">
    <ul v-if="true">
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
       items: {
         content1: '内容1',
         content2: '内容2',
         content3: '内容3'
       }
      }
    });
  </script>
</body>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

登录后参与评论

0 条评论

热度