part4 - 模块1 - 01 - Vue.js框架基础

大大大石头
280 阅读3分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

Vue.js框架基础

vue简介

传统方式开发缺点：

  • Dom操作繁杂，代码繁杂

  • Dom操作逻辑代码混合，可维护性较差

  • 不同功能区域写在了一起，可维护性较低

  • 模块之间依赖比较复杂

vue.js是一个渐进式js框架，框架 - 规则

vue核心特性

数据驱动视图

  • 数据变化会自动更新到对应元素中，无需手动操作Dom，这种行为称作单向数据绑定
  • 对于可输入数据的元素（例如input等），可以设置双向数据绑定，即自动将元素输入的内容更新给数据，实现数据和元素内容的双向绑定

Vue的数据驱动视图是基于MVVM（一种开发思想）模型实现的

  • Model层：数据层
  • View：视图模版
  • ViewModel：业务逻辑处理代码

优点：

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

缺点：

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

组件化开发

组件化开发，允许我们将网页功能封装为自定义HTML标签，复用的时候书写自定义标签名即可

组件化不仅可以封装结构，还可以封装样式和逻辑代码，大大提高开发效率和可维护性

Vue.js安装

基础语法

vue实例

Vue提供了一个Vue类，我们可以使用Vue类创建Vue实例对象，这个对象是使用Vue功能的基础

// 引入vue后创建vue实例对象
var vm = new Vue({
  // vue配置选项
})

el选项

  • 用于选取一个DOM元素作为Vue实例的挂载目标对象，相当于选中一个盒子
  • 只有挂在元素（盒子）内部的Vue语法才能被Vue处理，外部都是普通的HTML元素
  • 代表MVVM的视图层 - View层

书写方式

// 方法1:先获取元素，再把元素赋值给el（注意赋值给el的变量必须是一个元素，不可是伪数组）
// const app = document.getElementById('app')
// const vm = new Vue({
//   el: app
// })

// 方法2（常用）：直接在el中书写选择器
// const vm = new Vue({
//   el: '#app'
// })

// 方法3:创建vue实例的时候没有进行挂载处理，后期可以单独挂载
const vm = new Vue({})
// 单独挂载el，这里也可以使用getElementById获取到的元素
vm.$mount('#app')

// 可以调用vm的$el访问挂载元素
console.log(vm.$el)

注意事项

  • 元素不能是html或者body元素
  • 访问挂载元素：使用vue实例.$el访问
  • 前期未设置el挂载，可以后期单独使用Vue实例.$mount()进行挂载，参数规则和el挂载相同

差值表达式

挂载元素上可以使用vue模版写法，模版中可以使用差值表达式为元素进行动态内容设置

书写方法：{{ 表达式 }}

<body>
  <div id="app">
    <ul>
      <!-- 差值表达式 -->
      <li>{{ 1 + 2 + 3 }}</li>
      <li>{{ 2 > 1 ? 2 : 1 }}</li>
    </ul>
  </div>
  <script>
    // Vue实例
    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>

注意事项：

  • 差值表达式只能书写在标签的内容区域，可以与其他内容混合
  • 内部只能书写js表达式，不能书写语句

data选项

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

js访问数据：

  • Vue实例.$data.数据
  • Vue实例.数据

数据特点：

  • 可以直接在差值表达式中访问，直接写数据名即可，例如{{ 数据 }}
  • data里面的数据都是响应式数据，即当这个数据改变的时候，视图中的数据也会同时更新
<body>
  <!-- 挂载元素，里面的vue语句才能被处理 -->
  <div id="app">
    <ul>
      <!-- 差值表达式 -->
      <li>{{ 1 + 2 + 3 }}</li>
      <li>{{ 2 > 1 ? 2 : 1 }}</li>
    </ul>
    <!-- 使用data数据 -->
    <p>{{ title }}</p>
  </div>
  <script>
    // Vue实例
    const vm = new Vue({
      // 挂载元素
      el: '#app',
      // 数据
      data: {
        title: '我是标题'
      }
    })

    // 访问data数据
    console.log(vm.$data.title)
    console.log(vm.title)
  </script>
</body>

注意事项：

  • 当data中存在数组时，索引和length操作无法自动更新视图（其他方式可用），这是可以借助Vue.set(数据，索引，新内容)替代

methods选项

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

Vue内部使用方法

  • methods中的方法可以通过Vue实例.方法名调用
  • 在方法中，可以使用this指向Vue实例对象，可以使用this快捷访问数据
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue基础</title>
  <!-- 引入vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <!-- 挂载元素，里面的vue语句才能被处理 -->
  <div id="app">
    <ul>
      <!-- 差值表达式 -->
      <li>{{ 1 + 2 + 3 }}</li>
      <li>{{ 2 > 1 ? 2 : 1 }}</li>
    </ul>
    <!-- 使用data数据 -->
    <p>{{ title }}</p>
    <ul>
      <!-- 差值表达式使用methods中的函数,name是一个数组 -->
      <li>{{fn(name[0])}}</li>
      <li>{{fn(name[1])}}</li>
    </ul>
  </div>
  <script>
    // Vue实例
    const vm = new Vue({
      // 挂载元素
      el: '#app',
      // 数据
      data: {
        title: '我是标题',
        // data使用数组
        name: ['t-o-m', 'j-a-c-k'],
        qianzhui: '我是前缀'
      },
      // 函数
      methods: {
        // 函数直接写就可以，不需要function关键字
        fn(name) {
          // 通过this可以调用fn1
          this.fn1()
          // 把参数拆分数组之后合并字符串
          // 这里使用this.qianzhui引入另一条数据进行拼接
          return this.qianzhui + name.split('-').join('')
        },
        // 创建另一个函数供fn调用
        fn1() {
          console.log('fn1')
        }
      }
    })
    // 访问data数据
    console.log(vm.$data.title)
    console.log(vm.title)
  </script>
</body>

</html>
avatar
文章
阅读
粉丝