Vue.js Day-1 入门

Vue学习笔记目录

Day-1 初识Vue及v-bind等指令的使用

前言

为了毕设进行前端学习准备，前端Vue，Ant Design。

---

一、Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持~~~~类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
引用自vue.js

1.1. 为什么使用Vue

Vue使用MVVM模型

MVVM模型

二、使用Vue

2.1. 引入Vue.js

这里我 从官网直接下载 导入如下

这里使用了插值表达式{{ }}，创建了Vue实例，包含的Options有

• el：(string | HTML Element)：指定vue管理哪个DOM元素；
• data：(Object | function)：一些数据（组件中必须是函数）；
• methods：(function)：包含需要使用到的一些自定义函数，如按钮响应事件。
• 等。

2.3. Vue的生命周期

emmm

2.4. v-指令

一系列由v开头的指令，挺方便的！

2.4.1. v-once

只渲染一次数据，不会随着数据的改变而改变。

    {{message}} 
    

2.4.2. v-html

用于将html片段填充显示。

浏览器检查元素如下

    
百度一下

2.4.3. v-text

用于将数据填充到标签中，作用于插值表达式类似，但是覆盖原来的整个内容。

    
你好
    

浏览器检查元素如下，标签中原有的值被覆盖。

    
Hello

2.4.4. v-pre

用于显示原始信息。

    
{{url}}
    

2.4.5. v-cloak

在Vue解析之前，标签中会存在该属性；在Vue解析之后，该属性会被去除。
可利用，在Vue解析前，相关{{ }}会被隐藏，而解析后，即用数据插入其中。用来隐藏数据加载过程中的 插值表达式{{}}影响用户体验。
在以下代码中，虽然延迟1s再执行数据插入，但浏览器中并不显示{{message}}。

  {{message}}

2.4.6. v-bind

用于动态绑定标签属性，如src，href，class等。（语法糖:）
绑定class：

1. 对象语法：通过{}绑定对象

    `
   {{message}}
   `
    - 和普通的`class`同时存在并不发生冲突，会进行合并；
    - 如果内容过于复杂的话，可以放在`methods`中的一个函数中return出来；或`computed`中。

2. 数组语法：通过数组

   `
   {{message}}
   ` 或使用变量
   `
   {{message}}
   `
   

绑定style：

1. 对象语法
   

   {{message}}

2. 数组语法

2.4.7. 计算属性

不加动词的方法，形式和方法大致一样，位于computed中。
主要区别：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

总结

以上第一天学习的内容，总结就是很方便。