Vue初步认识与Vue基础指令

Vue.js简介

先来谈谈传统网页开发

• 传统开发的缺点：
  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/[email protected]/dist/vue.js

npm安装

• 最新稳定版

npm install vue

• 指定版本

npm install [email protected]

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指令

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

  

    
这是 p 标签的原始内容
    
这是 p 标签的原始内容
    

  
  
  

显示结果

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 属性，可以提高渲染性能并避免问题。

  
  

  

    

      

        输入框{{ item.value }}: 
      
    
  
  
  

• 通过