Vue
指令v-for//循环 <li v-for="item in arr" >item</li>v-click//绑定事件 可以使用简写 语法糖 @click="" 添加浏览器对象 click(123,$event)v-once //只会修改一次 <a v-once> {{name}} </a> 不会再次跟着model的修改修改了v-html //将字符串中的 html给解析出来 <a v-html="div"></a> 将div字符变量解析到a标签中v-text //直接将覆盖到html 标签...
2024-01-10Vue介绍
1、什么是VueVue.js是目前最火的前端框架,React是最流行的前端框架。和Angular.js与React.js一起并称为前端三大主流框架。Vue.js是一套构建用户界面的框架,只关注视图层。框架:是一套完整的解决方案,对项目的侵入性非常大。库:提供某一个功能的解决,对项目的侵入性很小。2、MVC与MVVM的关系MVC...
2024-01-10Vue初探
开发工程发展历史现在对目前的项目工程化有了大体了了解,那么其中,在第二阶段的工程化演进中,有一个重要的工程设计理念诞生,他就是著名的 MVC 设计模式,简单点,MVC 其实就是为了项目工程化的一种分工模式;MVC 中的最大缺点就是单项输入输出,所有的 M 的变化及 V 层的变化,必须通过 C ...
2024-01-10Vue简介
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复...
2024-01-10Vue初体验
Vue特点 易用:HTML/CSS/JavaScript 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩 高效:20kB min+gzip 运行大小 超快虚拟DOM 最省心的优化 渐进式:如果之前页面全是jQ写的,那么我们想改进单个或多个页面,可以单独提取出来进行改进安装 方式一:直接CDN引...
2024-01-10Vue(二)
---恢复内容开始---1、vue条件指令 可以运行加减运算 可以进行if判断<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模板</title></head><body><div id="app"> <p v-if="r1" key="p_r1">if条件</p> <p v-show="r2">show条件</p> {{ num + 1 - 5 * 2}} <!--列表--> <!--v-el...
2024-01-10Vue基本使用
Vue.js是一款流行的开源JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。由尤雨溪在2014年2月发布的。一 基本语法1. vue的使用要从创建Vue对象开始let vm = new Vue();2.创建vue...
2024-01-10我眼中的Vue
现在公司选型没有用到vue,但是上家公司准备要用。把自己的一些笔记放到这里,正好跟人知识共享,又复习了自己的vue~(希望大佬能多多指点指点)1、初识VueVue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。下载完vue.js ...
2024-01-10Vue采坑记录
一、vuex数据持久化 1. npm install vuex-persistedstate 2. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ modules: { app, user }, getters, plugins: [createPersistedState...
2024-01-10Vue知识随笔
全局参数1.global.js 先定义常量参数const BASE_URL = \'http://xxxx.xxxx.com/api\';export default { BASE_URL}2.main.js 在main.js里面创建全局参数import global from \'./../static/config/global\';Vue.prototype.GLOBAL = global;3.vue页面内this.GLOBAL.BASE_URL$refs(vue $refs的基本用法)##<di...
2024-01-10Vue入门例子
根据官方文档和视频进行学习用 idea 进行开发导入js新建HTML,在HTML输入以下代码 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <div id="app"> {{message}} <span v-bind:title="message"> 提示信息 </span> </div>3.写js代码<script>//通过new Vue 可以声明全局变量,new返回的对...
2024-01-10Vue中实现3D标签云
预览:代码:页面部分:<template> <div class="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="item.url" :style="\'color:\' + item.color + \';top: 0;left: 0;filter:none;\'">{{item.name}}</a> </div></template>CSS部分:// 标签云.tagcloud-all { po...
2024-01-10Vue的基础使用
渐进式的前端框架 vue react augular 作者: 尤雨溪 facebook 谷歌公司 前端框架和库的区别 功能上的不同: jquery库:包含DOM(操作DOM)+请求,就是一块功能。 art-template库:模板引擎渲染,高性能的渲染DOM (我们后端的一种模板 跟python 的模板类似) 框...
2024-01-10Vue最全知识点
声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理,基础篇说说你对MVVM的理解Model-View-ViewModel的缩写,Model代表数据模型,View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据了解mvc/mvp/mvvm的区别Vu...
2024-01-10Vue3状态管理的使用详解
目录背景Provide / Inject抽离共享状态提供数据注入数据小结reactive抽离共享状态使用共享状态小结结语背景随着Vue3的逐步应用,对状态管理的需求越来越多。起初是基于Vuex4进行状态管理的,但是Vuex4也暴露了一些问题。从个人角度来说,Vuex4类似于过渡期产品,对TypeScript的支持性并不完整。如果使用Ty...
2024-01-10浅谈Vue数据响应
Vue 中可以用 $watch 实例方法观察一个字段,当该字段的值发生变化时,会执行指定的回调函数(即观察者),实际上和 watch 选项作用相同。如下:vm.$watch('box', () => { console.log('box变了')})vm.box = 'newValue' // 'box变了'以上例切入,我想实现一个功能类似的方法 myWatch。如何知道我观察的属性被修改了...
2024-01-10Vue(day8)
继续上一篇文章的内容,本文主要内容为项目中新闻资讯模块的实现。新闻资讯页面主要是当我们点击这个按钮时跳转到新闻列表界面。一、新闻资讯的路由设计将新闻资讯的标签改为路由:(a标签改为router-link)。home.vue<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"> <router-link to="/home/newsList"...
2024-01-10Vue日常开发问题
1.sh: webpack-dev-server: command not found2.0 info it worked if it ends with ok1 verbose cli [ '/usr/local/Cellar/nvm/0.37.2/versions/node/v10.15.1/bin/node',1 verbose cli '/usr/local/Cellar/nvm/0.37.2/versions/node/v10.15.1/lib/node_modules/npm/bin/npm...
2024-01-10浅谈Vue中的动画
使用transition标签<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title> css动画原理 </title> </meta> <script src="./vue.js" type="text/javascript"> </script> <style> ...
2024-01-10Vue报错解决办法
webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js npmnpm ERR! [email protected] serve: webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js npmERR! Exit status 1npm ERR!npm ERR! Failed at the [emai...
2024-01-10Vue编译提示警告
There are multiple modules with names that only differ in casing.有多个模块同名仅大小写不同This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.这可能导致在一些文件系统中产生不是预期的行为Use equal casing. 使用唯一的写法提示原因:import Pagination from '../../../...
2024-01-10深入了解Vue3模板编译原理
目录ParseTransformcacheHandlershoistStaticprefixIdentifiersPatchFlagshoiststype 变化Codegen代码生成模式静态节点帮助函数 helpershelpers 是怎么使用的呢?如何生成代码?Vue 的编译模块包含 4 个目录:compiler-corecompiler-dom // 浏览器compiler-sfc // 单文件组件compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模...
2024-01-10初学Vue之数量加减
效果图:HTML:<div class="count3"> <ul> <li v-for="(key,idx) in liList" :key="key.id"> {{key.id}},{{idx}} <template> <button class="cut" @click="cuts(idx)">-</button> <span>{{key.num}}</span> ...
2024-01-10Vue记事本实例详解
本文实例为大家分享了Vue实现记事本功能的具体代码,供大家参考,具体内容如下实例功能点不多,主要难点在于笔记文本对象数组的添加,删除,以及对组件的绑定同步事件。核心代码<section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>记事本</h1> <input v-model="...
2024-01-10Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享先给大家画一个示意图理解一下冒泡和捕获(1) .stop修饰符请看如下代码<template> <div class="about"> <div @click="test1"> <div @click="test2"> 测试 </div> </div> ...
2024-01-10