VUE.js的学习
1.声明式编程
即声明后,可以多次运用
例如:
const aaa=new Vue({
el:'#aaa', //挂载要绑定的元素
data: { //定义数据
message:'blah哈哈哈哈哈'
}
methods:{ //添加方法
}
})
2.遍历的运用
若数组中存在多个元素
data:{ //定义数据
message:['apple','banana','orange']
}
若想让元素分别存在于li中,可以
<div id='aaa'>
<ul>
<li v-for="item in message">
{{item}}
</li>
</ul>
</div>
用v-for遍历对象中的元素
<li v-for="item in man">{{item}}</li>
<li v-for="(item,key) in man">{{item}}->{{key}}</li>
3.实现计步器
利用v-on:click
<div id='aaa'>
<h2>当前计数:{{counter}}</h2>
</ul>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
在代码中添加methods
data: {
counter:0
},
methods:
{
add:function(){
this.counter++;
},
sub:function(){
this.counter--;
}
}
4.vue的mvvm
5.插值操作
{{}} 称为mustache语法
v-once 只发生一次,不会随着数据的改变而改变
v-html 以HTML的格式进行解析
data: {
url:'<a href='http://www.baidu.com'></a>'
},
<h2 v-html='url'></h2>
v-pre 跳过翻译过程,直接展示mustache语法
v-cloak 
6.用v-bind绑定属性值
不能用mustache语法直接用在属性中,得用v-bind
url:'http://www.baidu.com'
<img v-bind:src="url">
<a v-bind:href="url">bidu</a>
更简洁的,可以用语法糖的写法
<img :src="url">
<a :href="url">bidu</a>
绑定class属性
用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二:也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isline}" >Hello World</h2>
用法三:和普通的类同时存在，并不冲突
注:如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive， 'line': isLine}">Hello World</h2>
用法四:如果过于复杂，可以放在一个methods或者computed中注: classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
也可以用数组来绑定(不常用)
绑定style
<h2 :style="{属性名:属性值}"></h2> //属性值都要用""包裹起来
属性名用驼峰,不能用-连接
数组 语法绑定
<li :style="[fz,fc]">hhhhhhh</li>
fz:{fontSize:'100px'},
fc:{color:'yellow'}
7.计算属性
vue对象的一个属性,用于对属性的计算
let aaa =new Vue({
computed:{}
})
计算属性一般没有set方法,只有get方法,所以为只读属性,所以不需要（）,可视为一个属性
计算属性在执行前会有缓存,会观察结果是否发生变化,多次使用只会调用一次,而methods会被频繁调用
8.块级作用域
在ES5及之前,if与for均无块级作用域,只有function有,ES6后加入let,使if,与for有了作用域
const
1.注意一: 一且给const修饰的标识符被赋值之后，不能修改
const name =’ why’ ;
name =‘ abc’ ;
2.注意二: 在使用const定义标识符,必须进行赋值 ;
3.注意三:常量的含义是指向的对象不能修改，但是可以改变对象内部的属性.
9.ES6增强写法
10.事件监听 v-on
v-on: 可简写成:@
v-on的参数问题
- 1.没有参数时,有无小括号都一样
- 2.有一个参数
<button @click="add()">+</button>
<button @click="add">+</button>
在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法
- 3.又需要其他参数又需要event对象时,可以用 $event 手动获取
v-on的修饰符
- 取消事件的冒泡
@click.stop - 取消默认事件,如submit按钮的自动提交
@click.prevent - 只发生一次
@click.once
11.v-if,v-else-if,v-else
v-if 最基本用法:是否让标签中的内容呈现出来(true/false)
其余的和if一样
<h2 v-if="false">当前计数:{{counter}}</h2>
v-else-if与else if的效果一样
v-else 与v-if相配对,不用附加布尔值,与v-if的效果相反
12.v-show与v-if的区别
■v-show的用法和v-if非常相似,也用于决定一个元素是否渲染
■v-if和v-show都可以决定一个元素是否渲染 ,那么开发中我们如何选择呢?
v-if当条件为false时,压根不会有对应的元素在DOM中。v-show当条件为false时,仅仅是将元素的display属性设置为none而已
■开发中如何选择呢?
当需要在显示与隐藏之间切片很频繁时,使用v- show口当只有一次切换时,通过使用v-if
13.key的绑定
14.数组的响应式方法
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
15.遍历
1.for(let i in 数组){}
i为索引值
for(let item of 数组)
直接获得数组中的元素
高阶函数
filter/ map/reduce
filter中的回调函数有一个要求:必须返回一个boolean值
true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
false: 当返回false时， 函数内部会过滤掉这次的n
const nums =[ 10, 20, 111, 222, 444, 40, 50 ]
let newnums=nums.filter(function(n){
return n<100
})
map
const nums =[ 10, 20, 111, 222, 444, 40, 50 ];
let newnums=nums.map(function(n){
return n*2
})
reduce
对数组中的所有元素进行汇总(相加)
const nums =[ 10, 20, 111, 222, 444, 40, 50 ];
let total=nums.reduce(function(prevalue,n){
return prevalue+n
} ,0)
连结运用
let total=
nums.filter(function(n){
return n<100
}).map(function(n){
return n*2
}).reduce(function(prevalue,n){
return prevalue+n
} ,0)
箭头函数则更加迅速
let total=
nums.filter(n=>n<100).map(n=>n*2).reduce((prevalue,n)=>prevalue+n)
15.v-model
用于表单元素与vue的data的双向绑定
<input type="text" v-model="message" />
以下做法也有同样的效果
<input type="text" :value="message" @input="message=$event.target.value" />
一个例子:
在单个checkbox的运用
<input type="checkbox" v-model="agree" />男
你的选择:{{agree}}
<button :disabled="!agree">下一步</button>
data:{agree:true}
在多个checkbox的运用
<input type="checkbox" v-model="hobbies" value="篮球"/>篮球
<input type="checkbox" v-model="hobbies" value="足球"/>足球
<input type="checkbox" v-model="hobbies" value="羽毛球"/>羽毛球
<input type="checkbox" v-model="hobbies" value="乒乓球"/>乒乓球
<h2>你的爱好是:{{hobbies}}</h2>
data:{
hobbies:[]
}
在select的运用
值绑定
v-model的修饰符
16.组件化
1.创建组件构造器
const aaa=vue.extend({template: `` } )
template:``后跟的为html代码,称为模板
其中template后面不是单引号
2.注册组件
Vue.component('组件要运用的标签名',组件构造器)
此方法创建的为全局组件,可以在多个vue实例中使用
局部组件在vue的对象中创建
const aaa=new Vue({
el:'#aaa', //挂载要绑定的元素
components:{
组件要运用的标签名:组件构造器
}
})
3.使用组件
<组件要运用的标签名></组件要运用的标签名>
父子组件
当有两个组件构造器时,可以在其中一个构造器中加入components,在里面创造一个局部组件
`const aaa=vue.extend({
template: ``
components:{
}
})
语法糖构建全局组件(直接将extend的{}对象写在component里)
即省略了extend()
Vue.component('组件要运用的标签名',{
template:``
})
局部
const aaa=new Vue({
el:'#aaa', //挂载要绑定的元素
components:{
组件要运用的标签名:{template:`` }
}
})
组件分离
1.将组件写在script(type=“text/template” )标签中,并设置id,然后再将template后需要的html标签换成 #qqq
<script type="text/template" id="qqq">
<div>
<h1>hhhhh</h1>
</div>
</script>
Vue.component('组件要运用的标签名',{
template:`#id名`
})
2.直接用一个template标签将需要封装的html代码放入,设置id,再带入
17.组件的data等属性
组件不能直接读取vue中的data,methods,但是组件拥有自己的数据库
组件自己的数据存放在哪里呢?
口组件对象也有一个data属性k也可以有methods等属性，下面我们有用到)
口只是这个data属性必须是一个函数
口而且这个函数返回一个对象，对象内部保存着数据
Vue.component('cpn',{
template:`#qqq`,
data(){
return { title : 'iiiiiiiiiiiii' }
}
})
18.父子组件间的通信
当传递时,需要在组件
`<标签 v-bind:子组件=“父组件”></标签>
html不支持驼峰命名
父传子(props)
1.利用数组==:props:[“cmessage”,“cmovies”]
2.类型限制
props"{
子组件的名:数据类型
//cmovies:Array
}
3.提供默认值及必传值
props:{
cmessage:{
type:String,
default:100, //默认值
required:true/false //是否需要传值
}
}
子传父
利用自定义事件
1.在子组件中添加一个事件
例如@click
<button v-for="item in array" @click="btnclick(item)">{{item}}</button>
2.在子组件中加入一个方法
methods:{
btnclick(item){
this.$emit('itemclick',item) //第一个参数是事件名称
//第二个是要传的内容
}
}
3.在父组件中加入一个方法
methods:{
cpnclick(item){
console.log(item)
}
4.在父组件的标签中接收子组件的事件
<cpn @itemclick="cpnclick"></cpn>
直接访问
父访问子
$children或者$refs
把子组件放于一个数组中
$children[0]为第一个子组件
用得更多的是$refs,它不是一个数组,本身就是一个对象类型且为空,可以在子组件的标签中添加ref属性并赋值
<cpn ref="rrr"></cpn>
父组件通过this.$refs.rrr
来访问子组件
子访问父
$parent
访问根组件$root
el与template的关系
在vue对象中,也可以加入template属性,加入的内容会替换掉el所绑定标签的所有内容
19.VUE的生命周期
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
