前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)

一、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下面

注意:

1. vue 会管理el选择命中元素及其内部的后代元素
2. 可以使用其他选择器, 建议使用ID选择器
3. 能跟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脚手架项目

1. 首先要安装一个前端的运行环境nodes
   安装好后还要配置环境变量,在电脑环境变量里的Path目录下
   
   检查是否安装成功:
   可以在cmd打开命令框,并且输入node -v
   如果出现node版本, 那就说明已经安装成功环境变量也已经配置好了

2. 在Hbuider里面要新建vue-cli 项目,版本是2.6.10,其他版本可能就有语法上的差异

3. vue-cli项目结构解析
   
   npm run serve来开启服务器,访问弹出的网址,如果有页面就说明一切都ok

4. 写自己的组件

5. 当你创建许多个vue组件的话,还要配置路由地址,所有需要一个router组件来集中管理他,并且配置路由地址

在使用router之前要从官网导入组件,在Hbuilder的命令框里输入npm i vue-router@3.5.3进行安装,安装后可以在node-moudles寻找

安装号router组件之后,在src下创建一个router文件夹,并且在里面新建一个index.js文件,在里面管理组件
如图:

6. 在router文件里导入组件

7. 在main.js中配置路由
   导入router组件
   并且设置vue支持router
   将router挂载到Vue对象里
   

8. 最后不要忘记在app的div里添加router-view (路由视图) 用来切换组件
   

三、引入Element-ui组件

也就是为开发者使用写好的组件
直接拿来用就可以

1. 首先在终端里面安装 模块

使用命令: npm i element-ui来导入模块

2. 然后全局配置文件.js里进行配置与导入
   导入element-ui并且设置vue支持权限

---

组件之间的转换:

---