初识Vue.js

Vue.js是流行的渐进式JavaScript前端框架。“渐进式”指的是你的项目可以部分或全部采用Vue的特性，而不是要求所有功能模块都必须用Vue实现，你可以逐渐地使用Vue.js特性。

传统网页开发有以下几个缺点：

DOM操作频繁，代码繁杂
DOM操作与逻辑代码混合，可维护性差
不同功能区域书写在一起，可维护性低
模块之间的依赖关系复杂

很显然，传统网页开发已不能满足现在复杂的开发需求。Vue.js恰好能解决这些问题。

Vue2.X官网

Vue3.X官网

Vue.js核心特性

核心特性是：数据驱动视图和组件化开发。

数据驱动视图：

数据变化会自动更新到对应元素中，无需手动操作DOM，这种行为称作单向数据绑定。
对于输入框等可输入元素，可设置双向数据绑定。

双向数据绑定是在单向数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。

Vue.js的数据驱动视图是基于MVVM模型实现的。

MVVM(Model_View_ViewModel）是一种软件开发思想

Model层，代表数据
View层，代表视图模板
ViewModel层，代表业务逻辑处理代码

优点：

基于MVVM模型实现的数据驱动视图解放了DOM操作
View与Model处理分离，降低代码耦合度缺点：
双向绑定时的Bug调试难度增大
大型项目的View与Model过多，维护成本高

组件化开发：

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

Vue.js安装

本地引入

进行vue.js下载，开发版本生产版本
进行<script>标签引入：

<!-- 开发版本引入 -->
<script src="./lib/vue.js"></script>
<!-- 生产版本引入 -->
<script src="./lib/vue.min.js"></script>

CDN引入

CDN引入是很常用的引入方式，可以节约本地服务器带宽，提升加载速度

<!-- CDN引入最新稳定版  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<!-- CDN引入指定版本  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

npm安装

# 最新稳定版
npm install vue 
# 指定版本
npm install vue@2.6.12

Vue.js基础语法

创建vue实例

// 创建vue实例
const vm = new Vue({
  // 选项对象
})

添加el选项

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

const textBox = document.getElementById('textBox')
const vm = new Vue({
  // el: '#textBox'
  el: textBox
})
// 挂载完毕后，可以通过vm.$el进行访问
console.log(vm.$el)

const vm2 = new Vue({})
// 未设置el的Vue实例也可通过以下方式挂载，参数形式与el规则相同
vm2.$mount('#app')

插值表达式

挂载元素可以使用Vue.js的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为{{内容}}。

<div id="app">
    <ul>
      <li>计算结果为：{{1 + 2 + 3}}</li>
      <li>比较结果为：{{2 > 1 ? 2 :1}}</li>
    </ul>
</div>

注意：

插值表达式只能书写在标签内容区域，可以与其他内容混合

内部只能书写JavaScript表达式，不能书写语句

data选项

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

data数据为响应式数据，当发生改变时，视图会自动更新。
data数据中存在数组时，索引操作与length操作无法自动更新视图，这时可以借助Vue.set()方法替代操作。

const vm = new Vue({
  el: '#app',
  data: {
    title: 'PokeMMO',
    arr: ['皮卡丘', '妙蛙种子', '可达鸭']
  }
})
 
// 可通过以下两种方式访问data选项中的数据
// 两种方式效果一样，一般选用第一种
console.log(vm.title)
console.log(vm.$data.title)

// 更改data数据
vm.title = '神奇宝贝'
// 数组数据索引操作需借助Vue.set(数组名, 索引, 更改值)
// Vue.set(vm.arr, 2, '杰尼龟')

使用插值表达式使用data数据

<div id="app">
  <p>{{title}}</p>
  <ul>
    <li>{{arr[0]}}</li>
    <li>{{arr[1]}}</li>
    <li>{{arr[2]}}</li>
  </ul>
</div>

methods选项

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

const vm = new Vue({
  el: '#app',
  data: {
    str1: '一-万-小-时-定-律：',
    str2: '要-成-为-某-个-领-域-的-专-家，需-要-练-习-10000-小时'
  },
  methods: {
    fn(str) {
      return str.split('-').join('')
    },
    fn2() {
      // 方法中的this代表vm实例，可以用来访问vm中的数据等
      return this.str1
    }
  }
})

// 可以通过以下方法来访问methods中的方法
console.log(vm.fn2())

使用插值表达式调用

<div id="app">
  <p>{{fn(str1)}}</p>
  <p>{{fn(str2)}}</p>
</div>

PS: 对于使用VS Code的同学，可使用Live Server插件进行实时效果演示，要方便很多。

Vue.js上手