vue到底是什么?
一个mvvm框架(库)、和angular类似
面向数据的思想
vue和angular区别?
vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
适合: 移动端项目,小巧
vue的发展势头很猛，github上start数量已经超越angular
angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目
共同点: 不兼容低版本IE
-------------------------------------------
vue基本雏形:
vue:
html:
<div id="box">
{{msg}}
</div>
js:
var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});
注：this---> 指向new的vue对象
常用指令:
指令: 扩展html标签功能,属性
v-model 一般表单元素(input) 双向数据绑定
事件:
v-on:click="函数"
v-on:click="show()"
注：如果不传参可以把括号省略
简写：@click=""
v-on:click/mouseout/mouseover/dblclick/mousedown.....
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法
alert(1);
}
}
});
显示隐藏:
v-show="true/false"
v-show="bShow"
v-show="a>1"
v-show="真/假"
真：true，非空字符串，非0的数字，非空对象
假：false，空串('',' ')，0，null，undefined，NaN
-----------------------------------------
事件对象:
@click="show($event)"
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown 【$event】 ev.keyCode
@keyup="show($event)"
show:function(ev){
ev.keyCode
}
常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
-----------------------------------------
属性:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img :src="url" alt=""> 效果可以出来，不会发404请求
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"
-----------------------------------------
模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次，初始化是什么就是什么
{{{msg}}} HTML转译输出 【2.x中已删除】
-----------------------------------------
过滤器:-> 过滤模板数据
{{msg| filterA}}
{{msg| filterA | filterB}} 可以多个过滤器同时用
uppercase
{{'welcome'| uppercase}}
lowercase
capitalize
currency 货币
{{msg| filterA 参数}}
debounce 配合事件，延迟执行
limitBy 2 0
只写一个参数，截取数组几个
写两个参数，第一个是截取几个，第二位是下标从哪里开始
filterBy 'li' 获取包含li的
orderBy -1 倒序排列，1为正序排列
json 把json解析成字符串
-----------------------------------------
交互:
$http （ajax）
如果vue想做交互
引入: vue-resouce
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
-----------------------------------------
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
-----------------------------------------
jsonp:
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
https://www.baidu.com/s?wd=s
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
================================================================
vue制作weibo
交互
vue-> 1.0
vue-resource ajax
this.$http.get()/post()/jsonp()
this.$http({
url:地址
data: 给后台提交数据,
method:'get' /post/jsonp
jsonp:'cb' //cbName (jsonp的时候用)
emulateJSON ：true //设置文档头(post的时候用)
});
----------------------------------
vue生命周期————钩子函数:
1.x
初始化实例 init
实例已经创建 created √
编译之前 beforeCompile
编译之后 compiled
数据插入到页面 ready √
销毁之前 beforeDestroy
销毁之后 destroyed
2.x
创建之前 beforeCreate
创建之后 created
编译之前 beforeMount
编译之后 mounted
更新之前 beforeUpdate
更新之后 updated
销毁之前 beforeDestroy
销毁之后 destroyed
----------------------------------
用户会看到花括号标记:
v-cloak 防止闪烁, 比较大段落
html中加 v-cloak
style 中加 [v-cloak] { display:none; }
----------------------------------
<span>{{msg}}</span> ---> v-text
<span v-text = 'msg'></span>
<span v-html = 'msg'></span>
注：二者都会把标签中原有内容清空
----------------------------------
计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
--------------------------
完整的写法：
computed:{
b:{
get : function(){
return this.a+2;
},
set : function(val){
this.a=val;
}
}
}
* computed里面可以放置一些业务逻辑代码，一定记得return
---------------------------------
vue实例简单方法:
vm.$el -> 就是元素 【vm.$el.style.background='red'】
vm.$data -> 就是data 【vm.$data.msg】
vm.$mount -> 手动挂在vue程序 【new Vue({ ... }).$mount('#box')】
vm.$options -> 获取自定义属性 【vm.$options.my_info】
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
vm.$watch('要监控的数据',function(newVal, oldVal){
变化后干得事情
},{deep:true})
---------------------------------
循环：
v-for="value in data"
会有重复数据？
track-by='索引' 提高循环性能
track-by='$index/uid'
---------------------------------
自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){
});
双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
数据 -> 视图
model -> view
view -> model
---------------------------------
自定义指令:（属性指令）
Vue.directive(指令名称,function(参数){
this.el ---> 原生DOM元素
});
<div v-red="参数"></div>
指令名称: v-red ---> red
* 注意: 必须以 v-开头
自定义键盘指令：
------------------------------------------------
v-for:
1.0之前
数组：$index json:$key
(i,v) in arr
(k,v) in json
track-by="$index"
2.0
参数的顺序调换了
去掉了$index
去掉了$key
(v,i) in arr
(v,k) in json
(v,k,index) in json
可以写重复的数据 如果也想改 :key="i"
还可以循环数字
<li v-for="n in 10">{{n}}</li>
------------------------------------------------
监听数据变化:
vm.$el/$mount/$options/....
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视
------------------------------------------------
vue组件:
组件间各种通信
slot
vue-loader webpack .vue
vue-router
=======================================================
引入 vue.js
bower ---> （前端）包管理器
npm install bower -g
查看版本信息: bower --version
bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息
<script src="bower_components/vue/dist/vue.js"></script>
-------------------------------------
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);
}
----------------------------------------
vue组件:
全局组件：
Vue.component('ccc',{
data(){
return { //组件里面放数据必须使用函数的方式，且要return出去一个json对象
msg:'^_^'
}
},
methods:{
show(){
alert(1);
}
},
template:'<p>这是第三种组件{{msg}}</p>'
});
var Home={
template:'<h2>这是2.0组件的定义新方法</h2>'
};
--------------------------------------
局部组件：
var vm=new Vue({
el:'#box',
components:{
'ccc':{
template:'<p>第四种组件</p>'
}
}
});
--------------------------------------------
动态组件:
<component :is="组件名称"></component>
--------------------------------------------
组件中模板的写法
1. 字符串:
template:'<p>第四种组件</p>'
2.script标签:
<script type="x-template" id="ddd">
<div>
<i>这是第二种模板</i>
<span>你好</span>
</div>
</script>
3.html标签:
<template id="eee">
<div>则是第三个模板</div>
</template>
--------------------------------------------
vue默认情况下，子组件也没法访问父组件数据
组件数据传递: √
1. 子组件想获取父组件data
在父级模板中：
<template id="aaa">
<h1>111</h1>
<bbb :mmm="msg"></bbb> //msg是父级的数据，命名如果有-在子组件调用的时候改为驼峰
</template>
在子组件的对象中：
props:['mmm'],
template:'<p>我是子组件--->{{mmm}}</p>'
2. 父组件获取子组件的数据
1.子组件把自己的数据，发送到父级
vm.$emit( "child-msg" , this.msg ); //msg就是子级的数据
2.父组件去接受数据
在父组件模板中
<span>我是父组件--->{{msg}}</span>
<bbb @child-msg="get"></bbb>
在父级方法中
methods:{
get:function(msg){
//alert(msg)
}
}
--------------------------------------------
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经废除。
--------------------------------------------
slot:
类似ng里面 transclude （指令）
多个占位符
<ul slot="ul-slot">
......
</ul>
<ol slot="ol-slot">
......
</ol>
<slot name="ul-slot"></slot>
<h1>我是h1</h1>
<slot name="ol-slot"></slot>
--------------------------------------------
vue-> SPA应用，单页面应用
vue-resouce 交互
vue-router 路由
2.0版的路由嵌套：
<div id="box">
<div>
<router-link to="/home">首页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
// 定义组件
var Home={
template:'<h1>This is Home</h1>'
};
var User = {
template:`
<div>
<h1>This is User</h1>
<ul>
<li><router-link to="/user/username1">show username1</router-link></li>
<li><router-link to='/user/username2'>show username2</router-link></li>
</ul>
<router-view></router-view>
</div>
`
};
var Username1={
template:'<p>I am username1</p>'
};
var Username2={
template:'<p>I am username2</p>'
};
// 配置路由 变量routes是固定的
var routes=[
{path:'/home',component:Home},
{path:'/user',component:User,children:[
{path:'username1',component:Username1},
{path:'username2',component:Username2}
]},
{path:'*',redirect:'/home'}
];
// 使用路由实例，变量router是固定的
var router = new VueRouter({
routes
});
// 挂载到Vue
new Vue({
el:"#box",
router
});
--------------------------------------
路由嵌套(多层路由):
主页 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}} -> 数据
--------------------------------------------
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
.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 地址
--------------------------------------------
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
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
// Babel是一个转换编译器，它能将ES6转换成可以在浏览器中运行的代码。
==================================================
webpak 搭建脚手架工作:
开发环境基于nodejs
npm
webpack
vue的组件都是通过.vue文件来实现，这些文件无法被浏览器解析的，需要webpack
vue-cli 脚手架
用来生成vue的模板（架子），相当于按照设计图搭建好房子的架子。
---------------------------------
开发步骤
1、下载node
2、下载webpack
npm install webpack -g
3、安装脚手架
npm install vue-cli -g
4、根据模板创建项目
simple 完全没用
webpack-simple 用他
webpack 有校验
browserify-simple
browserify
找到文件夹进去
vue init <模板的名称> 工程的名称（不用用中文）
vue init webpack-simple[#1.0] demo
项目名称
项目描述
作者
是否用sass
5、进入项目文件夹
6、npm install
下载依赖项（各种loader）
7、安装路由和交互
npm install vue-router vue-resource --save
8、启动项目
npm run dev
------------------------------
编写项目
App.vue 主文件
所有的html写在 template
模板里面必须有一个根文件
所有的js
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
}
}
</script>
数据必须放在函数的返回值中
-----------------------------------
组件的写法
1、创建文件 .vue结尾
2、写文件
<template>
写html
</template>
<script>
export default {
data(){
return {}
},
methods:{
}
}
</script>
<style>
写样式
</style>
3、在主组件中引用
a)import XXX from ‘上面创建的文件的路径’
b)挂在js里
data(){
},
components:{XXX}
c)在template里面用
<XXX></XXX>
----------------------------
路由
1、修改文件
找到webpack.config.js
看有没有
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
如果没有
resolve: {
alias: {
'vue':'vue/dist/vue.js'
}
}
2、再准备一些组件
3、修改main.js(入口文件)
a）引入路由文件
import VueRouter from 'vue-router'
b)开启路由
Vue.use(VueRouter);
c)写模板，或者是引入模板
const First={
template:'<div>我是第一个模板</div>'
};
import second from './component/second.vue';
d)配置路由
const router=new VueRouter({
routes:[
{path:'/first',component:First},
{path:'/second',component:second}
]
})
e)在vue中把路由挂载上
new Vue({
router,
el: '#app',
render: h => h(App)
})
f)在主模板中写路由的按钮和展示
<router-link to="/first">111</router-link>
<router-link to="/second">111</router-link>
<router-view></router-view>
项目打包
npm run build
会生成一个文件dist文件
别人拿到代码
npm install
npm run dev
上线【上线要用dist文件】
==========================================
vue中引入base.css的时候，需要在APP.vue中使用@import url('./base.css');