终于开了Vue的坑了。
上实例,这次知识点讲解并非按线性顺序,敬请留意:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
#vueItem{
white-space: pre-line;
}
.class1{
background: #4169E1;
}
</style>
<body>
<div id="vueItem">
<p>{{ 114514+1919810 }}</p> <!-- 数据绑定的常见方式就是双大括号 -->
<p v-html="name1"></p> <!-- v-html指令用于更新innerHTML -->
<p v-bind:class="{'class1': showRace}" style="color: #FFFFFF;">看得到我</p>
<!-- v-bind用于绑定一个或多个特性或者一个组件到表达式 -->
<p v-if = "showName">姓名: {{name}}</p> <!-- v-if:根据表达式的值的真假来渲染元素 -->
<p v-if = "showRace">种族: {{race}}</p> <!-- else和else if的功能与JavaScript的类似 -->
<p v-if = "showAge">年龄: {{age}}</p>
<p>再说一遍</br> {{showCase()}}</p>
<p v-if = "showName">姓名: {{name}}</p>
<p v-else-if = "showRace">种族: {{race}}</p>
<p v-else-if = "showAge">年龄: {{age}}</p>
<a v-bind:href="url">任意门</a>
<p id="vueItem">
<p>{{message}}</p>
<input type="text" v-model="message"/>
</p>
<p v-if></p>
</div>
<div id="paragraph">1
<ul>
<li v-for="(value, key, index) in character">
{{index}} . {{key}} : {{value}}
</li>
</ul>
</div>
<script type="text/javascript">
/*
Vue.js 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
*/
new Vue({ // Vue对象可以直接声明
// Vue主体分为三个部分:el、data、和method
el:'#paragraph', // el是Vue构造器中的一个参数,它指定DOM元素中的id,它的值意味着接下来的改动全部在指定id的标签内进行
data:{ // data用于定义属性
character: { //
name: "Reiuji Utsuho",
rage: "bird",
age: "???(maybe 100?)"
}
}
})
var human1 = new Vue({ //也可以给变量赋予vue变量
el:'#vueItem',
data:{
name: "Komeiji Koi",
name1: "<h2> 古明地恋 </h2>",
race: "Satori",
age: 18,
showName: true,
showRace: true,
showAge: true,
url: "http://www.baidu.com",
message:"灵乌路空",
},
methods:{ // methods同于定义函数,可以通过return来返回函数值
showCase: function(){
return "姓名:" + this.name + "\n种族:" + this.race +"\n年龄:" + this.age;
},
}
})
</script>
</body>
</html>
运行结果:
分支有点多了,而且又不是声明真个八经的网站,就不分别展示了。其实还是懒