一、vue.js
是前端的一个框架
框架: 框架就是技术, 代码的封装, 在框架的基础上进行开发, 语法简单高效vue是一套用于构建用户界面的==渐进式框架==,与Angular.js , React.js一起, 是前端的三大框架
由于用JQuery 或者原生的javaScript DOM操作函数树对DOM进行频繁的操作时候, 浏览器需要不停的渲染新的DOM树, 导致页面看起来卡顿问题
特点: 双向数据绑定, , 简化Dom操作, 通过MVVM思想实现数据的双向绑定, 不再操作DOM对象
MV_VM:
Model-view-viewModel 是前端的一种架构思想
可以实现js中的数据与网页中的标签之间进行双向的数据绑定, 任意一方改变, 都可以自动更新到另一方
Vue 实例:
要使用前要进行js文件的导入
进入下载vue.js文件之后,导入项目的js下面
注意:
vue 会管理el选择命中元素及其内部的后代元素
- 可以使用其他选择器, 建议使用ID选择器
- 能跟body进行绑定
1. VUE里的指令
1、<div v-html="绑定名">aaaa</div>
它可以解析字符串里的标签2、
<div v-text="绑定名">aaaa</div>
它不能解析字符串里的标签
演示:
3、<input v-model="message" />
他可以将输入框里的value属性值与vue里的data数据绑定
4、 v-on:click="被调用函数" @click="被调用函数"
v-on 或者 @事件名 为标签添加点击事件 为事件绑定处理函数
<input type="button" value="测试" v-on:click="test1()"/>
<input type="button" value="测试" @click="test2()"/>
此处的this表示的是新建的Vue对象, 通过this来获取此处的属性
5、v-show="isshow" 值为true 或者 false , true是显示, false是消失
控制标签是否显示, 是通过dispaly来控制
6、v-if="isshow" 值为true 或者 false , true是显示, false是消失
相比较v-show="isshow"来说, 效率更低, v-if是通过操作dom来删除创建标签对象
**不同点:
v-if=" ",它里面可以放入表达式**
6、v-bind 绑定元素属性
v-bind: 属性名
v-bind:class="{dzcss:dz}"
此时标签类名是dzcss
dz是一个bolean值,为真就更更改css,反之
6、v-for 通过for循环来输出指定数据
使用方式类似增强for循环
二、创建vue-cli脚手架项目
- 首先要安装一个前端的运行环境nodes
安装好后还要配置环境变量,在电脑环境变量里的Path目录下
==检查是否安装成功:==
可以在cmd打开命令框,并且输入node -v
如果出现node版本, 那就说明已经安装成功环境变量也已经配置好了
- 在Hbuider里面要新建vue-cli 项目,版本是2.6.10,其他版本可能就有语法上的差异
- vue-cli项目结构解析
npm run serve来开启服务器,访问弹出的网址,如果有页面就说明一切都ok
- 写自己的组件
- 当你创建许多个vue组件的话,还要配置路由地址,所有需要一个router组件来集中管理他,并且配置路由地址
在使用router之前要从官网导入组件,在Hbuilder的命令框里输入==npm i vue-router@3.5.3==进行安装,安装后可以在node-moudles寻找
安装号router组件之后,在src下创建一个router文件夹,并且在里面新建一个index.js文件,在里面管理组件
如图: 
- 在router文件里导入组件
- 在main.js中配置路由
导入router组件
并且设置vue支持router
将router挂载到Vue对象里
- 最后不要忘记在app的div里添加router-view (路由视图) 用来切换组件
## 三、引入Element-ui组件
也就是为开发者使用写好的组件
==直接拿来用就可以==
- 首先在终端里面安装 模块
使用命令: npm i element-ui来导入模块
- 然后全局配置文件.js里进行配置与导入
==导入element-ui==并且==设置vue支持权限==
_
组件之间的转换:
_
