程序不了猿
程序不了猿

【VUE】vue前端框架知识整理

VUE.JS学习笔记

第一章 vue简介

基于VUE框架开发的开源前端项目，这个是我学完后开发的开源实例项目，大家有兴趣的可以一起交流，喜欢的话别忘了star一下哦。

1.1 Vue基本使用

Vue的基本使用步骤

  1. 需要提供标签用于填充数据
  2. 引入Vue.js库文件
  3. 可以使用Vue的语法实现相应功能
  4. 把Vue提供的数据填充到标签里
<body>
    <div id="app">
        
        <div>{
    {msg}}div>
    div>
    
    <script type="text/javascript" src="./js/vue.js">script>
    <SCript type="text/javascript">
        var vm = new Vue({
      
            el: '#app',//通过标签获得显示路径(元素挂载位置：可以是CSS选择器或者DOM元素)
            data: {
      //模型数据（值是一个对象）
                msg: 'hello world'
            }

        });
        
    SCript>
body>

1.2 Vue模板语法

1.2.1 前端渲染

把数据填充到HTML中，前端渲染方法：

  • 原生JS拼接字符串
  • 使用前端模板引擎
  • 是有特有的模板语法

模板语法概览

  • 差值表达式
  • 指令
  • 事件绑定（即，事件处理）
  • 属性绑定
  • 样式绑定
  • 分支循环结构

1.2.2指令使用

a.使用v-cloak指令解决差值表达式存在闪动问题
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HELLO WORDtitle>
    <style>
        [v-cloak]{
      
            display: none;
        }
    style>
head>

<body>
    <div id="app">
        
        <div v-cloak>{
    {msg}}div>
    div>
    
    <script type="text/javascript" src="./js/vue.js">script>
    <SCript type="text/javascript">
        // v-cloak指令用法：
        //   1、提供样式
        //      [v-cloak]{
      
        //          display:none;
        //      }
        //   2、在差值表达式所在的标签中添加V-cloak指令

        //   背后原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好后再显示最终的结果
        var vm = new Vue({
      
            el: '#app', //通过标签获得显示路径
            data: {
      
                msg: 'hello world'
            }

        });
    SCript>
body>
b. 数据绑定指令
1.v-text 填充纯文本

*相比插值表达式更加简洁

<span v-text="msg">span>

<span>{
    {msg}}span>
2.v-html 填充HTML片段

*存在安全问题

*本网站内部数据可以使用，来自第三方的数据不可用

<div v-html="html">div>
3.v-pre 填充原始信息

*显示原始信息，跳过编译过程（分析编译过程）

<span v-pre>{
    { this will not be compiled }}span>
c.数据响应式

  • 如何理解响应式

    *html5中响应式（屏幕尺寸的变化导致样式的变化）

    *数据的响应式（数据的变化导致页面内容的变化）

  • 什么是数据绑定

    *数据绑定：将数据填充到标签中

  • v-once 值编译一次

    *显示内容之后不再具有响应式功能

    *应用场景：如果后续显示的信息不需要再修改，可以使用V-ONCE,可以提高性能

    <div v-once>
    {
      {info}}
div>
<script>
    var vm = new Vue({
        
            el: '#app', //通过标签获得显示路径
            data: {
        
                info:'once'
            }

        });
script>
d.双向数据绑定

你可以用 v-model 指令在表单 、