Vue学习总结(更新中)

一、Vue的基本使用及模板语法

1、Vue简介

    1.1 Vue是一套用于构建用户界面的渐进式框架:

声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建

    1.2 优点:

  • 易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue

  • 灵活:在一个库和一套完整框架之间自如伸缩

  • 高效:20kB运行大小,超快虚拟DOM

2、Vue的基本使用

    2.1 Vue使用的基本步骤

        1、需要提供标签用于填充数据

        2、引入vue.js库文件

        3、可以使用vue的语法做功能了

        4、把vue提供的数据填充到标签里面

    2.2 Hello World实例


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello Worldtitle>
head>

<body>
    <div id="app">
        <div>{{msg}}div>
        <div>{{1+1}}div>
        <div>{{msg+'-----'+123}}div>
    div>
    <script src="js/vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World'
            }
        })
    script>
body>

html>

1、实例参数分析:

  • el:元素挂载位置(值可以是CSS选择器或者DOM元素)

  • data:模型数据(值是一个对象)

2、差值表达式用法:

-#### 将数据填充到HTML标签中
-#### 差值表达式支持基本的计算操作

3、Vue代码运行原理分析

  • 概述编译过程的概念(Vue语法—>原生语法)

Vue学习总结(更新中)_第1张图片

3、Vue的模板语法

    3.1 前端渲染

        1)定义:把数据填充到HTML标签中

Vue学习总结(更新中)_第2张图片

        2)前端渲染方式

  • 原生js拼接字符串

  • 使用前端模板引擎

  • 使用vue特有的模板语法

       3)模板语法概览:

  • 差值表达式

  • 指令

  • 事件绑定

  • 属性绑定

  • 样式绑定

  • 分支循环结构

    3.2 指令

        1)指令定义

  • 本质就是自定义属性

  • 指令的格式:Vue中都是以v-开头的

        2)v-cloak指令

  • v-cloak:防止页面加载时出现闪烁问题;

“闪动”产生原因:Vue解析差值表达式是先将差值表达式显示在页面中,然后迅速替换为对应的内容;
原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果;
指令用法:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Worldtitle>
    <style>
        [v-cloak] {
        	//数据隐藏
            display: none;
        }
    style>
head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}div>
    div>
    <script src="js/vue.js">script>
    <script>
        /*
            v-cloak指令的用法
            1、提供样式
            [v-cloak]{
                display: none;
            }
            2、在差值表达式所在的标签中添加v-cloak指令
            背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
        */
        var vm = new Vue({
        	//el  指定元素 id 是 app 的元素  
            el: '#app',
            //  data  里面存储的是数据
            data: {
                msg: 'Hello World'
            }
        })
    script>
body>

html>

运行结果如图:

在这里插入图片描述

        3)数据绑定指令

  • v-text:填充纯文本(单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值)。

          特点:相比差值表达式更加简洁,没有“闪动”问题
  • v-html:填充HTMl片段

          特点:
               1、存在安全问题
               2、本网站内部数据可以使用,来自第三方的数据不可以用
  • v-pre:填充原始信息

          特点:显示原始信息,跳过编译过程(分析编译过程)

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据绑定指令title>
head>

<body>
    <div id="app">
        <div v-text="msg">div>
        <div v-html="msg1">div>
        <div v-pre="msg2">div>
    div>
    <script src="js/vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1: '

VUE

'
, msg2: '{{}}' } })
script> body> html>

运行结果如图:

Vue学习总结(更新中)_第3张图片

        4)数据响应式

  • 响应式:
        1、html5中的响应式:屏幕尺寸变化导致样式的变化
        2、数据的响应式:数据的变化导致页面内容的变化
  • 数据绑定:将数据填充到标签中,用指令或差值表达式默认就是响应式的
  • v-once:只编译一次,显示内容之后不再具有响应式功能
        v-once使用场景:如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能

    3.3 双向数据绑定

        1)定义:数据内容的变化会导致显示发生变化

在这里插入图片描述

        2)双向数据绑定分析

  • v-model指令用法

你可能感兴趣的:(前端,vue,js,javascript,vue.js,前端)