Vue超详细学习笔记

number1:{{num1}}

number2:{{num2}}

number1:

number2:

<button @click=“add”>+

<button @click=“sub”>-

result:{{result}}

2.6 v-bind

---

• v-bind是处理HTML中的标签属性的

• 在html中用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的；

3. Vue-cli

==============================================================================

Vue-cli是vue官方出品的快速构建单页应用的脚手架，致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

3.1 安装vue-li

---

查看版本，出现版本正确

用npm命令安装vue-cli

cnpm install vue-cli -g

• -g：代表全局

查看版本

• 如果出现版本号，说明已经顺利的把vue-cli安装成功

3.2 初始化项目

---

需要用vue init命令来初始化项目

vue init

• init：表示初始化项目

• < template-name >：表示模板名称，vue-cli官方为我们提供了5种模板，一般使用webpack（全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展）；

• < project-name >：项目名字

输入命令后，会询问几个简单的选项如下：

• Project name :项目名称 ，如果不需要更改直接回车就可以了，不能使用大写；

• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写；

• Author：作者；

• Install vue-router? 是否安装vue的路由插件需要安装，选择Y；

• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格，不需要输入n；如果是大型团队开发，最好是进行配置；

• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，这里不需要，所以输入n；

• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n；

如果下载超慢可以使用下面指令后再创建项目：

cnpm install --save-dev webpack

3.3 运行项目

---

npm run dev

3.4 结束运行

---

Ctrl+C

3.5 Vue-cli案例

---

3.5.1 App.vue

首页

Form

Main

3.5.2 HelloWord.vue

{{ msg }}

默认页面

3.5.3 my.vue

左边区域

表单提交

UserName:

PassWord:

age:

<button @click=“login”>LOGIN

3.5.4 index.js

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

import MyVue from ‘@/components/my’

import Main from ‘@/view/main.vue’

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/’,

name: ‘HelloWorld’,

component: HelloWorld

},

{

path:‘/my’,

component:MyVue

},

{

path:‘/main’,

component:Main

}

]

})

3.5.5 结果展示

3.5.6 对应关系

4. Vue-router

=================================================================================

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得轻松；这里的路由并不是指我们平时所说的硬件路由器，而是SPA（单页应用）的路径管理器也就是说vue-router就是我们WebApp的链接路径管理系统；

4.1 安装vue-router

---

如果用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router；

用npm命令安装vue-router

npm install vue-router

4.2 路由文件

---

4.3 增加一个my.vue

---

地址栏输入http://localhost:8080/#/my的时候出现一个新的页面;

1. 在src/components目录下，新建 my.vue 文件

左边区域

表单提交

UserName:

PassWord:

age:

<button @click=“login”>LOGIN

2. 引入MyVue组件：我们在router/index.js文件的上边引入MyVue组件

import MyVue from ‘@/components/my’

3. 增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下：

{

path:‘/my’,

component:MyVue

}

4.4 router-link制作导航

---

首页

• 导航路径，在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 /

4.5 传值问题

---

4.5.1 通过name传值

{

path:‘/userInfo’,

name:‘This is Kak’,

component:User

},

//接收

currentUser:{{$route.name}}

4.5.2 通过标签to传值

• to属性进行传参，需要您注意的是这里的to要进行一个绑定，to前面要加冒号；

商品管理

• name：就是我们在路由配置文件中起的name值。

• params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

{

path:‘/goodsInfo’,

name:‘eqp’,

component:Goods

}

• name：就是传过来的name

name:{{$route.name}}

pname:{{$route.params.pname}}

age:{{$route.params.age}}

• 就收数据

4.5.3 通过URL传递参数

• 传入参数

其他管理

• 路由配置文件里制定了这两个值

{

path:‘/otherInfo/:name/:age’,

component:Others

}

• 接收值

name:{{$route.params.name}}

age:{{$route.params.age}}

4.6 子路由

---

也就是菜单的路由方式，子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式；

在需要的单页面多显示的位置加入

编写router/index.js代码

export default new Router({

routes: [

{

path: ‘/home’,

name: ‘Home’,

component: Home,

children:[

{path:‘/’,component:Welcome},

{path:‘/userInfo’,component:User},

{path:‘/goodsInfo’,name:‘eqp’,component:Goods},

{ path:‘/otherInfo/:name/:age’,component:Others}

]

},

]

})

4.7 重定向

---

把原来的component换成redirect参数就可以；

{

path:‘/otherInfo/:name/:age’,

redirect:Others

}

5. 使用Element组件

==================================================================================

Element，一套基于 Vue 2.0 的桌面端组件库；

• 网址：https://element.eleme.cn/2.0/#/zh-CN

5.1 安装Element组件

---

用npm命令安装Element组件

npm install element-ui --S

导入element的js库以及样式

import ElementUI from ‘./router’

import ‘element-ui/lib/theme-chalk/index.css’

//全组件加载

Vue.use(ElementUI);

5.2 引入案例

---

5.2.1 进入官网、找需要的类型、查看代码

5.2.2 编写login.vue

加入对应的样式

登录页面

<el-button type=“primary” @click=“submitForm(‘ruleForm2’)”>提交

<el-button @click=“resetForm(‘ruleForm2’)”>重置

回到首页

5.2.3 在index.js中引入

{

path:‘/login’,

component:Login

}

5.2.4 页面展示

6. 综合案例

===========================================================================

6.1 整体思路

---

将默认页面修改为index.vue，将页面分为（heard、Main、footer）三部分；左上角跳转登录和添加活动界面；中间是轮播图；点击添加活动跳转添加页面；点击登录跳转登录界面；只要是admin跳转主页面、不是则回到首页；进入主页面首先显示欢迎页，然后利用子路由单页多显示；

6.2 index.js

---

import Vue from ‘vue’

import Router from ‘vue-router’

import ElementUI from ‘element-ui’

import ‘element-ui/lib/theme-chalk/index.css’

import Home from ‘@/views/home’

import User from ‘@/views/userInfo/usersinfo’

import Goods from ‘@/views/goodsinfo/showGoods’

import Others from ‘@/views/other/otherView’

import Login from ‘@/views/login.vue’

import Register from ‘@/views/register.vue’

import Welcome from ‘@/views/welcome’

import FirstPage from ‘@/views/index’

Vue.use(Router)

Vue.use(ElementUI);

export default new Router({

routes: [

{

path:‘/’,

component:FirstPage

},

{

path:‘/login’,

component:Login

},

{

path:‘/regist’,

component:Register

},

{

path: ‘/home’,

name: ‘Home’,

component: Home,

children:[

{path:‘/’,component:Welcome},

{path:‘/userInfo’,component:User},

{path:‘/goodsInfo’,name:‘eqp’,component:Goods},

{ path:‘/otherInfo/:name/:age’,component:Others}

]

},

]

})

6.3 index.vue

---

搜索

登录

添加活动

娱乐天地

©kak.com 京ICP证XXXXX号，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

6.4 register.vue

---

添加活动界面

-

<el-button type=“primary” @click=“submitForm(‘ruleForm’)”>立即创建

<el-button @click=“resetForm(‘ruleForm’)”>重置

6.5 login.vue

---

登录页面

<el-button type=“primary” @click=“submitForm(‘ruleForm2’)”>提交

<el-button @click=“resetForm(‘ruleForm2’)”>重置

回到首页

6.6 home.vue

---

home page

用户管理

商品管理

其他管理

回到首页