ianutt的博客

vue

Vue3

Vue3学习

①②③④⑤⑥⑦

1.创建NavBar.vue组件，组件必须有根，写好最外层的div，class命名为nav-bar，在里面用3个div包好3个具名插槽<div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"></slot></div>

1.做出最外层的tabbar大组件，这里要写一个id是tab-bar的div的根标签，里面写一个插槽slot（可以插入四个小组件），写好外层的样式；在App.vue上写大组件标签，import导入和注册组件，引用公共样式。2.做出里面item的小组件，这里要写一个小组件的div标签包着，命名为tab-bar-item，里面写两个具名插槽，slot的name为item-icon和item-text，分别装着小图标和文字，写好小组件的样式；在App.vue上写小组件标签，import导入和注册组件。3.在A

2

1

2

1

认识webpackwebpack安装webpack起步webpack配置css-loader的使用less文件处理图片文件处理ES6语法处理webpack配置vueplugin的使用本地服务器配置文件的分离

CommonJS（了解）

注册组件三个步骤①创建组件构造器Vue.extend()传入template②注册组件Vue.component()需要传递两个参数：1.注册组件的标签名 2.组件构造器③使用组件<my-cpn></my-cpn><div id="app"> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn></div>&lt

插值操作Mustache（双大括号）将data中的文本数据，插入到HTML中<h2>{{ name }}</h2><h2>{{ name }} {{ lastname }}</h2><h2>{{ num * 2}}</h2>v-once该指令后面不需要跟任何表达式（比如之前的v-for后面是有跟表达式的）该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变<h2 v-once&g

let/vares6中不使用var，经常使用let(es6变量) 、const(es6常量)块级作用域 • es5：var没有块级作用域（if/for） • es6：let有块级作用域（if/for） 外面的i不会影响里面的i，es6不需要借助闭包 • 函数是一个作用域<script></script>const使用const修饰的标识符为常量，不可以再次赋值，当修饰的标识符不会被再次赋值时，可以使用const来保证数据的安全性；建议在ES6中，优先使用.

vue.js的安装直接CDN引入下载和引入NPM安装vue初体验代码做了什么事情我们来阅读JavaScript代码，会发现创建了一个Vue对象创建Vue对象的时候，传入了一些options：{}①{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上②{}中包含了data属性：该属性中通常会存储一些数据Tips：这些数据可以是我们直接定义出来的，比如像上面这样，也可能是来自网络，从服务器加载的数据列表HTML代码中，使

划分目录结构assets 资源 （img、css）components 组件（公共组件）common 公共组件（拿到其他项目也能用的）content 当前项目相关的公共组件views 大视图（首页，分类，购物车等大的页面）router 路由store 状态管理network 网络相关common 公共的js文件（const.js抽取公共常量；utils.js公共方法；mixin.js混路）引入css文件啊...

一、准备工作：安装node.js(自带了软件包管理工具npm)安装webpack，命令： sudo npm install webpack -g //-g表示全局安装安装vue cli3的脚手架构建工具，命令：sudo npm install -g @vue/cli //vue cli3的包名称由vue-cli改成了@vue/cli测试有没有安装成功（node-v npm -v webpack -v vue -V）二、搭建项目创建cli3项目，命令：vue