篇章九（1） Vuejs基础版

已于 2023-06-11 17:15:21 修改
阅读量819 收藏 3
点赞数 2
分类专栏： Vuejs 前端知识图谱 文章标签： 前端 vue.js
于 2021-11-19 10:29:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53810245/article/details/120543440
版权

下一篇：Vuejs进阶版

下一篇：Vuejs补充版

目录大纲一

Vue官方文档

一、Vue.js安装

方式一：直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度，上架产品的时候需要-->
<script src ="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

方式三：NPM安装

二、HelloVuejs初体验

编程范式：声明式编程，优点：数据与界面进行了分离
创建了一个Vue对象时，传入了一些options属性：{}

  • {}中包含了el属性：该属性决定了这个Vue对象挂载在哪一个元素上，很明显，以下是挂载到了id为app的元素上
  • {}中包含了data属性：该属性中通常会存储一些数据
    这些数据可以是我们直接定义出来的，比如下边的
    也可能是来自网络，从服务器加载的

在这里插入图片描述

<body>
<div id="app">{{message}}</div>
<!--引入Vuejs-->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',// 用于挂载要管理的元素
        data:{
            // 定义数据
            message:"你好啊！我的家人"
        }
    })
</script>
</body>

1、Vue列表展示

使用 v-for="item in 列表"
在这里插入图片描述
往列表中添加数据
在这里插入图片描述

2、案例：计数器实现点击事件

v-on:click的语法糖写法为：@click
在这里插入图片描述

v-on:click="counter++"监听事件

<div id="app">
    <h2>当前计数:{{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            counter:0
        },
    })
</script>
</body>
</html>

使用函数实现：
在这里插入图片描述
在这里插入图片描述

3、Vue中的MVVM

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、Vue的生命周期

4.1、生命周期：事物从诞生到消亡的整个过程

Vue的生命周期： new Vue()
在这里插入图片描述
在这里插入图片描述
1 – 9 为挂载流程，10 – 12 为更新流程

  1. new Vue()
  2. 初始化：生命周期、事件，但数据代理还未开始
  3. beforeCreate(){} 此时：无法通过vm访问到data中的数据、methods中的方法
  4. 初始化：数据监测、数据代理
  5. created(){}此时：可以通过vm访问到data中的数据、methods中配置的方法
  6. Vue开始解析模板。生成虚拟DOM（内存中），页面不能显示解析好的内容
  7. beforeMount:{}此时：
    1. 页面呈现的是未经Vue编译的DOM结构
    2. 所有对DOM的操作，最终都不奏效
  8. 将内存中的虚拟DOM转为真实DOM插入页面。
  9. mounted:{}此时：
    1. 页面中呈现的是经过Vue编译的DOM。
    2. 对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作
  10. beforeUpdate(){}此时：数据是新的，但页面时旧的，即页面尚未和数据保持同步
  11. 根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即完成了 Model ——> View 的更新
  12. updated(){}此时：数据是新的，页面也是新的，即页面和数据保持同步
  13. beforeDestroy()}此时：vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
  14. destroyed(){}此时Vue彻底消失

4.2、生命周期的八个（四对）

在这里插入图片描述
在这里插入图片描述

  • 补充：GitHub中
    Branch——分支
    dev——开发中，开发中的版本叫debug版本
    tag——稳定版，准备发布的版本叫release

5、钩子事件

定义在Vue类中的函数

const app = new Vue({
    el:"#app",
    data:obj,
    methods:{
        add:function (){
            console.log('add被执行');
            this.counter++;

        },
        sub:function (){
            console.log('sub被执行');
            this.counter--;

        }
    },
    // 创建实例之前执行的钩子事件
    beforeCreate: function (){},
    // 实例创建完成后执行的钩子
    created:function (){},

    // 将编译完成的HTML挂载到对应虚拟Dom时触发的钩子，此时页面并没有内容
    beforeMount:function (){},
    // 编译好的HTML挂载到页面完成后执行的钩子，此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
    // 注意：mounted在某个实例中只执行一次
    mounted:function (){}

6、代码规范：

  • 缩进方式，使用两个空格

7、设置模板

设置方式

  • 复制script标签的自定义模板
  • File – Settings – Editor – Live Templates – Vue – ‘+’ – Live Template – 填写缩写与描述并粘贴自定义模板 – 点击Define勾选HTML – 在文中输入vue回车即可出现模板
    在这里插入图片描述

三、插值操作【模板语法】

1、插值操作_Mustache语法

mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式
在这里插入图片描述

2、插值操作_其他指令

在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个Vue的指令

2.1、v-once

  • 该指令后面不需跟任何表达式（比如之前的v-for后面是有跟表达式的）
  • 该指令表示元素和组件只渲染一次，不会随着数据的 改变而改变
  • 代码如下
    在这里插入图片描述
    响应式：当页面中的数据发生改变时，页面显示的数据会自动改变。

2.2、v-html

在这里插入图片描述
在这里插入图片描述

2.3、v-text

  • v-text作用和Mustache比较相似：都适用于将数据显示在界面中
  • 缺点：不灵活，当 {{}} 中有数据时，v-text会将该数据覆盖掉
    在这里插入图片描述

2.4、v-pre

  • 不去解析{{message}}，只原封不动的展示出来
  • v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法
  • 代码如下：第一个h2元素的内容会被编译解析出来对应的内容，而第二个h2元素中会直接显示{{message}}
    在这里插入图片描述

2.4、v-cloak

  • cloak：斗篷，用在div中
  • 效果：当解析到div时，会设置v-cloak为none，使用完毕后就会删除v-cloak，再将 {{}} 中的数据解析出来
  • 在某些情况下，我们浏览器会直接显示出未编译的Mustache标签
  • 代码如下：
    在这里插入图片描述

2.5 、v-if

  • v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if=“expression”，expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式

四、自定义指令

1、函数式

添加 directives:{}，但是定义的directives:{}中的函数切记没有返回值

函数中传入的两个参数，一个是绑定使用所在的HTML标签，另一个参数是绑定的元素

需求：定义一个 v-big 指令，和 v-text 功能类似，但会把绑定的数值放大10倍

在这里插入图片描述

2、对象式

需求：定义一个 v-fbind 指令，和 v-bind 功能类似，但可以让其所绑定的 input 元素默认获取焦点

一般自动获取焦点的方法式：
在这里插入图片描述
接下来使用对象式解决
在这里插入图片描述

在这里插入图片描述

3、总结

自定义指令directives中的this指的是全局windows
在这里插入图片描述

五、绑定属性

单向绑定 v-bind

1、v-bind

  • 起因：除了内容需要动态决定之外，某些属性我们也希望动态来绑定
  • 作用：动态绑定属性
  • 缩写：:
  • 预期：any (with argument) | Objecr (without argument)
  • 参数：attrOrProp (optional)
    在这里插入图片描述

1.、v-bind语法糖

  • 语法糖：其简写方式。在开发中，通常使用语法糖的形式，因为更加简洁
  • 简写方式如下：
    在这里插入图片描述

2、v-bind动态绑定class

2.1、v-bind动态绑定class（方式一：字符串写法）

适用于class样式的类名不确定时，需要动态指定

将class属性的值放在数组中进行调用
在这里插入图片描述

2.2、v-bind动态绑定class（方式二：数组语法）

适用于：要绑定的样式个数不确定、名字也不确定
绑定数组 :class="classArr"，在实现的方法中通过调用shift和push方法对class样式进行添加

  • 数组语法的含义是：class后面跟的是一个数组
  • 用法如下
    在这里插入图片描述
    在这里插入图片描述
2.3、v-bind动态绑定class（方式三：对象语法）

适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
可以将绑定的class名作为布尔值进行判断true和false

在这里插入图片描述

点击事件不需要加()，绑定类函数需要加()
在这里插入图片描述

通过不同的class的布尔值，判断该属性是否被添加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定class（对象语法）</title>
  <style>
    .active{
        color: red;
    }
    .line{
        text-decoration: underline;
    }
  </style>
</head>
<body>

<div id="app">
<!--  {}表示的是对象,当Boolean值为true时，表示添加-->
<!--  <h2 v-bind:class="{类名1: boolean, 类名2: boolean}"> {{message}} </h2>-->
  <h2 v-bind:class="{active: isActive, line: isLine}"> {{message}} </h2>
  // 绑定点击事件
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      isLine: false
    },
    methods: {
      btnClick:function (){
      // 控制再次点击使得active属性值为false
        this.isActive = !this.isActive;
      }
    }
  })
</script>

</body>
</html>

3、v-bind动态绑定style

  • 对象绑定均是 key:value 格式，
  • v-bind:class=“{类名1: boolean, 类名2: boolean}”> {{message}}
  • 但在此处用到的是 key(属性名):value(属性值),
  • key表示类名无需加单引号，value加单引号表示字符串，不加单引号表示是变量，需要在 new Vue 中进行定义
    在这里插入图片描述
3.1、对象语法

在这里插入图片描述

3.2、数组语法

在这里插入图片描述

4、解绑事件

  1. 第一种：this.$off()
    在这里插入图片描述

  2. 第二种：直接使用钩子函数destroy
    在这里插入图片描述

2、v-model

双向绑定 v-model

v-model:value="name"的语法糖简写为：v-model="name"

1、表单绑定 v-model

Vue中使用 v-model 指令来实现表单元素和数据的双向绑定
案例解析：

  • 当我们在输入框输入内容时
  • 因为 input 中的 v-model 绑定了 message，所以会实时将输入的内容传递给message，message发生改变
  • 当message发生改变时，因为上面我们使用Mustache语法，将 message 的值插入到DOM中，所以DOM会发生响应的改变
  • 所以，通过v-model 实现了双向的绑定

在这里插入图片描述
在这里插入图片描述
我们也可以将v-model用于textarea
在这里插入图片描述

2、v-model原理

在这里插入图片描述

3、v-model结合radio类型

  • 制作按钮事件时，一般先做一个 label ，在 label 中放置input，这样可实现点击文字实现点击效果
  • radio 按钮：name 相同时实现互斥效果 / 或者有 v-model 属性时，也可实现互斥
  • 原理：服务器把 name 作为 key 传到服务器，key 只有一个所以实现互斥
    在这里插入图片描述

4、v-model结合checkbox类型

5、v-model结合select类型

https://www.cnblogs.com/zhuhukang/p/15411337.html
在这里插入图片描述

6、input 中的值绑定

在这里插入图片描述

7、v-model修饰符的使用

在这里插入图片描述
在这里插入图片描述

六、计算属性

在这里插入图片描述

1、计算属性

  • 原理：底层借助了Object.defineproperty 方法提供的 getter 和 setter。
  • 我们知道，在模板中可以直接通过插值语法显示一些data中的数据
  • 但是在某些情况下，我们可能需要对数据进行一些转换后再显示，或者需要将多个数据结合起来进行显示
    • 比如我们有 firstName和lastName两个变量，我们需要显示完整的名称fullName
    • 但是如果多个地方都需要显示完整的名称，我们就需要写多个 {{firstName}} {{lastName}}
      在这里插入图片描述

2、计算属性setter和getter

2.1、set

  1. 计算属性一般没有set方法，如果计算属性要被修改，那必须写set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。
  2. 当没有可以set方法时，可以看成是只读属性（不常用）
    在这里插入图片描述

2.2、get

  1. get函数什么是会后执行
    1. 初次读取时会执行一次
    2. 当依赖的数据发生改变时会被再次调用
  2. 在调用计算属性的时候会使用get中的返回值作为计算属性
  3. 一般省略写成以下形式
  fullName: function (){
    return 'abc'
  }

3、计算属性和methods的对比

  1. 总结：多使用计算属性，而不是methods方法函数
  2. 效率：计算属性 > methods
  3. 与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便
    当多次调用时，计算属性值调用一次，而methods会调用多次

4、计算属性的简写

直接上图解释：
在这里插入图片描述
在这里插入图片描述

案例：求书籍总价的三种方式：https://www.cnblogs.com/zhuhukang/p/15368384.html

七、监视属性

通过监测新值与旧值的变化来确定接下来需要做的事情

1、监视属性watch

  1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
  2. 监视的属性必须存在，才能进行监视！
  3. 监视的两种写法：

    • new Vue 时传入 watch配置
      在这里插入图片描述

    • 通过vm.$watch监视
      在这里插入图片描述

2、深度监视

  1. 在data中定义如下属性，其中isHot是一层属性，numbers是多层级属性（）numbers中有a，b，
    （）

  2. Vue中的watch默认不监测对象内部值的改变（一层）

  3. 配置deep:true可以监测对象内部值改变（多层）
    在这里插入图片描述

  4. Vue自身可以监测对象内部值的改变，但Vue提供的watcch默认不可以！

  5. 使用watch时根据数据的具体结构，决定是否采用深度监视

3、监视的简写

  1. 使用前提：当不需要初始化调用immediate和深度监视deep的时候

  2. 在watch中的正常写法和简写
    在这里插入图片描述

  3. 第二种简写
    在这里插入图片描述
    在这里插入图片描述

4、watch和computed对比

我们以姓名为案例：

computed的写法：

在这里插入图片描述

watch 的写法

在这里插入图片描述

因此，computed计算属性是无法开启异步任务的，当需求是要开启异步任务比如延迟触发时，就需要用到watch监听属性
在这里插入图片描述

5、监视属性的原理

在这里插入图片描述

案例：对数据进行列表模糊查询
在这里插入图片描述

watch 实现

<body>
    <div id="app">
        <h2>列表过滤</h2>
        <!-- 搜集用户的输入 -->
        <input type="text" placeholder="请输入搜索关键字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               keyWord:"",
            //    源数据
               persons:[
                   {id:001,name:"马冬梅",age:19,sex:"女"},
                   {id:003,name:"周杰伦",age:20,sex:"男"},
                   {id:004,name:"温兆伦",age:21,sex:"男"},
                   {id:002,name:"周冬雨",age:22,sex:"女"},
               ],
            //    过滤后的数据
               filPersons:[]
           },
            watch:{
             keyWord:{
                 immediate:true,
                 handler(newVal){
                    this.filPersons = this.persons.filter((p)=>{
   //    拿到persons中的每一个对象p，return p.name中是否包含newVal
                             return p.name.indexOf(newVal) !== -1
                     })
                 }
             }
           }
        });
    </script>
</body>

computed实现

<body>
    <div id="app">
        <h2>列表过滤</h2>
        <!-- 搜集用户的输入 -->
        <input type="text" placeholder="请输入搜索关键字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               keyWord:"",
            //    源数据
               persons:[
                   {id:001,name:"马冬梅",age:19,sex:"女"},
                   {id:003,name:"周杰伦",age:20,sex:"男"},
                   {id:004,name:"温兆伦",age:21,sex:"男"},
                   {id:002,name:"周冬雨",age:22,sex:"女"},
               ],
           },
        // 计算属性实现
            computed:{
                filPersons(){
                   return this.persons.filter((p)=>{
                //    拿到persons中的每一个对象p，return p.name中是否包含newVal
                      return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }

        });
    </script>
</body>

八、ES6补充

1、块级作用域 - let 和 var

  • 我们可以将 let 看成更完美的 var
  • 案例：点击按钮打印点击的是第几个按钮
  const btns = document.getElementsByTagName('button');
  for (let i = 0;i<btns.length;i++){
    btns[i].addEventListener('click',function (){
      console.log('第'+i+'个按钮被点击')
    })
  }

ES5中只有函数 function 有作用域，而 if 和 for 都没有作用域

2、const的使用

  • 使用const修饰的标识符不会被再次赋值，可以使用const来保证数据的安全性
  • 在ES6开发中，有限使用const，只有需要改变某一个标识符的时候才使用let
  • const注意
    • 注意一：一旦给const修饰的标识符被赋值之后，不能修改
    const a = 20;
a = 30; // 错误：不可以修改
    • 注意二：在使用const定义标识符，必须进行赋值
    const name; // 错误： const修饰的标识符必须赋值
    • 注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
    const obj = {
	name:'Kobe',
	age : 18
}
obj.age = 40; // 当const标识对象时，对象内部的属性是可以改变的

3、对象增强写法

  • ES6 中，对对象字面量进行了很多增强
  • 属性初始化简写和方法的简写
    属性和方法的简写

九、事件处理

1、v-on基础

  • 作用：绑定事件监听器
  • 缩写：@
  • 预期：Function | Inline Statement | Object
  • 参数：event
    在这里插入图片描述

2、v-on参数

  • 情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加
    • 但是注意：如果方法本身中有一个参数，那么方法后的（）可以不添加
  • 情况二：如果需要同时传入某个参数，同时需要even时，可以通过 $even 传入事件
    在这里插入图片描述

3、事件修饰符

  • 在某些情况下，我们拿到event的目的可能是进行一些事件处理
  • Vue提供了修饰符来帮助我们方便的处理一些事件：
    • .stop 阻止默认事件【常用】，调用event.stopPropagation()，修饰于内块
    • .prevent ，阻止默认事件【常用】，等同于调用event.preventDefault()
    • .{keyCode | keyAlias} 只当事件是从特定键触发时才会触发回调
    • .native 监听组件根元素的原生事件
    • .once 只触发一次【常用】
    • .capture，使用事件的捕获模式，实现先捕获后冒泡，捕获的元素先执行
    • .self，只有 event.target 是当前操作的元素时才触发事件
    • .passive，事件的默认行为立即执行，无需等待事件回调执行完毕【一般使用在移动端开发中】
      在这里插入图片描述

4、键盘事件

键盘上每个键都有自己的名字和编码
在这里插入图片描述

  1. @keyup.键盘别名：键盘触发事件
  2. @keydown.tab：Tab键按下触发
    在这里插入图片描述
  3. 键盘的同时按下才触发
    在这里插入图片描述

十、条件判断

1、v-if、v-else-if、v-else

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

1.1、简单的案例演示

在这里插入图片描述
在这里插入图片描述

1.2、v-if的原理

  • v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染
  • 也就是根本没有不会有对应的标签出现在DOM中

2、条件渲染案例

2.1、用户在登录时，可以切换用户的账号登录还是邮箱地址登录

在这里插入图片描述

2.2、案例中存在的问题

  • 问题：在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前输入的内容
  • 原因：因为 Vue 在进行 DOM 渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素
  • 解决：为了解决出现类似重复利用的问题，可以给对应的 input 添加 key ，并且我们需要保证 key 的不同
    在这里插入图片描述

3、v-show 与 v-if，均是决定一个元素是否渲染

  • v-if ：根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)，当条件为 false 时，包含 v-if 指令的元素，根本就不会在DOM中

  • v-show ：当条件为 false 时，v-show 只是给我们的元素添加了一个行内样式：display : none

开发中我们如何选择呢？

  • 当需要在显示与隐藏之间切换很频繁时，使用 v-show
  • 当只有一次切换时，通过使用 v-if
  • template只能配合v-if使用，template在页面渲染的时候会自动消失，而现实template内的内容

十一、循环遍历

1、v-for遍历数组

  • 使用场景：当我们有一组数据需要进行渲染时
  • 格式：v-for = "(item,index) in items" :key="index" 其中 的index代表在原数组的索引值
    在这里插入图片描述

2、v-for遍历对象

  • 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是value
  • 2、获取key和value方式：v-for="(value,key) in info
  • 3、获取key、value和index：v-for="(value,key,index) in info
    在这里插入图片描述
    在这里插入图片描述

3、key 作用与原理[面试集锦]

案例：index作为key，新增数据在旧数据之前添加，.unshift()逆序添加【顺序添加两者绑定无区别】

3.1、index作为key[不绑定key值时，一般Vue默认index作为key]

3.2、id 作为key[效率高]

在这里插入图片描述

3.3、总结

react、Vue 中的 key 有什么作用（key的内部原理）
在这里插入图片描述

4、数组中哪些方法是响应式的——监测数组更新

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

阶段案例

案例一：点击列表中的哪一项，那么该项文字变为红色
案例二：图书购物车
在这里插入图片描述

十二、JavaScript高阶函数的使用

1、过滤器 filter 函数

注意：filter 中的回调函数有一个要求：必须返回一个 boolean 值

  • 返回值为 true 时，函数内部会自动将这次回调的 n 加入到新的数组中
  • 当返回 false 时，函数内部会过滤掉这次的 n
    在这里插入图片描述

2、map 函数的使用

使用情况：对数组中的所有元素都进行变化时
在这里插入图片描述

3、reduce函数

作用： 对数组中所有的内容进行汇总

var num = [1,2,3,4,5];
var res = num.reduce(function(total,num){
    return total+num;
    //return total + Math.round(num);//对数组元素四舍五入并计算总和
},0);
console.log(res)；//15
//num.reduce((total,num) => total += num, 0);
//没有初始值initialValue（即上面例子中的0），当数组为0时会抛出异常提示reduce函数没有初始值，所以为兼容性一般加上initialValue

4、案例：对nums数组中的小于100的每一项乘以二并取和【使用高阶函数实现 】

在这里插入图片描述
箭头函数写法：
在这里插入图片描述

点击跳转：下一篇：Vuejs进阶版

在这里插入图片描述

博客zhu虎康
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
直接使用的vue.js
03-05
vue.js,可以直接下载引用至项目目录，引用至html页面进行样式的加载使用
vuejs-project
05-13
适合人群适合有一定 Vue.js 和前端基础知识并且想深入学习 Vue.js 并运用在实战项目的同学。TODO由于本课程录制时间较早，编写代码的时候 Vue.js 2.0 还未正式发布，所以源码采用 1.0 编写，后续会更新到 2.0 版本。...
VueJS 概述与快速入门
少营营的博客
07-11 662
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn...
小记：介绍vue.js
不咋爱学习の任大猫
07-17 9935
vue.js是目前比较热门的前端框架之一。它具有易用，灵活，高效等特点。它也提供一种帮助我们快速构建饼开发前端项目的模式。本次分享主要就是介绍vuejs，了解vuejs的基本知识，以及开发流程，进一步了解如何通过vuejs构建一个前端项目。 主要通过四个部分讲解，介绍vue,vue的实例，以及vue的技术栈，最后是vue插件的使用。 什么是vue?vue就是一个渐进式的...
vuejs简单入门
weixin_40055163的博客
03-14 3523
1 VueJS 概述与快速入门 1.1 VueJS介绍 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 1.2 MVVM模式 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式
Vue.js基础知识
lp-Strive的博客
04-30 2732
一、Vue.js是什么？ 它是一套用于构建用户界面的渐进式框架。其设计为自底向上逐层应用。Vue只关心视图层。 二、声明式的渲染 1、 Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DOM系统 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 输出：Hello Vu...
篇章九（3）Vuejs补充版
虎康的博客
01-28 1100
Vuejs补充版一、区分 js 表达式和 js 代码（语句） 一、区分 js 表达式和 js 代码（语句）
template_node_vuejs
03-05
模板开发环境变量，可用于连接所有基础对象（MySQL的示例）。 L'环境在德发展署血清donc执行丹斯DES conteneurs码头工人，理由倒凹加PROCHE德environnements和开采（码头工人，豆荚...） 先决条件-Logiciels 系统...
kg-releases：跟踪开源版本
02-28
构建有免费的云基础架构层。 非常感谢Netlify，Firebase，GCP。 准实时发布通知（当前每10分钟检查一次）。 欢迎提供功能请求，问题和PR！ 路线图 重新整理历史记录，以使时光倒流。 电子邮件通知 获取所有或...
codelytv-vue-basic:CodelyTV Pro视频课程“使用TDD使用VueJS和Jest构建应用程序”的演示项目
05-27
JotasJS基础CodelyTV Pro视频课程的演示项目，可以Building an app with VueJS and Jest using TDD您可以在以下位置找到： 请注意，尽管所有视频和课程内容均为西班牙语，但此回购协议仅提供英语版本。 :lizard: :...
xm-spring-boot:Spring Boot 基础项目
05-13
这是一个Spring Boot的基础项目 在线demo 后台 (账号：test, 密码:123456) 前端 (/api/user/login /api/user/register /api/user/info) 如果你更需要Spring-cloud版本，请移步 . 目录结构 admin-server-template ...
Vuejs基础入门
『愚』的博客
12-01 7555
Vuejs基础入门Vue概述早期前后端分离模式MVVM框架Vue简介Vue.js快速入门安装Vue环境Hello World程序 Vue概述 早期前后端分离模式 早期的前后端分离开发模式是这样的： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
vue.js
weixin_62141813的博客
05-11 129
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数 插值
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 406
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 570
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 296
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1285
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1078
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
nodejs vuejs
01-01
Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于构建高性能的网络应用程序。它允许开发者使用JavaScript语言编写服务器端代码，实现了非阻塞、事件驱动的特性，使得处理大量并发请求成为可能。 Vue.js是一种用于构建用户界面的JavaScript框架。它采用了组件化的开发方式，使得开发者可以将页面拆分为多个独立的组件，每个组件负责自己的逻辑和样式。Vue.js具有响应式的数据绑定和组件化的特性，使得开发者可以更加高效地构建交互性强、可复用的前端应用程序。 以下是一个使用Node.js和Vue.js的简单示例： ```javascript // Node.js服务器端代码 const http = require('http'); const fs = require('fs'); http.createServer((req, res) => { if (req.url === '/') { // 读取Vue.js前端页面 fs.readFile('index.html', 'utf8', (err, data) => { if (err) throw err; res.writeHead(200, {'Content-Type': 'text/html'}); res.end(data); }); } }).listen(3000, 'localhost'); console.log('Server running at http://localhost:3000/'); // Vue.js前端页面（index.html） <!DOCTYPE html> <html> <head> <title>Vue.js Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue.js!' } }); </script> </body> </html> ``` 这个示例中，Node.js创建了一个简单的HTTP服务器，当访问根路径时，读取并返回Vue.js前端页面。前端页面使用Vue.js创建了一个简单的应用，显示了一个动态的消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博客zhu虎康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值