极客学院笔记地址http://wiki.jikexueyuan.com/project/vue-js/start.html
//创建
new Vue({
el:"#app",//绑定视图
data:data,//绑定数据
});
v-bind:is = "show" 绑定
插值
不修改{{*值}}
将html标签按照标签显示{{{值}}}
循环 v-for(item in types)
简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vueqq空间实现</title>
<script src="vue.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
500px;
margin: auto;
}
ul{
overflow: hidden;
}
li{
list-style: none;
float: left;
margin: 10px;
}
a{
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div id="app">
<!-- 固定不动的写在父组件里 -->
<div></div>
<!-- 后台获取到导航数据 -->
<ul>
<li v-for = "item in types">
<a v-bind:href='"#/" + item.link'>
{{item.title}}
</a>
</li>
</ul>
//创建绑定视图
<component v-bind:is="show"></component>
</div>
<script>
//创建组件
Vue.component('zy1',{
template:"<h1>这是主页1</h1>"
});
Vue.component('zy2',{
template:"<h1>这是主页2</h1>"
});
Vue.component('zy3',{
template:"<h1>这是主页3</h1>"
});
Vue.component('zy4',{
template:"<h1>这是主页4</h1>"
});
Vue.component('zy5',{
template:"<h1>这是主页5</h1>"
});
Vue.component('zy6',{
template:"<h1>这是主页6</h1>"
});
Vue.component('zy7',{
template:"<h1>这是主页7</h1>"
});
Vue.component('zy8',{
template:"<h1>这是主页8</h1>"
});
//创建Vue
var app = new Vue({
el:"#app",
data:{
types:[
{'title':'主页1','link':'zy1'},
{'title':'主页2','link':'zy2'},
{'title':'主页3','link':'zy3'},
{'title':'主页4','link':'zy4'},
{'title':'主页5','link':'zy5'},
{'title':'主页6','link':'zy6'},
{'title':'主页7','link':'zy7'},
{'title':'主页8','link':'zy8'}
],
show:'zy1'
}
});
console.log(app.show);
//处理hash值
function hash(){
var str = location.hash;
str = str.slice(1);
str = str.replace(/^//,'');
var map = {
zy1:true,
zy2:true,
zy3:true,
zy4:true,
zy5:true,
zy6:true,
zy7:true,
zy8:true
}
if(map[str]){
app.show = str;
}else{
app.show = 'zy1';
}
console.log(str);
}
// hash();
//监听事件对象
window.addEventListener('hashchange',hash);
</script>
</body>
</html>
内置过滤器
<h1>货币{{price | currency}}</h1>
<h2>小写转大写{{msg | uppercase}}</h2>
<h2>小写转大写{{content.toUpperCase()}}</h2>
var data = {
price:28,
msg:'good day',
content:'这电脑进abc口奶粉的<i>写题文字</i>'
}
var app = new Vue({
el:'#app',
data:data
});