Vue.js基础-01
Vue.js基础体验(一)
今天开始学习Vue.js啦,刚开始看起来,确实很难很难,但是经过一番“周折”,发现也就那样,没有想象的那么难。 下面是今天记录的代码
日期 2023-06-12 10:48:40为什么要学Vue,Vue.js是什么,开始学Vue,Vue的基础指令,自定义指令
Vue.js 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue
日期 2023-06-12 10:48:40vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
<template> <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="todo" @keyup="addData($event)"/> <hr> <br> <h2>未完成</h2> <ul> &l
日期 2023-06-12 10:48:40vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
原理很简单,写一个input框,定义一个空的list,当在input中增加数据时,就往list中添加数据,然后在循环这个list的数据,删除数据就是调用list中的splice <template> <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="todo"/&g
日期 2023-06-12 10:48:40vue.js--基础事件定义,获取数据,执行方法传值
<template> <div id="app"> <h1>{{ msg }}</h1> <br> <button v-on:click="run1()"> 第一种写法</button> <br> <button @click='run2()'> 第二种写法</button>
日期 2023-06-12 10:48:40vue.js--基础 数据的双向绑定
所谓双向绑定:就是改变modle,就会改变view,改变view,也会改变modle 下面案例,点击getMthod(),获取msg的内容,在点击setMthod()改变msg的内容,你会发现H1的值也会进行改变 <template> <div id="app"> <h1>{{ msg }}</h1> <!-- input获取msg的内容
日期 2023-06-12 10:48:40vue.js--基础 v-bind绑定属性使用
背景:因为10月要休产假了,8月的时间我工作很少,因为最开始做平台我一直做的是后端,前端很少接触,所以现在有时间,就学习前端基础,前端使用的vue.js+element,因为没有基础,所以下了一个视频来看,讲师叫一个大地的的老师,目前我的记录也是来做他的视频,有些内容是自己做的补充,自己对陌生的前端做的理解 绑定属性:由名字可以看出,你的控件想要什么特性,就需要设置它的属性,就好比一个人它有哪些
日期 2023-06-12 10:48:40vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
作者 | Jeskson 来源 | 达达前端小酒馆 Vue概述: MVX模式简介,Vue框架简介,Vue.js的安装与
日期 2023-06-12 10:48:407、vueJs基础知识07
UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁、大方 官网文档https://www.bootcss.com/ 基于 jquery(使用时必须先引入jq) 栅格化系统+响应式工具 (移动端、pad、pc) 按钮 使用工具 bower
日期 2023-06-12 10:48:406、vueJs基础知识06
vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition{} .fade-enter{} .fade-leave{} 到2.0以后transition是以组件的形式使用的,并且携带一个name属性用于css动画选择 <transit
日期 2023-06-12 10:48:405、vueJs基础知识05
vue2.0相比于1.0的变化 1、在每个组件模板中,不再支持片段代码,需要一个根元素包裹 组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </tem
日期 2023-06-12 10:48:404、vueJs基础知识04
简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件(组件),官方推荐命名法(首字母大写) |-components 组件存放的文件夹 |-package.json 工程文件(项目依赖、名称、配置) npm init --yes 生成 |-web
日期 2023-06-12 10:48:403、vueJs基础知识03
vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transition="fade"></div> 动画: .fade-transition{ } 进入: .fade-en
日期 2023-06-12 10:48:402、vueJs基础知识02
vue生命周期: 钩子函数: created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档中(相当于window.onload,页面初始化写在此处) √ beforeDestroy -> 销毁之前 destroyed ->
日期 2023-06-12 10:48:401、vueJs基础知识01
vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中。代表:jQuery、underscore、util 框架:框架就是一整套架构,会基于自身的特点向用户提供一套相当完整的解决方案,而且控制权在框架本身,使用者要用框架所规定的某种规范进行开发。代表:backbone、angular、vue 历史过渡框架:jQu
日期 2023-06-12 10:48:40