VUE学习笔记
一、入门
- vue只能兼容到IE9
- 虚拟DOM，MVVM模式
- 引入方式，直接向jquery一样用script标签添加
- 数据绑定
- 指令系统 v-
- 组件系统
二、VUE实例
- 创建一个Vue实例
var vm=new Vue({
//选项
})
new Vue({
el:"#app",
data:{
mes:"hellow Vue.js"
},
created:funstion()
{
console.log("实例钩子函数，被创建的时候执行");
}
})
- 数据绑定两种方法
//1.大括号Mustache语法
<p>{{mes}}</p>
//2.采用v-html
<p v-html="mes"></P>
3.vue mustache支持表达式
{{number=1}}
{{OK?'yes':'no'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>
4.Vue的指令
指令都以v-为前缀
<p v-if="seen">now you see me</p>
<a v-bind:href="url"></a>
<a v-on:click="doSomething">
5.修饰符
//指令后加“.”加修饰符，下语句表示v-on事件之后调用
event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
6.过滤器
过滤器可以用在mustache插值和v-bind表达式
{{message|capitalize}}
<div v-bind:id="rawId|formatId"></div>
new Vue({
//...
filter:{
capitalize:function(value){
if(!value)
return ""
value=value.toString()
return value.charAt(0).toUpperCase()+value.slice(1);
}
}
})
过滤器可以串联
{{message|filterA|filterB}}
过滤器可以是函数
{{message|filterA('arg1',arg2)}}
6.缩写
//v-bind 缩写
<a v-bind:href="url"></a>
<a :href="url"></a>
//v-on 缩写
<a v-on:click="doSomething"></a>
<a @click='doSomethis'></a>
7.计算属性
<div id="example">
<p>{{message}}</p>
<p>{{reversedMessage}}</p>
</div>
var vm=new Vue({
el:"#example",
data:{
message:'hello'
},
//计算属性
computed:{
reversedMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
//也可以采用methods实现计算
<p>{{reversedMessage()}}</p>
methods:{
receversedMessage:function(){
reutrn this.message.split("").reverse().join('');
}
}
//计算属性与methods，计算属性会将计算值缓存下来，而methods每次渲染都会重新计算。
<p>{{fallname}}</P>
new Vue({
el:"#app",
data:{
fistName:'Foo',
lastName:"bel",
}
computed:{
fullname:{
get:function(){
return this.fistName+this.lastName;
}
set:function(newValue){
this.name=newValue;
}
}
}
})
8.观察watchers属性
var watchers=new Vue({
el:"#watch-example",
data:{
question:"",
answer:"I cannot..."
},
watch:{
question:function(newQuestion){
//console.log(this.question);
//this.answer="waiting for...";
//this.answer=this.question;
//this.getAnster();
this.getAnstermy();
}
},
methods:{
getAnster: _.debounce(
function(){
var vm=this;
if(this.question.indexOf('?')===-1){
vm.answer="11111";
return;
}
vm.answer="Thinking...";
axios.get('https://yesno.wtf/api').then(
function(response){
vm.answer= _.capitalize(response.data.answer)
}).catch(function(error){
vm.answer="error could not reach the API:"+error;
})
},500
),
getAnstermy: _.debounce(
function(){
this.answer=this.question;
}
,1)
}
});
9.class与style绑定
<div v-bind:class="{active:isActive}"></div>
10.条件渲染
<div id="vif">
<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>
</div>
//条件判断
var vif = new Vue({
el: "#vif",
data: {
ok: true
}
});
11.v-show
var vshow=new Vue({
el:"#vshow",
data:{
ok:0,
}
})
<div id="vshow" v-show="ok">vshow_is_ok</div>
12.列表渲染
<ul id="vfor">
<li v-for="a in as">
{{a.mes}}
</li>
</ul>
var vfor = new Vue({
el: "#vfor",
data: {
as: [
{mes: 1},
{mes: 2},
{mes: 3}
]
}
});
//还可以
<li v-for=“{item,index} in items>
{{parentmessage}}-{{index}}-{{item.message}}
也可以采用==of==代替==in==
13.事件处理器
v-on
//事件修饰符
/***阻止事件冒泡****/
.stop
/****阻止默认事件****/
.prevent
<!--添加事件时采用事件捕获模式-->
.capture
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
.self
<!-- 点击事件将只会触发一次 -->
.once
//按键事件修饰器
14.表单空间绑定
v-model
15.组件
//全局注册
Vue.component(tagName,options);
Vue.coponent('my-component',{
//
})
//局部注册
new Vue({
//...
components:{
'my-component':Child
}
})
// is属性
解决浏览器不支持promise的Bug
- 安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境，可以使用ES6的所有新方法
npm install --save babel-polyfill
- 在webpack.config.js文件中，使用
module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
}
};
