vue.js2基础

周周菜菜子
69 阅读4分钟

课程目标

  • vue

知识点

  • vue.js引入
  • vue.js细节

vue.js引入

  1. 直接引入vue.js,适合小型项目或部分使用vue
  • 引用全部vue.js，运行时编译及渲染
  • 引用部分vue.js，仅引入渲染部分 比如下面一段代码：
<html lang="en">
<head>
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-on:input="inputcb"/>
        <p>message:{{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            },
            methods: {
                inputcb(e){
                    this.message = e.target.value;
                }
            }
        })
    </script>
</body>
</html>

输出结果：

image.png

  • 直接引入vue.js会有一个问题就是：如果网速慢的话，用户会看到我们表达式写的内容，就是还没编译的变量或表达式，用户体验不好。可以引用vue.runtime.js提前编译好模板的内容，直接引用vue.runtime.js就可以实现vue.cli的预编译工作。 看下面代码：
<html lang="en">
<head>
    <title>document</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            },
            render(createElement) {
                return createElement(
                    'div',
                    null,
                    [createElement('span', this.message)]
                )
            }
        })
    </script>
</body>
</html>

输出结果：

image.png

  1. 使用vue.cli工程化启动整体vue项目

vue.js细节

模块中{{}}内部接受一个表达式，区分一下表达式和语句间的区别：

  • 表达式：一般是指单独的一段可运行的代码，有返回值
  • 语句：一般是指多个表达式的集合，也具有上下文的语义

一般在JS中常见赋值表达式、逗号表达式、布尔表达式、函数表达式（匿名函数）、三目运算符

标签中的新属性:

  • v-bind：能将data中的值绑定到当前属性中，可简写为:
  • v-on：能够绑定实例中配置的事件，可简写为@
  • v-for：列表级别渲染，迭代渲染所有子元素，渲染多个当前标签元素
  • v-if/v-else/v-show：控制子元素视力显隐
  • v-model：应用于表单，创建与元素的双向绑定
  • v-html：将最终值的结果渲染为html
  • v-text：等同于直接在文本处使用{{xx}}

v-if和v-show的区别：

  • v-if：标签不会保留在页面的，直接删除标签，可以和v-else结合使用。
  • v-show：标签还会保留在页面上，只改变标签的样式display:none属性。

响应式

参考vue官网的响应式流程图： image.png

计算属性

对于任何复杂逻辑，你都应当使用计算属性。

  • 计算属性默认只有 getter,在需要时也可以提供一个 setter
  • 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

computed

  1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
  2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化,computed 属性值会默认走缓存
  3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法

watch

侦听属性

  1. 不支持缓存。数据变化直接触发操作；
  • watch支持异步
  • 监听的函数接收两个参数（newValue, oldValue）
  1. 当一个属性发生变化时，需要执行对应的操作；一对多；
  2. 监听数据必须是data中声明过或者父组件传递过来的props中的数据.
  3. 页面第一次渲染时候，watch函数是不会执行的，只有当数据变化时才会触发操作

vue.js组件

区分有状态组件与无状态组件

组件最大的用处就是可复用性，需要区分一些具有副作用的组件，比如一些组件需要发送ajax请求之后中渲染一些数据，就需要将数据内容进行一个区分，推荐将UI部分渲染到子组件中，做一个只通过传入数据渲染的无状态组件，而在有副作用组件中维护所有数据。

  • 用关键字component引入组件，在页面中直接使用定义的组件，比如下面代码中的<hello-world></hello-world>，可传参和方法，进行父子组件方法调用。
<!DOCTYPE html>
<html lang="en">
<head>
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <hello-world v-for="item in items" :item="item" :key="item.id"> </hello-world>   
    </div>
    
    <script>
       Vue.component('hello-world', {
            props: ['item'],
            template: '<p>{{item.title}}</p>'
       });

       new Vue({
        el: '#app',
        data: {
            items: [
                {id: 1, title: 'hello id1'},
                {id: 2, title: 'hello id2'},
                {id: 3, title: 'hello id3'},
            ]
        }
       })
    </script>
</body>
</html>

输出结果：

image.png

生命周期

  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
  • 不同的生命周期钩子函数，在实例生命周期的不同阶段被调用。
  • 一共有8个钩子函数，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 参考vue官网的生命周期流程图：

image.png

avatar
文章
阅读
粉丝