前端学习笔记二十三-Vue的基本使用和模版语法

一、Vue概述

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
  • vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
    ⚫易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue
    ⚫灵活:在一个库和一套完整框架之间自如伸缩
    ⚫高效:20kB运行大小,超快虚拟 DOM

二、Vue基本使用

使用Vue将helloworld 渲染到页面上
前端学习笔记二十三-Vue的基本使用和模版语法_第1张图片
  1. 实例参数分析
  • el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
  • data:模型数据(值是一个对象)
  1. 插值表达式用法
  • 将数据填充到HTML标签中
  • 插值表达式支持基本的计算操作
  1. Vue代码运行原理分析
  • 概述编译过程的概念(Vue语法→原生语法)

三、Vue模板语法

3.1 指令

  • 本质就是自定义属性
  • Vue中指定都是以 v- 开头
3.1.1 v-cloak
  • 防止页面加载时出现闪烁问题

     
    
      
    {{msg}}
3.1.2 数据绑定指令
v-text(填充纯文本,相比插值表达式更加简洁)
  • v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出
  • 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值

{{msg}}

v-html
  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中

  • 可能有安全问题, 一般只在可信任内容上使用 v-html永不用在用户提交的内容上

  • 本网站内部数据可以使用,来自第三方(跨域)的数据不可以用

  • 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。

      

    {{message}}

      

v-pre
  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
    {{ this will not be compiled }}    
    
    {{msg}}  
     

3.1.3 数据响应式
v-once
  • 执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
  
     {{ msg}}    

3.2 双向数据绑定

  • 当数据发生变化的时候,视图也就发生变化
  • 当视图发生变化的时候,数据也会跟着同步变化
v-model
  • v-model是一个指令,限制在