16.vue过渡（动画）
-
bower (前端包管理器)
- 安装：npm install bower -g
- 验证：bower --version
- bower install 包名
- bower uninstall 包名
- bower info 包名 (查看包版本信息)
transform 转换 变化 translate 转化 transition 过渡
-
本质上是CSS3过渡 :transtion animation
- fade-enter{opacity=0} 进入 - fade-leave{opacity=0;transform:translateX(200px)} - type="button" value='按钮' @click='toggle' id='d1' class="animated" v-show='bSign' transition="bounce" methods:{ toggle:function () { this.bSign=!this.bSign; } // es6: // toggle(){ // this.bSign=!this.bSign; // } }, transitions:{ //定义所有动画名称 bounce:{ enterClass:'flip', //自定义 leaveClass:'rotateOut' } }
17.vue组件 （一个大的对象）
-
定义一个组件：
- 1全局组件 var qaz=Vue.extend({ template:'
我是h1标题
' }); Vue.component('qaz',qaz);
- 组件里面放数据 ** var qaz=Vue.extend({
data(){ //data使用es6函数的形式 return { //return一个对象（json） msg:'我是h1标题aaaaaaaa' } }, template:'<h1>{{msg}}</h1>' -
2 局部组件 (放到根组件内部) +var vm=new Vue({
el:'#box', data:{ }, components:{ //局部组件 qaz:qaz } })
- 1全局组件 var qaz=Vue.extend({ template:'
-
简写
-
全局
Vue.component('my-aaa',{template:'<h1>简写</h1>' }) var vm=new Vue({ el:'#box', data:{ } }) -
局部 var vm=new Vue({
el:'#box', data:{ }, components:{ 'my-aaa':{ template:'<h1>简写</h1>' } } })
-
-
eg: var vm=new Vue({
el:'#box', data:{ }, components:{ 'my-aaa':{ data(){ return{ msg:'aaaaaa' } }, methods:{ change(){ this.msg='bbbbbbbbbb'; } }, template:'<h1 @click="change()">简写++{{msg}}</h1>' } } })
18.组件配合模板：
- 1.template:'
简写++{{msg}}
' - 2.类似模板引擎
- template:'#tmp'
-
-
动态组件
-
vue-devtools 调试工具
-
vue默认情况是 子组件不能继承父组件的数据
-
组件数据传递
- 一、子组件要获取父组件data 在调用子组件：
- 在子组件内 1 props:['m','myMsg'] 2 props:{
'm':String, 'myMsg':Number
- 在子组件内 1 props:['m','myMsg'] 2 props:{
- 二、父组件获取子组件的数据
- 子组件把自己的数据发送到父组件
- $emit(事件名，数据)； //发送
- v-on --@事件名
- 一、子组件要获取父组件data 在调用子组件：
19、slot: (位置 槽口)
-
作用：占个位置
-
eg: ```
<my-aaa> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </my-aaa> </div> <template id='tmp'> <h1>哈哈哈</h1> <slot>默认情况</slot> <p>啦啦啦</p> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'my-aaa':{ template:'#tmp' } } }) </script> == <ol slot='ol-slot'> <ul slot='ul-slot'> <slot name='ol-slot'>默认情况</slot> <slot name='ul-slot'>默认情况2</slot>
-
20.SPA应用，单页面应用
- vue-resouce 交互
-
vue-router 路由
- 根据url地址不同，出现不同的效果
20.1 view
- 主页 跳转链接
- 展示内容
-
eg:初体验
- ```
<ul> <li><a v-link="{path:'/home'}">主页</a></li> <li><a v-link="{path:'/news'}">笨蛋</a></li> </ul> <div> <router-view></router-view> </div> -
1准备一个根组件
var app = Vue.extend();/2home News组件都准备/
var Home=Vue.extend({ template:'<h1>我是主页</h1>' }) 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') /*6 跳转*/ router.redirect({ '/':'/home' })
- ```
20.2 路由嵌套（多层路由）
-
主页 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}} -> 数据
21.vue-loader 基于webpack
- node --require exports
- webpack 模块加载器 一切东西都是模块最后打包到一块
- require('style.css')
- .vue文件：放置的是vue组件代码
- 1 template>html
- 2 style>-->css
- 3 script>-->js
- babel-loader 将es6编译成es5 让浏览器识别
22.vue配置
.vue文件:
放置的是vue组件代码
<template>
html
</template>
<style>
css
</style>
<script>
js （平时代码、ES6） babel-loader
</script>
-------------------------------------
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件，官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件
ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
--------------------------------------------
webpak准备工作:
cnpm install webpack --save-dev
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
最最核心：cnpm install vue 23.项目运行
手动配置自己:
webpack+vue-loader webpack加载模块如何运行此项目？
1. npm install 或者 cnpm install 2. npm run dev -> package.json "scripts":{ "dev":"webpack-dev-server --inline --hot --port 8082" }以后下载模块：
npm install <package-name> --save-devEADDRINUSE 端口被占用
少了:
webpack-dev-server webpack- 运行 npm run dev
24.手动配置vue开发环境
+ .v ue 结尾，之后称呼组件
路由:
vue-router
-> 如何查看版本:
bower info vue-router
路由使用版本: 0.7.13
配合vue-loader使用:
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'
3. Vue.use(VueRouter);
4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
5. 开启
router.start(App,'#app');
注意:
之前: index.html -> <app></app>
现在: index.html -> <div id="app"></div>
App.vue -> 需要一个 <div id="app"></div> 根元素
home news
---------------------------------------------
路由嵌套:
和之前一模一样
--------------------------------------------
上线:
npm run build
-> webpack -p
25 脚手架 vue-cli
- 提供基本项目结构
本身集成很多项目模板
- simple //不推荐使用
- webpack //可以使用（大型项目）Eslint检查代码规范
- webpack-simple
- browserify 了解
- browserify-simply
基本使用流程 1 npm install vue-cli -g 安装vue环境 验证 vue --version
- 生成项目模板 vue init <模板名> 本地文件夹名称
- 进入到生成目录里面 cd xxx npm install
- npm run dev
4231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
