用生命谱写代码的赞歌

0%

Vue 基本用法

Posted on Edited on In ,
前端框架 Vue 的基本用法介绍。

Vue 基础

本文介绍了 Vue 一些基本用法，详情访问 Vue 官方文档。

创建 vue 实例

  • 绑定元素
    • data 的属性值绑定在全局变量 app 上，可任意修改
    • props 属性与 html 元素的属性名称 绑定
1
2
3
4
5
6
7
8
9
10
let app = new Vue({
  el: '#app'，
  data: {
    message: 'hello vue!'，
    seen: true，
    todos: [
      {text: 'js'}，
      {text: 'vue'}，
      {text: 'css3'}
    ]
  • html 内容使用 mustache 语法
    • 语法
  • html 元素属性应使用 v-bind 指令，默认解析，不采用 mustache 语法
  • 如果用到组件，要确保在初始化根实例之前注册了组件
  • vue实例的简单方法
    • vm.$el -> 就是元素
    • vm.$data -> 就是data
    • vm.$mount -> 手动挂载vue实例到指定元素上
    • vm.$options -> 获取自定义属性
    • vm.$destroy -> 销毁vue实例对象
    • vm.$log() -> 查看现在数据的状态

模板语法

  • 指令
    • 能接受一些参数，以冒号指明
    • 最后也可以采用半角句号添加修饰符
    • v-bind 缩写
      • <a v-bind:href="url"></a>缩写为<a :href="url"></a>
      • <a v-on:click="doSomething"></a>缩写为`
    • 过滤器
      • 过滤器设计目的只是用于文本转换，为了在其他指令中实现更复杂的数据变化，需要采用计算属性
    • v-for
      • vue1.0的track-by="id"废弃，变为:key="id"
      • 例如<li v-for="(val，index) in list" :key="index">

生命周期函数(vue2.0)

  • 钩子函数
    • beforeCreate
      • 组件实例刚刚被创建(创建一个空实例，没有绑定属性和方法)
    • created
      • 实例已经创建完成(给实例绑定了属性和方法，但是DOM树还未构建)
    • beforeMount
      • 模板编译之前(vue实例还未挂载)
    • mounted
      • 模板编译完成(插值语法编译完成，花括号已经转化为数据)
    • beforeUpdate
      • 数据或组件更新之前
    • update
      • 数据或组件更新完毕
    • beforeDestroy
      • 组件销毁之前
    • destroyed
      • 组件销毁完毕
  • 用户刷新是看到花括号标记
    • v-cloak
      • 防止闪烁，用于大段落
    • v-text和v-html

计算属性

  • 计算属性后面不加小括号，一经运行立即计算

  • 完整的computed属性形式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    data: {
        a: 0
    }
    computed: {
        b: {
            get: function() {
                return a + 1
            }，
            set: function(val) {
                this.a = val
            }
        }
    }
    vm.b = 20

  • computed里面放置一些业务逻辑代码，一定要记得return

  • 计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变时才会重新取值

  • 例如 Date.now()不是响应式依赖:

    1
    2
    3
    4
    5
    computed: {
        now: function() {
            return Date.now()
        }
    }

  • 如果你不希望有缓存，请使用 method 代替 computed

  • watch 是监测实例的属性值是否发生变化而执行的，允许执行异步操作

组件

  • 组件创建和注册
    1. 调用Vue.extend()创建的是一个组件构造器
    2. 使用Vue.component()注册组件，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器
    3. 组件应该挂载到某个Vue实例下，否则它不会生效
  • 全局注册和局部注册
    • 全局注册Vue.component()
    • 局部注册:选项对象的components属性
  • 父子组件
    • Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说：子组件只能在父组件的template中使用
  • 使用script(需要设置type=”text/template”)或template标签
  • 传入Vue构造器的多数选项也可以用在 Vue.extend() 或Vue.component()中，不过有两个特例： data 和 el。
    • Vue.js规定：在定义组件的选项时，data和el选项必须使用函数，函数的返回值必须是对象。
  • props
    • 数组(属性名称)
    • 对象(props验证)
    • props绑定类型
      • 默认单向绑定类型
      • 双向绑定(.sync)
      • 单次绑定(.once)
  • 编译作用域
    • 组件的模板是在其作用域内编译的，那么组件选项对象中的数据也应该是在组件模板中使用的
    • 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译
    • 通俗地讲，在子组件中定义的数据，只能用在子组件的模板。在父组件中定义的数据，只能用在父组件的模板。如果父组件的数据要在子组件中使用，则需要子组件定义props

vue-router

  • 路由实例方法
    • router.push({path: '/home')
      • 直接添加一个路由，表现为切换路由，本质是向历史记录中添加一条记录，相当于html5的history的api添加路由方法
    • router.replace({path: '/home')
      • 替换路由，不会向历史记录中添加，相当于HTML5的history的API替换路由方法