广州市住房和城乡建设局网站,广州黄埔网站建设公司,创建免费网站的步骤,辽宁自适应网站建设公司Vue2的终止支持时间为2023年12月31日。 在这个矛盾的时间点#xff0c;还是决定先把vue2的笔记放出来#xff0c;在Vue2完结后再把Vue3的笔记补上。这样呢#xff0c;2和3都不落下#xff0c;也算是来一个启承的作用吧。在工作中呢#xff0c;旧的项目可以维护#xff0c…Vue2的终止支持时间为2023年12月31日。 在这个矛盾的时间点还是决定先把vue2的笔记放出来在Vue2完结后再把Vue3的笔记补上。这样呢2和3都不落下也算是来一个启承的作用吧。在工作中呢旧的项目可以维护新的项目也可以上手。
后续呢会有react16和react18、node、webpack、vite、以及实战项目期间会包含umijs,nextjs, nuxtjs等等更多的更前沿的前端技术笔记
也算是对自己的一种督促不断充实自己分享自己的学习笔记让自己和朋友们可以在前端的道路上越走越远。
vue是什么 vue是一套用于构建用户界面的渐进式jacascript库 构建用户界面 把一系列的数据转换成界面 渐进式循序渐进 简单应用只需一个轻量小巧的核心库 复杂应用可以引入各式各样的vue插件 2. Vue作者 尤雨溪 1. 13年,受到Angular框架的启发开发出了一套轻量级框架-- Seed同年12月Seed更名为Vue 0.6.0 2. 14年正式对外发布 版本号0.8.0 3. 15年10月27日正式发布Vue1.0.0 Evangelion(超世纪福音战士) 4. 16年10月1日 正式发布Vue2.0.0 Chost in the Shell(攻壳机动队) 5. 20年9月18日正式发布Vue3.0.0 One piece(海贼王) … 后起之秀生态完善已然成为国内工程师必备技能 3. Vue 特点 1. 采用组件化模式提高的复用率且让代码更好的维护 2. 声明编码让编码人员无需直接操作DOM 3. 使用虚拟DOM优秀的DIFF算法, 尽量复用DOM节点 命令式: 数据 真实DOM 声明式: 数据 虚拟DOM 真实DOM核心 初始Vue 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 root容器里的代码依然符合html规范 root容器里的代码被称为[Vue模板] Vue实例与容器是一一对应的 真实开发中只有一个Vue实例,并且配合组件一起使用 {{ xxx }} 要写js表达式,且xxx会自动读取到data中所有的属性 注意区分: js表达式和js代码(语句) 表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方 a: 变量 b: a b demo(1) x y ? ‘a’ : ‘b’ js代码(语句) if() for() 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新 注意 取消控制台的vueTools提示安装vue-Tools 安装一个vue-Tools工具方便开发其实就是谷歌浏览器的插件件可以访问此链接进入最后一个网址收藏猫进行下载该网上还有教程如何安装谷歌插件,点击进入 取消控制台的生产环境提示 Vue.config.productionTip false 示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script src./vue.js/script !-- 此处在Vue2官网把vue.js下载到本地即可 --!-- script srchttps://cdn.jsdelivr.net/npm/vue2/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script--titleDocument/title/head!-- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象root容器里的代码依然符合html规范root容器里的代码被称为[Vue模板]Vue实例与容器是一一对应的真实开发中只有一个Vue实例,并且配合组件一起使用{{ xxx }} 要写js表达式,且xxx会自动读取到data中所有的属性注意区分: js表达式和js代码(语句)表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方a: 变量b: a bdemo(1)x y ? a : bjs代码(语句)if()for() --bodydiv idapp{{ name }} br{{ 1 2 }} br{{ false ? name : age }} /divdiv idlist{{ nameList }}/divdiv classclassVue{{ className }} {{ className2 }}/divscriptnew Vue({el: #app, // el用于指定当前Vue实例为哪个容器服务值通常为class选择器字符串data:{ // 用于存储数据数据供el所指定的容器去使用值我们暂时先写成一个对象name: 财经,age: 19}})new Vue({el: #list, data:{ nameList: list的data,}})new Vue({el: .classVue, data:{ className: 小猪佩奇,}})new Vue({el: .classVue, data:{ className2: 乔治,}})/script/body/htmlVue模板语法有2大类 插值语法 {{ XXX }} 功能 用于解析标签体内容 写法 {{ xxx }} 中的xxx要写js表达式vm实例上的所有属性 指令语法 功能 用于解析标签包括标签属性标签体内容绑定事件… 备注 Vue中有很多指令形式都是v-xxx Vue中有两种绑定数据方式 单向绑定: v-bind 绑定动态属性 // 数据只从data流向页面 v-bind 定义属性: 包括class style input typetext v-bind:value name!-- 简写 --input typetext :name name双向绑定: v-model 数据不仅能从data流向页面,还可以从页面流向data input typetext v-model:value name!-- 简写 --input typetext v-model name 备注 v-model 一般用于表单元素 如input select等因为v-model默认收集的是value的值 v-model: value 可以简写成 v-model,
