Vue-高级讲师之笔记03
来源:互联网 发布:适合美工的笔记本 编辑:程序博客网 时间:2024/05/29 07:55
1、git page:
任何仓库 master分支,都可以发布(git page)
-------------------------------------
双向过滤器:
Vue.filter(name,{
read:
write:
});
-------------------------------------
1.0
2.0
-------------------------------------
引入 vue.js
-------------------------------------
2、bower-> (前端)包管理器,类似于npm(后端)的包管理器
1.npm install bower -g
2.验证: bower --version
bower install <包名> 下载
bower uninstall <包名> 卸载
bower info <包名> 查看包版本信息
bower install vue(安装的是最新的vue包)
bower install vue#1.0.28(安装自已需要的vue版本包)(bower是# ;npm是@)
<script src="bower_components/vue/dist/vue.js"></script> 新建文件后引入
-------------------------------------
3、vue-> 过渡(动画)
本质走的css3: transtion ,animation
<div id="div1" v-show="bSign" transition="fade"></div>
动画:
.fade-transition{
写的是运动的时间等等
}
进入:
.fade-enter{
opacity: 0;
}
离开:
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式,函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
--------------------------------------
5、另一种编写方式:
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'<h2>标题2</h2>'
}
}
});
2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
-----------------------------------
7、动态组件:
<component :is="组件名称"></component>
--------------------------------------------
9、vue默认情况下,子组件也没法访问父组件数据
在调用子组件:
<bbb :m="数据"></bbb>
子组件之内:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
2. 父级获取子级数据
*子组件把自己的数据,发送到父级
vm.$emit(事件名,数据);
v-on: @
--------------------------------------------
11、vm.$dispatch(事件名,数据) 子级向父级发送数据 (注:没有代码演示)
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经,报废了
--------------------------------------------
12、slot:
位置、槽口
作用: 占个位置
类似ng里面 transclude (指令)
vue-router 路由
安装:
$ bower info vue-router
$ bower install vue-router#0.7.13
根据不同url地址,出现不同效果
主页 home
新闻页 news
html:
<a v-link="{path:'/home'}">主页</a>跳转链接
展示内容:
<router-view></router-view>
js:
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
跳转:
router.redirect({
‘/’:'/home'
});
--------------------------------------
14、路由嵌套(多层路由):
主页 home
登录 home/login
注册 home/reg
新闻页 news
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
路由其他信息:
/detail/:id/age/:age
{{$route.params | json}}-> 当前参数
{{$route.path}}-> 当前路径
{{$route.query | json}}-> 数据
后台: nodeJs -> require exports
broserify 模块加载,只能加载js
webpack 模块加载器, 一切东西都是模块, 最后打包到一块了
require('style.css');-> css-loader、style-loader
vue-loader基于webpack
.css
.js
.html
.php
.....
a.vue
b.vue
.vue文件:
放置的是vue组件代码
<template>
html
</template>
<style>
css
</style>
<script>
js (平时代码、ES6)因为ES6浏览器支持的不是很好,所以用babel-loader编译成ES5浏览器能懂
</script>
-------------------------------------
16、简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件,官方推荐命名法(首字母大写)
|-package.json工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.jswebpack配置文件
ES6: 模块化开发
导出模块:
export default {}
引入模块:
import 模块名 from 地址
cnpm install webpack-dev-server --save-dev
App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最最核心:
任何仓库 master分支,都可以发布(git page)
-------------------------------------
双向过滤器:
Vue.filter(name,{
read:
write:
});
-------------------------------------
1.0
2.0
-------------------------------------
引入 vue.js
-------------------------------------
2、bower-> (前端)包管理器,类似于npm(后端)的包管理器
1.npm install bower -g
2.验证: bower --version
bower install <包名> 下载
bower uninstall <包名> 卸载
bower info <包名> 查看包版本信息
bower install vue(安装的是最新的vue包)
bower install vue#1.0.28(安装自已需要的vue版本包)(bower是# ;npm是@)
<script src="bower_components/vue/dist/vue.js"></script> 新建文件后引入
-------------------------------------
3、vue-> 过渡(动画)
本质走的css3: transtion ,animation
<div id="div1" v-show="bSign" transition="fade"></div>
动画:
.fade-transition{
写的是运动的时间等等
}
进入:
.fade-enter{
opacity: 0;
}
离开:
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
----------------------------------------
4、vue组件:
组件: 就是一个大对象定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式,函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
--------------------------------------
5、另一种编写方式:
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'<h2>标题2</h2>'
}
}
});
-----------------------------------
6、配合模板:
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
-----------------------------------
7、动态组件:
<component :is="组件名称"></component>
--------------------------------------------
8、vue-devtools -> 调试工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd--------------------------------------------
9、vue默认情况下,子组件也没法访问父组件数据
--------------------------------------------
10、组件数据传递: √
1. 子组件就想获取父组件data在调用子组件:
<bbb :m="数据"></bbb>
子组件之内:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
2. 父级获取子级数据
*子组件把自己的数据,发送到父级
vm.$emit(事件名,数据);
v-on: @
--------------------------------------------
11、vm.$dispatch(事件名,数据) 子级向父级发送数据 (注:没有代码演示)
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经,报废了
--------------------------------------------
12、slot:
位置、槽口
作用: 占个位置
类似ng里面 transclude (指令)
--------------------------------------------
13、vue-> SPA应用,单页面应用
vue-resouce交互vue-router 路由
安装:
$ bower info vue-router
$ bower install vue-router#0.7.13
根据不同url地址,出现不同效果
主页 home
新闻页 news
html:
<a v-link="{path:'/home'}">主页</a>跳转链接
展示内容:
<router-view></router-view>
js:
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
跳转:
router.redirect({
‘/’:'/home'
});
--------------------------------------
14、路由嵌套(多层路由):
主页 home
登录 home/login
注册 home/reg
新闻页 news
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
路由其他信息:
/detail/:id/age/:age
{{$route.params | json}}-> 当前参数
{{$route.path}}-> 当前路径
{{$route.query | json}}-> 数据
--------------------------------------------
15、vue-loader:
其他loader -> css-loader、url-loader、html-loader.....后台: nodeJs -> require exports
broserify 模块加载,只能加载js
webpack 模块加载器, 一切东西都是模块, 最后打包到一块了
require('style.css');-> css-loader、style-loader
vue-loader基于webpack
.css
.js
.html
.php
.....
a.vue
b.vue
.vue文件:
放置的是vue组件代码
<template>
html
</template>
<style>
css
</style>
<script>
js (平时代码、ES6)因为ES6浏览器支持的不是很好,所以用babel-loader编译成ES5浏览器能懂
</script>
-------------------------------------
16、简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件,官方推荐命名法(首字母大写)
|-package.json工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.jswebpack配置文件
ES6: 模块化开发
导出模块:
export default {}
引入模块:
import 模块名 from 地址
--------------------------------------------
17、webpak准备工作:
cnpm install webpack --save-devcnpm install webpack-dev-server --save-dev
App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最最核心:
阅读全文
1 0
- Vue-高级讲师之笔记03
- Vue-高级讲师之笔记01
- Vue-高级讲师之笔记02
- Vue-高级讲师之笔记04
- Vue-高级讲师之笔记05
- Vue-高级讲师之笔记06
- Vue-高级讲师之笔记07(结尾)
- 某公司嵌入式高级讲师要求
- 内部讲师培训笔记
- vue之vue-router vuex学习笔记
- 开启讲师之路
- vue学习笔记03
- 讲师课程设计之问题分析
- vue.js学习笔记之prototype
- vue 学习笔记一之Quick Start
- Vue学习笔记之 路由路径
- Vue 学习笔记1之安装
- android 学习笔记 (for 黎活明讲师)
- arxiv每周速报第四期
- “Headers already sent” error in PHP
- ExecutorService与Executors例子的简单剖析
- 值传递和引用传递
- Kotlin教程学习-函数定义,变量声明
- Vue-高级讲师之笔记03
- git cherry-pick. 如何把已经提交的commit, 从一个分支放到另一个分支
- Maven详解之仓库------本地仓库、远程仓库
- SQL(2) ---级联联表批量删除
- Java线程池
- Tomcat 部署多个web项目
- OpenGL学习——(3)库函数
- ajaxfileupload同一个文件只能上传一次问题解决
- webcollector爬虫框架使用案例