渐进式前端框架,数据驱动
vue官方文档
1. Vue基础
- el:app对象挂载点,用css选择器选择需要挂在到哪个元素
- data:数据对象,字符串、数组、对象的访问如下代码所示
- method:方法
<body>
<div id="app">
{{message}}
{{courses[0]}}
{{languages.oop}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hi~",
courses: ["数据结构", "操作系统", "计算机组成原理", "计算机网络"],
languages: {
pop: "c",
oop: "c++",
}
},
method:{
f: function() {
// 方法
}
}
})
</script>
</body>
2. 本地应用
2.1 内容绑定
<!-- 将文本添加到h2中 -->
<h2 v-text="message"></h2>
<!-- 也可以使用表达式 -->
<h2 v-text="message+'123'"></h2>
<!-- v-html解析成innerHTML -->
<h2 v-html="message"></h2>
2.2 事件绑定
使用v-on:click属性或者@click属性。
<input id="app" type="button" value="事件绑定" @click="clickFunction">
<script>
var app = new var({
el: "#app",
methods: {
clickFunction: function(){
// 添加事件
}
}
})
</script>
甚至还可以传递参数。
<input id="app" type="button" value="事件绑定" @click="clickFunction(111,'hello')">
<!-- 回车执行 -->
<input id="app" type="button" value="事件绑定" @keyyup.enter="clickFunction">
2.3 显示隐藏
使用v-show或者v-if属性。属性中支持关系运算符。
<img src="#" v-shwo="true">
<img src="#" v-shwo="isShow">
<img src="#" v-shwo="age>=18">
上述v-show属性全都可以替换成v-if。两者的区别如下表
v-show | v-if |
---|---|
修改元素的display样式来达到显示隐藏的效果 | 直接从DOM树中添加或移除DOM树 |
2.4 设置元素属性
使用v-bind:属性名或者**:属性名**
<img :src="imgSrc" >
<img :title="imgtitle" >
<!-- active类名是否生效 -->
<img :class="isActive?'active':''">
<img :class="active:isActive">
2.5 for循环构造列表元素
<body>
<div id="app">
<input type="button" value="添加" @click="add">
<input type="button" value="移除" @click="remove">
<ul v-for="(course,index) in courses">
<li>{{index+1}} -> {{course}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
courses: ["数据结构", "操作系统", "计算机组成原理", "计算机网络"]
},
method: {
add:function() {
this.course.push("面向对象程序设计"),
},
remove:function() {
this.course.shift(); // 移除数组中第0个元素
}
}
})
</script>
</body>
2.4 双向绑定
v-model指令便捷的设置和获取表单元素的值。
<input type="text" v-model="message">
<h2> {{ message }} </h2>
此时,h2中的内容随input中内容的变化而变化
3. 网络应用
Ajax封装库axios的使用
见Ajax 3. Ajax封装库axios