Vue-Cli
一.vue.js
1.优点
1)体积小,压缩后33K
2)更高的运行效率
3)双向数据绑定
4)生态丰富,学习成本低
2.Vue指令
指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。
1)v-text
(1)作用 ：设置标签的文本内容 默认写法会替换全部内容，使用差值表达式可以替换指定内容
(2)内部支持写表达式：
<p v-text="message">aaaa</p>
<p>{{message}}aaaa</p>
2)v-html
--> {{message}}，v-text，v-html区别：
{{message}} 插入一个值,不影响标签中的其他内容
v-html="message" , v-text="message"会覆盖标签中其他内容
{{message}}，v-text="message" 不能解析内容中html标签
v-html="message" 可以解析内容中的html标签
3)v-on
作用：为元素绑定事件
事件名不需要写on指令可以简写为@
绑定的方法定义在methods属性中,可以传入自定义参数
4)v-model
v-model="变量" 把表单元素的value值绑定到vue对象的date中
作用：便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据表单元素的值 双向数据绑定
5)v-show
作用： 根据真假切换元素的显示状态
原理：修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值 值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新
6)v-if与v-else
作用：根据表达式的真假切换元素的显示状态
本质：通过操纵dom元素来切换
显示状态表达式的值为true，元素存在于dom中，为false，从dom中移除
区别：
v-show="布尔值" true-显示 false-隐藏。控制标签display属性，显示隐藏标签的，效率高。
v-if="布尔值" true-显示 false-隐藏。在隐藏时，删除了标签，显示时重新创建标签，效率低。
频繁的切换v-show，反之使用v-if，前者的切换消耗小
7)v-bind
属性名="变量名" 一旦为属性添加v-bind，值就是一个在date中定义的变量了
（可以简写为 ：属性名）
8)v-for
作用是根据数据生成列表结构
数组经常和v-for结合
使用语法是（item，index）in数据
item 和index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个key值 :key=”值” 尽可能唯一
二.vue生命周期
三.vue-cli 搭建项目
1.下载：
https://nodejs.org/en/download
2.终端的一些指令
导入新文件如果没有node_modules，在终端使用 npm install指令，安装下载项目依赖。
npm run serve --启动项目
ctrl+c --停止服务
npm run build --打包项目
如果终端为空白，右键项目，最下端点击外部命令，点击npm run serve，进入终端。
3.创建组件
4.组件路由（切换组件）
1）组件模板格式
5.搭建步骤
1）创建router目录
2) 使用路由器
<router-link to="/index">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view/>
3) 在main.js 中配置路由
4）使用
5）调试
（1）在终端输入 npm run serve
报错：
运行成功：
（2）打开网页：
（点击登录或注册，切换到新页面上。严格来说只有一个页面，其他的称为组件）
优化：
（在index.js中配置完后，页面打开直接访问index）
四.Element
1.安装
npm i element-ui -S
将指令复制到终端，进行下载
2.在main.js文件导入elementui
原文地址：https://blog.csdn.net/2403_87587287/article/details/145009698
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！