Vue (一)

vue

一、认识Vue

定义：一个构建数据驱动的 web 界面的渐进式框架

优点：

1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据

2、方便构建单页面应用程序（SPA）

二、引入Vue

三、Vue实例

• 实例：el

• 数据：data

    

    
{{ msg2 }}

• 方法：methods

    
{{ msg }}

• 计算属性：computed

    

        姓：
    
    

        名：
    
    

        全名：
    

• 监听器：watch

    

        姓名：
    
    
姓：{{ first_name }}
    
名：{{ last_name }}

• 分隔符：delimiters

    ${ msg }

• 实例对象使用成员属性与方法

四、实例生命周期钩子

• 定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

• 钩子方法

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。

updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。

activated：keep-alive 组件激活时调用。

deactivated：keep-alive 组件停用时调用。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

• 重点钩子

created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)

mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM

五、视图常规操作

• v-text：文本变量

{{ msg }}

• v-once：一次性文本赋值

{{ msg }}

• v-html：html文本变量

• v-bind：属性绑定

• v-model：双向数据绑定

    
    
{{ msg }}

• v-cloak：避免页面加载闪烁

• 视图自身运算

    
{{ 1 + 1 }}
    
{{ [1, 2, 3].join('@') }}

六、条件渲染

• v-if：值true会被渲染，值false不会被渲染

    
div div div
    改变

• v-else：与v-if结合使用形成对立面

    
div div div
    
DIV DIV DIV
    改变

• v-else-if：变量的多情况值判断

    
if if if
    
else if else
    
else else else
    

• template：不被渲染的vue结构标签

• v-show：一定会被渲染到页面，以display属性控制显隐
• key：为v-if方式的显隐创建缓存，提高效率

    
if if if
    
else if else
    
else else else
    

七、列表渲染

• v-for：循环渲染列表

    

        
{{ item }}
    
    改变

• 遍历数组

// items: ['张三', '李四', '王五']

// 值

    
{{ item }}

// 值, 索引

    
{{ index }} - {{ item }}

• 遍历对象

// {'name': '张三', 'age': 18, 'sex': '男'}

// 值

  {{ value }}

// 值, 键

  {{ key }}: {{ value }}

// 值, 键, 索引

  {{ index }}. {{ key }}: {{ value }}

• 复杂数据渲染

// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]

    
{{ items[0].name }}
    
{{ items[1].age }}
    
{{ items[2].sex }}