- 实现响应式的数据绑定和组合视图组件
http://nodejs.cn/
- 无脑点击下一步
win+r输入cmd进入
安装cnpm，淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
对npm进行全局安装
cnpm install live-server -g #国内镜像
查看版本，看到版本号—>安装成功
清除缓冲
npm cache clean -f
ctrl+~键打开命令框
输入
mkdir temp//创建文件夹
编写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);
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
font-family: PingFang SC
}
.name{
margin-left: -237px;
padding: 10px;
font-style: inherit
}
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);
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
