vue 的读音 view
vue到底是什么？
一个mvvm框架
vue和angular的区别：
vue：简单容易上手 指令以v-开头 个人维护的项目 比较小巧适合移动端的项目
angular：指令以ng-开头 由谷歌维护 所有属性和方法都挂在$scope身上 适合pc端的项目
共同点：不兼容低版本浏览器
常见的指令
指令就是扩展html标签功能属性
v-model 一般用于表单元素 双向数据绑定
v-for=“value in arr” 在1.0版本中可以直使用$index
比如
$(function(){
<!--在1.0版本中-->
<ul>
<li v-for="value in arr">
{{value}} {{$index}}
</li>
</ul>
v-on:click="deletePerson($index)"//这个仅仅适用于1.0版本，不要采坑了同学们
<!--在2.0版本中-->
<ul>
<li v-for="（value，index） in arr">
{{value}} {{index}}
</li>
</ul>
v-on:click="deletePerson(index)"
})
在1.0版本中 key是a b c
在2.0版本中 v-for的第二个参数是a b c ，第三个参数是1 2 3
v-on:click=“函数” 函数放在methods里边 简写：@click=“函数”
v-show=“true/false” 显示隐藏
@click(enent,12) 事件对象
阻止事件冒泡
a).ev.cancelBubble=true;
b).@click.stop
阻止默认事件行为
a):ev.preventDefault();
b):@contextmenu.prevent
键盘事件
@keydown $event ev.keyCode
@keyup
常用键
回车a):@keyup.13; 2):@key.enter
上 下 左 右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
属性
<img v-bind:src="url" alt="">
用src图片也会出来 但是在控制台上边会报404的错误
v-bind:src 的简写是 :src
还有：:width :title.....
class和style
class:
:class='' v-bind:class=''
:style='' v-bind:style=''
a、:class="[red,blue]" red blue是data里边的数据
b、:class="{red:true,blue:true}" red blue是data里边的数据
c、:class="json"data{json{red:true,blue:true}}
style:
:style="[c,b]"
注意使用复合属性是必须采用驼峰命名方式
:style="json"data{json{ color:'red',backgroundColor:'green'}}
模板
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}} html转义输出
过滤器
交互
如果vue想做交互 必须引入：vue-resouce
get:
获取普通文本数据
methods:{ //添加方法
get:function(){
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(add){
alert(add.status);
})
}
}
给服务器发送数据：
methods:{ //添加方法
get:function(){
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(add){
alert(add.status);
})
}
post:
get:function(){
this.$http.post('get.php',{
a:1,
b:2
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(add){
alert(add.status);
})
}
jsonp
//jsonp的请求
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5alFazu8AA54nxGKo9WTAnF6hhy/su',{
word:'a'
},{
jsonp:'cb' //callback 默认名字就是“callback”
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
vue的生存周期
钩子函数：1.0版本
- created函数在实例已经创建完之后执行
- beforeCompile 编译之前
- complie 编译之后
- redy 插入到文档中
- beforeDestroy 销毁之前
- destroyed 销毁之后
钩子函数：2.0版本
- created函数在实例已经创建完之后执行
- beforeCompile 编译之前
- complie 编译之后
- redy 插入到文档中
花括号闪烁的问题
v-cloak 用在比较大的段落
v-text 用在{{v-text="msg"}}内
v-html 用在{{v-html="msg"}}内 转义
写在style里边
[v-cloak]{diaplay:none}
计算属性的使用
1）
computed:{ //默认为get
b:function(){ //b是属性不是函数
return 值 //通过return返回值
}
}
2）
computed:{
b:{
get:function(){
return this.a+2
},
set:function(val){ //赋值
this.a=val
}
}
}
vue简单实例
vm.data ==data
vm.$mount ==el 手动挂载程序
在使用v-for循环时会有重复的数据 在控制台会报错 可以时候track-by="$index"
数据配合使用过滤选择器
- limitBy
limitBy 限制几个
limitBy 限制几个
limitBy 限制几个 - filterBy
filterBy 过滤数据
filterBy 谁 - orderBy
orderBy 1/-1 1正序 2倒序 - 自定义过滤器
vue.fileter(name,function(){
})
*自定义指令
v-red
vue.directive(red,function(){
this.el.style.background='red'
}) - 自定义元素指令 (用处不大)
<zns-red></zns-red>
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
}) - 监听数据的变化 vm.
watch(name,function，{deep:true});//深度监视
动画
- 第一种
<div transtion="fade"></div>
<style>
fade-transtion{
transtion:1s all case;
};
fade-enter{
opacity:0;
};
fade-leave{
opacity:0;
transform:translateX(200px);
}
</style>
-
第二种
transitions:{ fade:{ enterClass:'zoomInLeft', enterClass:'zoomInLeft', } }
组件
定义组件
-
全局组件
<aaa></aaa>var Aaa=Vue.extend ({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa) -
组件里边放数据：data必须是函数形式，函数必须返回一个对象（json）
Vue.component('aaa',{ data:function(){ return { msg:'我是函数' } }, methods:{ change:function(){ this.msg="change" } }, template:'<h3 @click="change">{{msg}}</h3>' }); -
局部组件 放到某个组件的内部
$(function() { var Aaa = Vue.extend ({ template:'<h3>{{msg}}</h3>', data:function(){ return {msg:'welcom'} } }); var vm =new Vue ({ el:'#box', //选择器 data: { //数据 }, methods: { //添加方法 }, components: //局部组件 { 'aaa':Aaa } }); });
第二种定义组件的方式
Vue.component('aaa',{
template:'<strong>{{msg}}</strong>',
data:function(){
return {
msg:'第二种组件方式'
}
}
})
第三种定义组件的方式
var vm =new Vue
({
el:'#box', //选择器
data:
{ //数据
},
methods:
{ //添加方法
},
components:{
'aaa':{
data:function(){
return {
msg:'我想大声告诉你 你一直在我世界里~~'}
},
methods:{
change:function(){
this.msg='太多的过去难割舍、难忘记。'
}
},
template:'<h2 @click="change">{{msg}}</h2>'
}
}
});
第四种 把组件单独放在某个位置
<script type="x-template" id="aaa"> <h2 @click="change">{{msg}}</h2> </script><template id="bbb"> <div> <h2>1111</h2> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </div> </template>
动态组件
<div id="box">
<input type="button" @click="a='aaa'" value="a组件">
<input type="button" @click="a='bbb'" value="b组件">
<component :is="a"></component>
</div>
<script>
$(function()
{
var vm =new Vue
({
el:'#box', //选择器
data:{
a:''
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>'
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
}
}
});
});
</script>
vue-devtools vue浏览器的调试工具
组件数据的传递
1. 子组件获取父组件的数据：
-
子组件在props中创建一个属性，用以 接收父组件传过来的值
-
父组件中注册子组件
-
在子组件标签中添加子组件props中创建的属性
-
把需要传给子组件的值赋值给该属性
1. 父组件获取子组件的数据：通过vm.@emit(事件名，数据)发射数据，通过@接收数据 -
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
-
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
-
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
slot：位置 作用：占位置
<body>
<div id="box">
<aaa>
<ul slot="ul-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol slot="ol-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</aaa>
</div>
<template id="aaa">
<div>
<p>111</p>
<slot name="ol-slot">hhh</slot>
<slot name="ul-slot">hhh</slot>
<p>222</p>
</div>
</template>
</body>
vue-SPA应用 ，单页面的应用
vue-router 路由 ：根据不同url地址，出现不同效果
vue-loader 基于webpack 解析.vue文件，.vue文件是放置vue组件代码 html css js
webpack 模块加载器，一切东西都是模块
vue-cli的及基本使用流程
1.npm install vue-cli -g //安装vue的命令环境
验证安装是否ok？ vue-version
2.生成项目模板
vue
网友评论