git

最新推荐文章于 2025-04-22 17:23:42 发布

原创最新推荐文章于 2025-04-22 17:23:42 发布 · 置顶 · 344 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍Vue.js的基础使用方法，包括组件定义、数据绑定、动画过渡等，并深入探讨Vue.js单页面应用的搭建流程，以及如何利用Vue-loader进行项目构建。

git page：

任何仓库 master分支，都可以发布(git page)

-------------------------------------

双向过滤器:

Vue.filter(name,{

read:

write:

});

-------------------------------------

1.0

2.0

-------------------------------------

引入 vue.js

-------------------------------------

bower-> （前端）包管理器

npm install bower -g

验证: bower --version

bower install <包名>

bower uninstall <包名>

bower info <包名> 查看包版本信息

-------------------------------------

vue-> 过渡(动画)

本质走的css3: transtion ,animation

动画:

.fade-transition{

}

进入：

.fade-enter{

opacity: 0;

}

离开：

.fade-leave{

opacity: 0;

transform: translateX(200px);

}

----------------------------------------

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

}

});

--------------------------------------

另一种编写方式:

Vue.component('my-aaa',{

template:'<strong>好</strong>'

});

var vm=new Vue({

el:'#box',

components:{

'my-aaa':{

template:'<h2>标题2</h2>'

}

});

-----------------------------------

配合模板:

1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

2. 单独放到某个地方

a). <script type="x-template" id="aaa">

</script>

b). <template id="aaa">

<ul>

</li>

</ul>

</template>

-----------------------------------

动态组件:

--------------------------------------------

vue-devtools -> 调试工具

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

--------------------------------------------

vue默认情况下，子组件也没法访问父组件数据

--------------------------------------------

组件数据传递: √

1. 子组件就想获取父组件data

在调用子组件：

子组件之内:

props:['m','myMsg']

props:{

'm':String,

'myMsg':Number

}

2. 父级获取子级数据

*子组件把自己的数据，发送到父级

vm.$emit(事件名,数据);

v-on: @

--------------------------------------------

vm.$dispatch(事件名,数据) 子级向父级发送数据

vm.$broadcast(事件名,数据) 父级向子级广播数据

配合: event:{}

在vue2.0里面已经，报废了

--------------------------------------------

slot:

位置、槽口

作用: 占个位置

类似ng里面 transclude （指令）

--------------------------------------------

vue-> SPA应用，单页面应用

vue-resouce 交互

vue-router 路由

根据不同url地址，出现不同效果

咱上课: 0.7.13

主页 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'

});

--------------------------------------

路由嵌套(多层路由):

主页 home

新闻页 news

subRoutes:{

'login':{

component:{

template:'<strong>我是登录信息</strong>'

}

'reg':{

component:{

template:'<strong>我是注册信息</strong>'

}

路由其他信息:

/detail/:id/age/:age

{{$route.params | json}} -> 当前参数

{{$route.path}} -> 当前路径

{{$route.query | json}} -> 数据

--------------------------------------------

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组件代码

html

</template>

<style>

css

</style>

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

git page：

任何仓库 master分支，都可以发布(git page)

-------------------------------------

双向过滤器:

Vue.filter(name,{

read:

write:

});

-------------------------------------

1.0

2.0

-------------------------------------

引入 vue.js

-------------------------------------

bower-> （前端）包管理器

npm install bower -g

验证: bower --version

bower install <包名>

bower uninstall <包名>

bower info <包名> 查看包版本信息

-------------------------------------

vue-> 过渡(动画)

本质走的css3: transtion ,animation

动画:

.fade-transition{

}

进入：

.fade-enter{

opacity: 0;

}

离开：

.fade-leave{

opacity: 0;

transform: translateX(200px);

}

----------------------------------------

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

}

});

--------------------------------------

另一种编写方式:

Vue.component('my-aaa',{

template:'<strong>好</strong>'

});

var vm=new Vue({

el:'#box',

components:{

'my-aaa':{

template:'<h2>标题2</h2>'

}

});

-----------------------------------

配合模板:

1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

2. 单独放到某个地方

a). <script type="x-template" id="aaa">

</script>

b). <template id="aaa">

<ul>

</li>

</ul>

</template>

-----------------------------------

动态组件:

--------------------------------------------

vue-devtools -> 调试工具

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

--------------------------------------------

vue默认情况下，子组件也没法访问父组件数据

--------------------------------------------

组件数据传递: √

1. 子组件就想获取父组件data

在调用子组件：

子组件之内:

props:['m','myMsg']

props:{

'm':String,

'myMsg':Number

}

2. 父级获取子级数据

*子组件把自己的数据，发送到父级

vm.$emit(事件名,数据);

v-on: @

--------------------------------------------

vm.$dispatch(事件名,数据) 子级向父级发送数据

vm.$broadcast(事件名,数据) 父级向子级广播数据

配合: event:{}

在vue2.0里面已经，报废了

--------------------------------------------

slot:

位置、槽口

作用: 占个位置

类似ng里面 transclude （指令）

--------------------------------------------

vue-> SPA应用，单页面应用

vue-resouce 交互

vue-router 路由

根据不同url地址，出现不同效果

咱上课: 0.7.13

主页 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'

});

--------------------------------------

路由嵌套(多层路由):

主页 home

新闻页 news

subRoutes:{

'login':{

component:{

template:'<strong>我是登录信息</strong>'

}

'reg':{

component:{

template:'<strong>我是注册信息</strong>'

}

路由其他信息:

/detail/:id/age/:age

{{$route.params | json}} -> 当前参数

{{$route.path}} -> 当前路径

{{$route.query | json}} -> 数据

--------------------------------------------

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组件代码

html

</template>

<style>

css

</style>

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

最最核心：