编写index.html
The First Vue Demo
{{mes}}
初始化项目,生成package.json
npm init
在项目目录中打开
live-server
运行结果
==============================================================================
-
v-if是vue的一个内部指令,作用于HTML中,根据表达式的值的真假条件,销毁或重建元素;
-
v-show根据表达式之真假值,切换元素的 display CSS 属性
v-for指令是循环渲染一组data中的数组,需要以 item in items 形式,items是源数据数组并且item是数组元素迭代的别名。
是否显示
- {{h}}
{{person.pid}}- {{person.pname}}- {{person.page}}
msg
Two title
- 先在js里定义了hobby、persons数组,然后在模板中用v-for循环出来,需要那个html标签循环,v-for就写在那个上边;
当我们网速很慢或者javascript出错时,会显示{{xxx}};Vue提供的v-text、v-html可以解决这个问题;
v-text、v-html hello
abc
v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码;
- 还可以使用@click代替v-on
Add number:{{num}}
+
-
<button @click=“add”>加
<button @click=“sub”>减
绑定数据源:就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定;我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改,同时我们还需要监听用户行为,如果用户在标签上面修改了数据,我们需要获取到数据可以使用v-mode指令;
v-model number1:{{num1}}
number2:{{num2}}
number1:
number2:
<button @click=“add”>+
<button @click=“sub”>-
result:{{result}}
- v-bind是处理HTML中的标签属性的
v-bind - 在html中用v-bind:src=”imgSrc”的动态绑定了src的值,这个值是在vue构造器里的data属性中找到的;
==============================================================================
Vue-cli是vue官方出品的快速构建单页应用的脚手架,致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样可以专注在撰写应用上,而不必花好几天去纠结配置的问题。
查看版本,出现版本正确
用npm命令安装vue-cli
cnpm install vue-cli -g
- -g:代表全局
查看版本
- 如果出现版本号,说明已经顺利的把vue-cli安装成功
需要用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
npm run dev
Ctrl+C
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 对应关系
=================================================================================
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得轻松;这里的路由并不是指我们平时所说的硬件路由器,而是SPA(单页应用)的路径管理器也就是说vue-router就是我们WebApp的链接路径管理系统;
如果用vue-cli脚手架来搭建项目,配置过程会选择是否用到路由,如果选择y,后面下载依赖会自动下载vue-router;
用npm命令安装vue-router
npm install vue-router
地址栏输入http://localhost:8080/#/my的时候出现一个新的页面;
- 在src/components目录下,新建 my.vue 文件
左边区域
表单提交
UserName:
PassWord:
age:
<button @click=“login”>LOGIN
- 引入MyVue组件:我们在router/index.js文件的上边引入MyVue组件
import MyVue from ‘@/components/my’
- 增加路由配置:在router/index.js文件的routes[]数组中,新增加一个对象,代码如下:
{
path:‘/my’,
component:MyVue
}
首页
- 导航路径,在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 /
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}}
也就是菜单的路由方式,子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式;
在需要的单页面多显示的位置加入
编写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}
]
},
]
})
把原来的component换成redirect参数就可以;
{
path:‘/otherInfo/:name/:age’,
redirect:Others
}
==================================================================================
Element,一套基于 Vue 2.0 的桌面端组件库;
用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.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 页面展示
===========================================================================
将默认页面修改为index.vue,将页面分为(heard、Main、footer)三部分;左上角跳转登录和添加活动界面;中间是轮播图;点击添加活动跳转添加页面;点击登录跳转登录界面;只要是admin跳转主页面、不是则回到首页;进入主页面首先显示欢迎页,然后利用子路由单页多显示;
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}
]
},
]
})
搜索
登录
添加活动
JavaScript
-
js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
-
如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
-
Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
-
对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
-
this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
-
call,apply,bind
-
显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax,XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试
-
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】